Responsive design with “View full site” option

[neilcarpenter]

I appreciate that this should never need to be an option – if a responsive design is done correctly then all versions of the site (ie. different viewport widths) will offer an acceptable user experience (especially if ‘mobile first’), and there should be no need for the old ‘view full site’ button that you see on alot of mobile sites.

However, I am looking to turn a currently fixed-width site responsive, and I am worried that if I do, there will be ALOT of murmurings about how new is bad, and change is evil (this is for a large community site with a large number of users, most of whom are not the most forward-thinking).

Again, I appreciate that if a responsive site is done right the experience should be usable by all at any screen resolution. The issue is that no matter how well done it is, users will still complain simply because it is not the same on all devices. And because this is not a new site, it is an old design being adapted to now behave responsively, users are accustomed to seeing the site the same on all devices and so will likely become confused.

And so I fear I will need to add the option of viewing the full site – this is common on mobile sites, a button which just links to the main site pages, but I have yet to see this be done on a responsive site, does anyone have any good ideas as to how to do this?

I imagine it will involve javascript to apply CSS, or write in a CSS file on click to fix the necessary widths/heights/sizes etc, and some kind of cookie usage(?) to remember the users preference so that they don’t go straight back to the responsive site once they click a link?

Any ideas anyone???

[chrishrtmn]

I made an account here just to comment that I myself am interested in this functionality. I currently get frusterated on some responsive/adaptive sites on my phone wishing I could view the full-site, to see everything or find missing functionality.

Personally, responsive design may be step forwards when it comes to simplicity, speed, and primary content, but I feel it is a partial step backwards when it comes to secondary content/functionality on mobile phones when we can’t view the full-site when desired.

Anyone know of such functionality here without needing to develop a new site without responsive design integrated?

[JoshWhite]

The only way I can think of doing it, and just so you know I’m not a code guru so someone is likely to say “WTF – of course you can do it this easy way” :P, but in those cases I think a specific page mobile redirect is what can handle 90% of mobile traffic needs. I hate the idea of a “mobile site” and a “regular site” to manage, but from what I’ve observed, most people on a mobile device have a very limited set of needs: contact name, address, map, phone, possibly services. For the most part, I’m talking about businesses instead of massive content sites like this one.

I’m thinking that a single page that is 100% responsive that handles those people might be the way to go and if you want to browse the real site, just click into one of the other pages and go for it. The rest of the site for the most part wouldn’t worry about it.

Curious what others think because it’s a pretty active topic of discussion in the design realm today.

[Johnnyb]

Well the easiest way to accomplish it would just be to have your media queries inside a separate CSS file. When they click on the ‘View full site’ button then it simply uses JS to remove the link to that stylesheet from the DOM.

[neilcarpenter]

I had completely forgotten about this thread and had actually gone ahead and used JohnnyB/andy’s advice – single CSS file for media queries, JS to remove, cookie to remember preference. Can see a demo page I put together here: http://kingsblogs.co.uk/responsive-kcl/generic-narrow.html

[chrismorata]

Just wrote an article about this! I was surprised to find you can simply edit the values for the viewport width, and it seems to work just fine. Here’s the article I wrote about it: http://creativeandcode.com/responsive-view-full-site/. Instead of using cookies, I opted for HTML5 Local Storage.

I think this option works well because it reduces the need for an extra CSS file or be overly explicit with your styles (scoping styles based on a body class).

[Author]

Posts