Blog (my web musings)

Search Blog

Opting Out of Responsive Design (choosing desktop layouts on mobile)

Responsive web design (done well) allows users to achieve their goals on any internet accessible device, but what if they *want* to view the fixed width desktop version of a website, even on mobile?

This post comes at a time when responsive web design interest is piquing; Probably the result of those emails we've been receiving via Google Webmaster Tools, that basically tell us how "X % of your web pages do not provide an optimal mobile experience... your content will be ranked accordingly." Put bluntly, Google will soon be favouring responsive websites in mobile search results, that are optimised for viewing on a multitude of devices... and they will penalise those that are not mobile-friendly. And that day is looming... 21st April 2015. The new search algorithm means that websites will literally be labelled as "mobile-friendly" (if they are) and appear higher up the search results.

Also in the pipeline is the threat of a red "slow" label that will mark poorly performing websites to warn users before they click. Needless to say, making sure your website is mobile-friendly is now more important than ever, and many diligent web developers are making moves to do this, whether through a retro-fit or mobile-first rebuild.

But what if mobile users WANT the desktop view?

Based on usage data or feedback from users, there might be need (or just a desire) to give users the option of choosing which layout they see;

Maybe the unfamiliar mobile layout is confusing?

Maybe they want a uniform experience across devices?

Maybe their mobile device (tablet) can support the desktop layout well enough?

I won't discuss the reasons or debate the pros and cons here - Chris Coyier already touched on much in his Opt-Out article from 2012. I first read the article during research for a mobile/desktop switch on Fast Edit - a desktop-first responsive design from 2013 where a secondary mobile stylesheet is removed and added again via JavaScript - but I revisited it while researching ways to provide a similar switch for a mobile-first website.

In the article, Chris provides a brief PHP snippet to remove the responsive part (e.g. initial-scale=1, minimum-scale=1) of a viewport meta tag when opt-out conditions are met;

And he also advises on use of a cookie to save the selection - although he doesn't provide that particular code. Well, that got me thinking about my PHP Stylesheet/Content Switcher with Save Cookie blog post, where I could very easily use the same logic AND store the selection in a cookie by using a variation of my previous code :)

Notice above that when the "fixed" condition is met, the viewport is forced to a 1024px width (you can change the width as needed).

The modified viewport tag is enough to disable a responsive layout on mobile devices (which respect the viewport meta tag), BUT, desktops *don't* respect the viewport meta tag, so if this is the only switch provided, regardless of which layout is selected (mobile or desktop), the view on desktop will continue to be responsive thanks to the layout responding to relative units (%, vw, vh, vmin, vmax), max-width / max-height and media queries.

So, if you want to offer a uniform experience across devices, you must also add a stylesheet switch that reverts to a fixed desktop layout when those conditions are met;

Setting up the CSS

First you need a responsive stylesheet... In the responsive (your default) stylesheet, this snippet hides the toggle switch when the browser width is bigger than 1024px (you can already see the desktop layout at this size so you don't need the switch option);

Then you need a fixed-width stylesheet... If you're lucky, you might be able to use your responsive stylesheet with all the media queries removed (not the styles inside them, just the media query lines) with a few width overrides (change max-width definitions to explicit width to kill the fluidity), particularly on your outer container or wrapper div;

Alternatively, you might be able to serve your IE8 stylesheet as a desktop layout stylesheet (depending on CSS). Most likely, you will need to provide a modified version of your responsive stylesheet, to fix everything for desktop though.

For reference, I've provided a sample setup in a download pack - head over to the demo page to test and grab!

Remember, in responsive mode the toggle switch is only visible on a screen that is less than 1024px wide, so reduce the browser width to see it.