61

There is nothing worse than getting automatically redirected to a mobile version of a site, and not having (or not easily finding) a "view normal site" link. It's not just that the mobile site is a scaled down version of the normal site, it's the unfamiliarity - the sudden 1-dimensionality of what used to be a 2-dimensional page and the obscene amount of scrolling required. The previous mental map of the site is no longer accurate.

On the Boston Globe site (the oft-cited shining example of responsive design), I find the amount of scrolling to be extremely painful if I am not looking to read in a linear fashion. With the retina display on an iPhone, the desktop version would be discernible and immediately navigable with a quick tap-zoom to any location of the page. As with most responsive designs, the "view normal site" option is not available.

Should users be forced into a responsive design? Should they be able to toggle if off to "view normal site"?

Below are the estimated viewport overlays of an iPhone on the Boston Globe site at each view:

enter image description here

=== Update 2012-09-12 ===

Some prototypes have emerged recently:

12
  • 5
    The problem becomes...what is the "normal state"? The largest? The small-ish desktop? Are they even missing anything (they probably shouldn't)?
    – Ben Brocka
    May 1, 2012 at 22:49
  • 1
    To me it feels like the example of the Boston Globe's site is just an odd implementation of Responsive Web Design as the content feels like it should be trimmed/paged for sure based off the screenshot. You could argue that since its a news site though that you would want all the content in one page for sure. Although I have wondered the exact same thing in passing -- if it's better to just have a separate mobile site that you can allow users to switch back and forth from as opposed to forcing them down a single path. I think more options are always better (within reason of course).
    – GotDibbs
    May 1, 2012 at 22:57
  • 6
    Honestly, what's poor about the implimentation? The image is very biased, just because you can "see" lots of the page in the "estimated viewport" doesn't mean it's readible. It paints an extremely incomplete picture
    – Ben Brocka
    May 1, 2012 at 23:05
  • 2
    This is a good question. Thinking out loud...can one have both? Can it be responsive, but allow a user to zoom out to get the 'desktop layout'? Hmm...I might have to play with that a bit.
    – DA01
    May 2, 2012 at 3:07
  • 2
    @dnbrv It can be answered with expert opinion though. I think this falls into the good subjective category.
    – JonW
    May 2, 2012 at 7:50

11 Answers 11

29

Yes, you should allow users to escape it.

The Boston Globe redesign was handled by Ethan Marcotte, who wrote the book on responsive design. Combined with the CMS nature of the site makes it perfect for deployability, usability, and flexibility concerns with responsive designs.

Each viewport has to morph content to promote, demote, and generally rearrange content. If you design (and test) it correctly, you could meet the needs of the majority of your users. For everyone else, I'd suggest breaking out of the media queries to a larger one (somewhere between min-width: 1000px and 1200px). To not enable this option is to assume that you're offering everything that your normal site has in a smaller format, and in most responsive designs, that really isn't the case.

For desktop users visiting on mobile, they are absolutely locked into the viewport with no recourse; this can be inherently frustrating for some users. There may be other issues like newer devices that are displaying the wrong viewport or generally haven't been covered by media queries, making the design suboptimal - in that case, fall back to the native device's rendering of the page.

Edit (8/13/2012)

I spoke with Ethan about this issue, and I think we agreed. Good responsive designs shouldn't trim features or content from the "desktop" viewport. With the introduction of frameworks such as Bootstrap, I think the issue we're seeing is very poorly done responsive sites that hide certain functionality (such as nav menus) because the designers/developers haven't approached responsive design in the ideal way.

In addition, new devices, browsers, and even PPI/high resolutions may render a responsive website in weird ways. These instances should be rare, as the best responsive sites are not designed for devices/breakpoints but rather ANY canvas, but allowing users to break out to 960px or so is a good fallback.

6
  • Thanks, Nic. Do you know of any responsive sites that allow users to escape it? May 3, 2012 at 0:49
  • @luke amazon.com? Ive always liked their mobile options
    – WernerCD
    May 3, 2012 at 1:09
  • Agreed, Amazon a good mobile experience - and they allow you to view the full site easily... but looking for sites that use the responsive design technique (1 page codebase, different stylesheet rules based on device size - as opposed to a separate mobile version of the site) that allow users to opt out of the mobile view. May 3, 2012 at 1:49
  • @Luke the issue I see is that a lot of responsive designs aren't doing it correctly - and if they're not even getting the concept right, they're not going to know how to escape media queries. We're going to continue to see a lot of this. So, to answer your question, I haven't seen any yet that allow you to break out of the current media query.
    – Nic
    May 3, 2012 at 3:30
  • Great response Nic. One small tip to add to it might go something like this: When you allow users to escape the responsive version be sure you link to the "full" version of the page they are on and not just link to the home page.
    – craigminch
    May 4, 2012 at 15:17
5

Jacob Neilson specifically recommends allowing mobile users to opt out of the mobile version when they need to.

But it's also important to note that this is an example of the site improperly adapting to a device. Your mobile phone is not the same as all other mobile phones, and if enough effort was spent it is likely that an in-between layout... not the full site, not the simple mobile site, but something that mixes the two... would provide a better experience. The issue is that layouts cost money, and at some point the value received is not worth the investment.

3
  • 3
    Neilson's view of the mobile web is quite different from those espousing and practicing responsive design. His views are interesting but I consider them a bit separate from responsive design. Good Smashing article on the subject
    – Ben Brocka
    May 1, 2012 at 23:02
  • The key, though, is that responsive design is a bit of a compromise. It's better than now mobile site. And it's better than a completely separate mobile and desktop site.
    – DA01
    May 2, 2012 at 3:18
  • I would contest that it is cheaper than a completely separate mobile and desktop site, net better. Forcing a mobile device to parse very complicated CSS to eventually display simple, online approriate content layout is not as good for the user as if the server sent out simple content that the mobile device could render faster. However, I do agree that responsive design does strike a good balance, usually, between cost and UX. Jul 31, 2012 at 21:13
5

The mobile market place is changing at such a fast rate that it's impossible to design for all the different configurations. There are simply to many variables in play to build a design matrix to address all the possibly different combinations.

While you are using an iPhone with a 3.5" display, another visitor might have a 4.6" with a 720p display. Are they mobile or desktop? Based upon screen resolution they are a desktop, but based upon screen size they are mobile. That is just today, what about tomorrow? The Samsung Note has a 5.7" display at 720p, then we could look at the changing market for tablets. Also Microsoft Windows 8 will introduce a whole line of laptops with touchscreens.

Let's first understand what responsive layout really is. It's a way of stepping down a layout from it's intended form to better display content without the need to zoom, and to do that without the designer having to overly compensate during the design phase. It follows in the history of "build it once, run it everywhere" of software development.

The problem with responsive design is that it's based upon the following assumptions.

  • media properties (i.e. screen size, orientations) can be generalized across multiple devices.
  • the practice of stacking elements to re-arrange them will be sufficient.
  • the primary intent of the design was desktop, with mobile layout being an automated after thought.

So with all that said. Responsive design is just a tool and it might work in some cases, but not in all. It is there, to change the layout to accommodate a device that doesn't present the original design effectively. It is not a standard and you shouldn't assume that the mobile device needs assistance rendering the page.

10
  • Thanks for the in-depth answer. I'm in total agreement with the logic that leads toward responsive design as a default... just not clear on why responsive design patterns are choosing to take control away from the user (to see a desktop view) as devices move toward resolution independence. There will be poorly executed responsive mobile views of a site - what is the user to do if there are too many display:none's in the mobile view or a certain table (created by editors, not developers) is not easily viewable? May 2, 2012 at 1:25
  • 2
    Design testing is the key. Just as in software, the designer must verify that it works on a wide range of devices. That the user experience is consistent and effective. Just assuming that a responsive framework will do the work for them isn't going to cut it.
    – Reactgular
    May 2, 2012 at 1:34
  • 3
    This is a little inaccurate. Responsive design isn't about 'stepping down from an intended design'. It's about it BEING the intended design from the start. The model where it's an afterthought is the opposite of responsive design: where you have two separate sites.
    – DA01
    May 2, 2012 at 3:09
  • 2
    I disagree with "the primary intent of the design was desktop, with mobile layout being an automated after thought." IF you are designing a new site, with a new layout, you should start with the most restrictive design, mobile, and then scale up.
    – CaffGeek
    May 2, 2012 at 17:18
  • 1
    @Mathew ah, I see what you meant. Yes, responsive design is about one site: all devices. That said, it's not that you start with a desktop site or you start with a mobile site. It's one and the same.
    – DA01
    May 3, 2012 at 1:51
2

Why not just a simple toggle to add, remove or switch style sheets, though I am sure there might be some drawbacks to this approach.

Try resizing the browser window and clicking on the toggle buttons on this demo.

1
  • Nice concept. I like it - thanks for sharing it. We're actually proceeding with a solution that bases responsiveness off of a .responsive class and then remove the class if a user wants to see "desktop" view and vice-versa... seemed like a bit less latency than loading stylesheets. Aug 13, 2012 at 21:47
1

I hope this becomes an answer rather than me rambling in my head...but I'll give it a shot...

The iPhone was really the first mobile device (at least, widely distributed device) that was designed with the intention that you view 'the regular web' rather than the dumbed-down WAP and other mini mobile-centric type web sites.

Steve Jobs made a device that made it incredibly easy to zoom in and out of a larger document to see everything you want to see. It was great!

But...other devices didn't offer nearly that type of flexibility (Nokia devices, BlackBerry, etc.) and a lot of designers just didn't agree with it.

So along came responsive design. Which is great, as it allows you to design a single web site and have it work as it should on all sorts of devices.

Alas, as you point out, It's not always the experience the end user wants. I tend to agree.

I think two things really make this an important issue:

  • retina display (and similar high density screens)
  • those devices in between a phone and tablet/pad (the small pads/large phones)

In both cases, it's quite plausible that a person wants to leverage the extra pixels they have and see the 'full site' as a zoomable document rather than a tall linear document.

So, uh...an answer...umm: YES! Users should be able to switch between the two.

Of course, that can still be accomplished with your single responsive web site. The key is to let a user tell the site that even though they are viewing it on an x-pixel wide screen, they'd like to see the full-pixel wide layout.

2
  • Thanks, DA01. It's good to have some validation that I'm not completely crazy. We're retrofitting a legacy site with responsive design and are planning to base responsiveness on a combination media queries and a toggle-able class... making the class toggle-able at a system level to enable certain areas of the site, but also considering allowing toggle by user preference - since we have many existing users who may not 'get' the benefits of the responsive design at first and will want an out. May 2, 2012 at 3:24
  • 1
    I think the toggle could be labeled simply "full / mobile". Of course, they'd get the exact same responsive site, but you'd report back a different screen width based on the preference. Best of both worlds!
    – DA01
    May 2, 2012 at 3:27
1

I have bult a prototype responsive site that provided 'go to full site' functionality. Unfortunately I'm not able to share it but I can share the general principles.

The CSS is built using Less which means that the content of media queries can easily be parsed into a second style sheet that effectively applies the same rules as the widest media query. This second style sheet also sets fixed widths for some of the wrapper elements to pin the site out to a 'desktop' presentation.

The 'go to full site' button triggers setting a session cookie which is then read by the server side code which removes the viewport tag, swaps the source from the responsive CSS to the fixed width CSS and adds an extra class of "wide" to the body tag to provide a hook for some styling tweaks. The 'return to optimsed site' button triggere the removal of the cookie and reinstates the viewport and responsive style sheet.

Functionally this works well but, so far in all our user testing nobody has used it. It will be intesting to see the analytics on this when it goes public.

1

2 Points.

1) If I am a designer, and I design a site specifically for a mobile device, you accept it. If I make a site specifically for a 7", or 15" device, you accept it. Why is it bad if I design for all of those situations in one site?

