Better Responsive Design

There are a lot of arguments being had over the merits of responsive design. Is it worth the time? Does responsive design inherently create lazy development practices? Would your users be better served with a native application than a responsive web app?

I'm not going to talk about any of that.

The fact of the matter is that the majority of popular, mature, and widely used frontend frameworks are centered around being responsive, meaning that regardless of how you feel about responsive design, it's a trend I expect will continue for quite a while. From a designer / developer perspective, responsive makes sense on paper: write the content / view once, add on some alterations for varying sizes, and then just let the content adapt to the size of the device it is on. In practice, this can work really well, except for one part.

The best User Experience is the expected User Experience, and sometime users do want to view the desktop sized site on their mobile device.

The Wisdom of @angrynoah

@angrynoah and I have known each other for a few years. If there is anyone I can count on to vocalize a minute amount of frustration with anything, especially user experience, it's him.

New redesign looks good, responsive works well, except for the thing that's broken with almost all responsive sites. When I request the desktop site, nothing changes.

Desktop site? You mean the little option in your mobile browser that switches your user agent to fake being a desktop browser so that you can bypass mobile sniffing? People still use that? It's a responsive site, the point is that you don't have to press that button. As far as I am concerned, everything is working as intended.

I'm not a UI guy, I'm just a user, and as a user, I expect this button to do something. The fact that it doesn't makes me think your site is broken, simply because expected user behavior doesn't work.

That's fair. To me, the "View Desktop Site" button has always been a hack. By definition, forcing your browser to switch user agents just to get a different experience is a hack. Why am I going to invest extra time and effort into supporting a known hack? Why go out of my way to make my personal site responsive and support some ancient workaround.

Then it hits me.

Just because it's an awful hack doesn't mean you get to not support it. If the user expects it to work, then you had better make it work. When I started in the web dev field, supporting IE6 was still something that had to be done everyday. It was a big part of my job, and frankly, it separated the men from the boys most of the time.

Put simply: If your responsive design does not allow users to opt out, it is broken.

Fixing Responsive Design

The concept is simple enough: If your content is being viewed on a device that has switched to a desktop user agent, then adjust your meta-viewport tag to allow for a desktop experience.

Here's some code that does that:

(function(d){
    function C(k){return(d.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2];}

    var ua = navigator.userAgent.toLowerCase(),
        android = /android/i.test(ua),
        wasmobile = C('wasmobile') === "was",
        ismobile  = android;

    if(ismobile && !wasmobile){
        d.cookie = "wasmobile=was";
    }
    else if (!ismobile && wasmobile){
        d.getElementsByName('viewport')[0]
            .setAttribute('content','user-scalable=yes, maximum-scale=2');
    }
}(document));

This code comes courtesy of Stack Overflow and one of it's users. If I knew which one, I would credit them here, but I do not so I can't. I didn't write this, but it's a good starting point, and I am going to try and improve on this code over time