Anyone who embraces responsive webdesign is stupid

Often enough to be constantly annoyed at it and wish I could just design an alternate site instead of trying to “make it work” at different sizes.

Obviously, designing mobile-first can help, as it can be easier to scale up than to scale down. I’m not really talking about your average modern website which is normally just a monolithic single column “tower” page. But rather, try taking a magazine or newspaper site, or other content heavy sites that depend a lot on searches, filters, tags, categories, and shrink them to flip phone sizes.

In my brain, I just think think you have to ruin the experience a little. You either have mobile-first design which creates a great experience on mobile, than scale it up for desktops where you end up with a non-optimized experience that can feel unnatural. Or you design an awesome desktop experience and end up with a crammed, less than stellar mobile experience.

For example, it always obvious when a desktop experience is crammed into mobile. They don’t remove frustrating popups and modal windows that are impossible to close. Fonts aren’t right. Giant social share bars still follow you up and down the screen, too many graphics, animations, and ads which may have been acceptable on a large screen, feel like they take 80% of the space on mobile.
The opposite is sometimes true too. A great mobile site is upscaled to desktop where the experience seems awkward, typography is not optimized, the size, scale, ratio of screen elements is unnatural, too many things hidden that don’t need to be, etc etc.

All that to say this. You get a better mobile experience when you design for mobile. And you get a better desktop experience when you design for desktop. You can certainly do both, if you want to spend the money on designers and programmers. Or you can create alternate, fully optimized sites, for each.

And remember this is not just CSS here. I know with media queries you can re-style just about everything, which is great. But there comes a time when your actual HTML may need rearranged too. This isn’t only about source order, but certain elements may need to be moved to be in completely different contexts and containers.

1 Like

This is exactly what I mean. Creates an ugly, unoptimized hack of a mobile experience. Just grab all sidebars and columns and shove them into a vertical column of 100% width. A lot more thought needs to be put in to this type of thing. If you have a list of links in a UL, everything changes, do you create a menu, a dropdown, a hamburger? Does vertical UL need to change to inline? Everything gets restyled, everything changes. It’s not just shoving multiples columns into one. This is probably what some people do, and creates the exact ugly mobile experience I’m talking about.

1 Like

Yeah, and considering JS is around 98% turned on (or closer to 99%), what my work is doing is simply moving stuff around via JS. AppendTo, InsertAfter, etc etc etc.

Oh joy. Does that mean I can look forward to even more sites with busted layouts when JS is disabled?

1 Like

Absolutely :slight_smile: . I’m not even trying to fix this for non-js people.

Granted, all my sites will be schools so unless you’re having a recent desire to go to U.S. schools… :wink: .

I should clarify, that JS disabled won’t break the sites, per say, it will just give an unoptimal experience.

When do we start in the middle and go tablet-first? :smiling_imp:

3 Likes

That just begs the question then; rather than make the mobile experience even more complex, requiring more code (thus bandwidth), wouldn’t it be better to just deliver an optimized custom mobile experience from the start?

Certainly it can’t be easier to do a bunch of programmatic JS stuff and media query stacking then it is to build a dedicated mobile site?

Are you referencing my work? I have no control over the situation.

Assuming we DO have control. If you want to:

  1. Deliver a highly mobile-optimized website (which includes any media, images, sound etc).
  2. Limit the amount of data sent and thus bandwidth.
  3. Reduce scripts needed, and calls to the server.
  4. Reduce complexity.

Then I can’t help but think the best method to take a large, complicated, desktop website and make a mobile experience out of it, is to build a dedicate mobile site, rather than trying to hack up the large site with media queries and lots of new JS.
After all, many websites create dedicated “apps” for their websites (which is actually annoying). And that is itself a form of just designing a dedicated mobile site. So why do that, when you can just create a dedicated mobile site from the beginning, instead of an app?

Anyway, just my two cents on the issue.

Granted it’s harder to take an existing site and backward engineer it for mobile rather than starting with a clean slate but if you build a separate site for mobile then you have the extra headache of 2 sites and all that content to manage.

I feel it would be better to redesign the current one so that it works across devices from the start and in the process make it a better experience for all devices.