2) People surf on their phones when they are on the go, usually busy, often between things. If I go to the Boston Globe site on my phone, I want less content then all of that. I want to see top stories, in a single column. Two finger zooming is a UX nightmare. Yes, I should be able to get to the full site - if I want to. That is a mobile site - I have a hard time coming up with a reason not to target 7" or 50" monitors with responsive design, even if there is no way to see the 'full site' which as stated before really doesn't mean anything.

1

Very interesting question. But I would like to turn the question on its head: when would a general, non-readable and zoomable overview be an aid in navigating content?

This is exactly like the cognitive zoom in the upcomming Windows 8, where you can zoom out of the Metro tiles view to rearrange your tiles. The is a vid of a demo here (look for it at around 4:05). If users get enough info from such a reduced overview to make sensible decisions then it might be.

As such I think this issue goes further than just a yes/no responsive design discussion. I think we should experiment more with these zoom capabilities so we can discover what works and when.

1

I feel that it is unnecessary if the site content is presented fully and correctly to the user. It is about being content-centered and displaying it correctly for each view. If the content and/or organization of the site does not lend itself well to this then a full responsive design is most certainly not the right choice in the first place. A full split or possibly a hybrid approach would be most applicable then.

FYI, here is an example of setting up a full size view for a RWD site by Chris Morata.

