Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

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

Details

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;

<?php if (!$_GET['resp'] == 'no') { ?> 
    <meta name="viewport" content="width=device-width">
<?php } ?>

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 :)

Opting Out of Responsive Design (letting users view fixed width desktop layouts on mobile):

Demo

All the relevant PHP code and CSS can be either found on the demo page or in the download pack at the same location, but I'll explain the logic below.

Setting up the PHP

This code sets up the 30-day save cookie. It goes right at the top of the web page;

<?php // setup the cookie
$layouts = array('rwd', 'fixed'); // default layout 1st ('rwd') 
    foreach ($layouts as $choice) { 
        if (isset($_GET['layout']) && $_GET['layout'] == $choice) { // set cookie for chosen layout 
           $_SESSION['layout'] = $_GET['layout']; 
           setcookie('layout', $_GET['layout'], time()+60*60*24*30); // how long for cookie (60*60*24*30 = 30 days) 
           } 
        }
    $savedlayout = isset($_COOKIE['layout']) ? $_COOKIE['layout'] : $layouts[0]; // use cookie layout else use default
    $layout = $_SESSION['layout'] ? $_SESSION['layout'] : $savedlayout; // use session layout else use cookie layout
?>

Here is the viewport meta tag switch that goes in the <head> section;

<?php if ($layout == 'fixed') { // for devices that recognise viewport meta tag
    echo '<meta name="viewport" content="width=1024" />'; // force desktop 1024px fixed layout
    } else { 
    echo '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />'; 
    }
?>

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;

<?php if ($layout == 'fixed') { // optional - for devices that don't recognise viewport meta tag 
    echo '<link rel="stylesheet" href="/opt-out-styles.css" />'; // fixed layout 
    } else { 
    echo '<link rel="stylesheet" href="/rwd-styles.css" />'; // responsive layout 
    } 
?>

Finally for the PHP side of things, is the toggle mechanism for the web page - just a query string passed via a hyperlink;

<?php if ($layout == 'fixed') { 
    echo '<p class="switch"><a href="/?layout=rwd">Switch to Fluid Mobile Layout</a></p>'; // switch to default/rwd layout 
    } else { 
    echo '<p class="switch"><a href="/?layout=fixed">Switch to Fixed Desktop Layout</a></p>'; // switch to optout/fixed layout
    } 
?>

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);

@media ( min-width:64em ) { /* bigger than 1024px - same as viewport meta tag */ 
    .switch { display:none } /* hide switch if big enough for desktop layout */
    }

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;

.page-content { width:1024px } /* fixed width for main container - same as viewport meta tag */

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.

Bye all - until my next article...