As Bruce Lawson said a while ago the question is "whether there is such a thing as a mobile web or is there only one Web that we access using a variety of different devices?

Where does the mobile web start and where does it end and how do you detect them? We have devices ranging in size from small phones, large phones, tablets of multiple sizes, laptops, desktops etc. Users typically access the web on various devices depending where they are it seems that the consensus of opinion is that visitors should experience more or less the same thing but in a way that suits the platform.

We should build desktop sites that are fast and easy to use from the start and then converting them to mobile (or vice versa) isn’t so much of a problem.

Apps are a separate concern as an app usually does one thing and does that one thing well but does not really relate to the web as a whole.

3 Likes

The content wouldn’t change. The mobile site would simply display it differently. Nothing extra to manage as far as the backend or server-side stuff. It’s not like you have to write two completely different articles or something.

Mobile devices still detect mobile sites when they exist. And the user has the option to show the full desktop site or not. This never bothered me. Sometimes I wanted their mobile version, but if they chopped out way too much info, I’d switch to the desktop version and pinch/zoon my way through the content.

Sure. Well the “mobile first” design concept is still relatively new. I agree with it for most sites but I also think some content-heavy or multimedia-heavy sites might still suffer when trying to “grow up” a mobile-first design into a nice desktop experience.

Like others have said; on a desktop, I have lots and lots of room. I don’t want to see a full-screen calculator. I don’t want to see humongous wasted space and requiring me to perform many extra unneeded steps opening menus and hidden slideouts and such because the mobile experience is showing its ugly head on my desktop.

Like you said, visitors should have an experience that suits the platform. For me that means on a desktop I see more information at once, with less scrolling, clicking, opening, sliding, and playing hide and seek with information. But on a mobile, I want the meat front and center and ready to consume with all the fluff hidden away.

I think we will just have to agree to disagree and who knows I may be completely wrong but from the hundred or so small sites I’ve done for clients this year I have never had a problem making them responsive or usable.

Sounds like a responsive site to me.:slight_smile:

I don’t believe you can use the same ‘back end’ with a different structure without a lot of problems; which is what we are trying to avoid.

That’s the problem. You cant reliably test for mobile devices as mentioned in that article I linked to and even when you try you are back in the realms of ‘browser sniffing’ which everyone agreed never works in the noughties so why are we trying to do the same again?

You also have the added problem of what is a mobile device as they are not just small phones. You can have large phones or small tablets that are mobile devices and would need responsive sites also as a one size fits all approach doesn’t even work for just the mobile sector.

It’s really just one web which we access with various devices and a well thought out responsive site can meet those needs. Most of the .mob sites I’ve visited have been cut down versions of the main site and miss out all the content that I was visiting for. Users don’t want less content on a mobile they still want it all.

There are bad designs and there are good designs and as mentioned in that article sites that have gone lean, mean and responsive have outperformed their previous incarnations considerably. You can have your large calculator on the desktop and hide it for small screen without too much trouble; assuming that you planned for it that way.

There are certain problems to overcome of course but I don’t believe a separate mobile site is the way forward for most people. There are cases where companies have unlimited resources and perhaps a mobile only site will work for them but for the majority of sites responsive is a good option.

It would be good to hear other peoples views as things are never always black and white in web design :slight_smile:

4 Likes

What do you mean by that?

Which bit?

I was summarising from the article link I posted earlier and basically it has been shown that slimming your desktop version down produces better visitor satisfaction. The same goals that you want for the mobile version apply just the same to the desktop and keeping things lightweight, straight forward and simple will usually pay dividends.

People tend to think that as they are coding for desktops they can throw everything including the kitchen sink into the project when instead they should be producing a fast, lean and efficient site without all the extra cruft. When you start from that viewpoint then mobile and desktop become easier to manage in a responsive site.

3 Likes

The sad part is that what is usually meant by “slimming” is just getting rid of banners, ads, useless graphics and other nonsense screen elements.

After all, people are in the business of consuming content. When I visit a site, I’m there to read something, watch something, or listen to something, not casually browse sidebars, popups, flyouts, mega menus, and look at a dozens sponsored ad placements.

Lean, to me, means gimme the content, pure and simple.