2
  • The issue is that a lot of sites aren't presented correctly and fully - many of them just conceal content at different levels. I'm hoping this changes in the future.
    – Nic
    May 3, 2012 at 17:05
  • That is true, but then that is where RWD shouldn't have been done. Granted it might be the client pushing for it but it comes down to management May 3, 2012 at 17:47
1

Yes, you should never force any user for the responsive designs. Specially, the Ecommerce industry knows this well enough. Many of the users who found that the mobile websites they were using contained less features than the one with the desktop version were greatly outraged. As, a result many ecommerce websites offers a way to revert back to the old desktop versions.

Also it is worthwile to mention here that I find Responsive websites amazing, specially when I am on the move. Because they are so clear and there is so less clutter, due to which I can see everything so clearly on my shaking mobile handset.

Source: http://www.sitepoint.com/disable-responsive-design-option/

4
  • 3
    "Many of the users who found that the mobile websites they were using contained less features than the one with the desktop version were greatly outraged" Really? And who says responsive design provides less features than desktop?
    – JonW
    Sep 5, 2014 at 10:45
  • @JonW Hi, I am new to SO. Just added a source for my answer. There are many websites like Amazon, Flipkart, Snapdeal, etc all the features are under some other drop down. So, apparently a user who is walking and simultaneously trying to get the desktop like functionality will not be able to achieve anything. For example, let's say there's "Day's deal" or "best buy", which if not present in mobile versions could be highly frustrating for window shoppers, as they are look specifically for those deals.
    – steve
    Sep 5, 2014 at 10:56
  • 1
    Really, you're arguing against badly designed responsive sites, not responsive sites in general. Many RWD sites can (and do) provide all the functionality of larger screen. All RWD is is media-queries that rearrange the content. If content is removed or only available on certain devices that's a different issue really.
    – JonW
    Sep 5, 2014 at 11:00
  • @JonW You are right. No harm in accepting mistakes. Atleast, I'll learn something everyday! :)
    – steve
    Sep 5, 2014 at 11:38
0

This is becoming more and more of a problem as the years go by. Shockingly bad design and decisions persist. Many developers being under 30 do not realise what this does for people with macular degeneration. If people are complaining, yes, you should act, or lawsuits may follow. The standard workaround is to use RDP/VNC to a desktop (real or VM) and browse on the desktop, windowing the desktop screen. I never want to see a mobile site unless it is very very simple, or is an app. Handling the presentation layer is the job of the device. Zooming in on a menu only to have it disappear is very frustrating. It must never appear that you are acting deliberately to prevent people from exercising their right not to be paying you for instance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.