Written July 8, 2015. Tagged Responsive design.
We made Auctionet.com responsive, and then some customers wanted the old site back. Turns out they liked the overview you get with a scaled-down desktop site.
My first reaction was "won't fix" – we'd just thrown away the old non-responsive code, and good riddance.
But then I realized we could add back a "desktop mode" with almost no code – so we did. It's pretty obvious once you think of it – I'm not the first. But here it is:
On mobile browsers (as detected by user agent), we show a desktop/mobile toggle link.
The link just causes a "desktop_mode" cookie to be set or unset.
If the cookie is set, our pages say
<meta name="viewport" content="width=1000">
<meta name="viewport" content="width=device-width, initial-scale=1">
so the mobile browser renders the page at 1000px width. For us, that's the minimum width that doesn't trigger small-display breakpoints.
And that's it!
We only show the toggle links to mobile browsers, because desktop browsers don't respect
viewport declarations, so it would have no effect there.
Ideally, browsers would be detected by feature (whether they respect
viewport) and not by user agent, but this seems difficult to achieve.
If a mobile browser has a viewport at 1000px or wider (e.g. a landscape iPad), the toggle won't be meaningful. I didn't bother with that case (the user is likely to ignore the toggle), but you can if you like.