I agree most websites can be responsive and work just fine. My argument is that some websites, especially content-rich sites like magazines/news, simply do not trim down responsively very well. A large complicated site, no matter how hard you try, will only end up looking chopped up and ugly with responsive design. The only way to fix an inherently “large” website to be useable on mobile is to have an optimized mobile design. This is why complex sites like news and magazines all want to have apps to consume their content. An app is, after all, just an optimized mobile experience.

Responsive design is already doing the same thing again. Don’t you have to pick precise pixels when your design will shift its look? Aren’t there such things as scale factors and high density screens? Saying that we shouldn’t “detect” the device is really no different than saying we shouldn’t “detect” sub 700 pixel widths. What’s the difference? It’s still the designer who is deciding at what point his design will benefit from a shift in layout.

I’m all for responsive design, so don’t get me wrong, there are much needed techniques there. But that also doesn’t make me feel good to see a content-rich site “responsive-designed” down to a shrunken mess. I suppose that is still just the fault of the designer. Designers also create crappy .mob sites.

All I’m saying is that sometimes I’d like to experience a highly optimized desktop site, and sometimes a highly optimized mobile site. And responsive web design alone can’t accomplish it. At least not without some tradeoffs, like additional scripts and styles, which actually makes the mobile site more bloated than the desktop site!

Back on the original question, I saw this earlier. It looks like there are an awful lot of stupid people out there, and the situation is getting worse…

No its not really the same as they use different methodologies. ‘Browser sniffing’ is checking the User Agent string and trying to find out if the devices you want to target are in there. Of course in the last couple of years the devices you would be testing for have changed or indeed many new ones are on the scene and won’t get picked up by your script. Browser sniffing is unreliable at best and a short-sighted approach.

Responsive design on the other hand is mainly only interested in the width (or height) available in which to show your design. You can serve retina quality images for higher quality devices if you want but that’s all catered for in the css at no extra cost and is a side issue to the main question. There is no browser sniffing in responsive design and indeed the best approach is to be device agnostic,

Even if you find there is a real need for .mob version of your website then you still have to create a responsive site to take care of all the tablets, ipads, mini ipads, small laptops and loads of other various sized devices.

Not to mention that google’s algorithm now prefers responsive websites and will return higher results for responsive sites than for non responsive.

Google also recommends responsive web design instead of mobile only sites.

Responsive design is Google’s recommended design pattern.

This would seem to confirm what I have been saying and that RWD is still the way forward.

There may be some use cases for mobile only sites but for the majority RWD is the best choice. We shouldn’t also try to mimic an 'app; with our mobile view; an app is usually a specialised application that does one thing really well whereas a website has do do many things.

We seem to be talking the same language here :smile: (but perhaps looking at it from a different point of view).

I’ll add that a feature that’s important to me personally is to be able to browse a desktop version of a site even if I’m on a small screen such as a phone. Sometimes when we optimize for small screens, we’re forced to cut too much, and the mobile site ends up feeling like a crippled version of its desktop counterpart. This is especially true for sites that have high density content and features, such as Amazon or IMDb, for example, where I almost always choose to browse the full, desktop version, even if I’m on my phone.

1 Like

Well like I’ve been saying, it’s only really complicated, content-heavy sites with a rich desktop experience which suffer when retrofitting mobile-responsive design.

Take Facebook for example, that’s a 4-column design. It has a couple simple responsive changes but bottoms out at 1000px, hardly mobile size.
Sure they want you to use the mobile app, but I don’t. I just use it within Chrome, and guess what, they present an optimized mobile site, not some crunchy munchy responsive magic on the 4-column desktop design.

If somebody can turn the 4-column desktop Facebook into the single column mobile experience with some magic responsive CSS and honey-I-shrunk-zuckerberg magic JS, then I’d like to see them try.
They would be, in effect, trying to recreate and redesign the entire website purely with CSS/JS, when in fact the mobile FB experience requires its own set of features and functionality to be a good experience. Heck, just optimizing for mouse versus finger navigation is often a big deal. It isn’t just, make DIVs bigger with media queries.

Google may want responsive, but Facebook ain’t listening, they know a good mobile experience needs to be designed from the top down as a mobile experience, while the desktop experience needs to be designed as a desktop experience, with all those 4 glorious columns. (except the 4th one).