razorborg

Opting out of Responsive Design

Jan Martin Borgersen
December 8th, 2013 · 3 min read

I was clicking through some links off of Zurbs Foundation pages this weekend and stumbled upon this article that was written in September:

http://css-tricks.com/user-opt-out-responsive-design/

Whats funny about this is some of our story with Zazzles responsive redesign that launched over the summer.

It turns out that if you do a competitive analysis of large e-commerce sites on smartphones, youll find today that most of them have a View Full Site link somewhere that sends you to, well, the full website, which you can then pinch-and-zoom all you like. As a developer (and my designers agree), I rationalize this that a) these sites started doing a mobile friendly site some years ago, before we learned how to build a responsive site, b) the mobile friendly sites strip out a LOT of the content and interactivity of the full site, and c) its possible these companies (especially the bigger ones) have entirely separate teams (possibly entirely separate agencies) working on each of these experiences. The responsive hype really only caught on the end of last year, so this is the year were beginning to see folks doing future-proof website design, and we anticipate that many of these sites will change how this works in the coming months.

This becomes an educational issue with non-technical folks who are used to seeing View Full Site links on their phones. Regular users dont actually care that were building for the future or that Responsive is the way to do it! They have some expectations, and if your smartphone design fails them, they want to click View Full Site and feel like theyre at their desktop.

More to the point, if you find yourself repeatedly having to explain what a breakpoint is, and why we took away pinch-and-zoom from you because the mobile site is the same as the full site!, theres something wrong with your design.

Which leads me to my primary learning this year:

**Implementing a responsive site is easy.

Designing a responsive site is HARD.**

Responsive sites have to scale in multiple dimensions, and they have to be legible across lots of screen sizes and pixel densities. Samsung devices alone hit 4”, 5” 7”, 8”, and 10”. Set your breakpoint at 768 css pixels and your iPad renders like a desktop in portrait mode, but your Galaxy Tab renders like a smartphone in portrait and a desktop in landscape. This implies that breakpoints are bad, but theyre a really useful design crutch because a 5” screen is a fundamentally different experience than a 10” screen.

After iterating on our designs awhile and soliciting lots and lots of feedback, we came to the conclusion that sometimes, for some folks, on some devices, being able to pinch-and-zoom was a GOOD experience. In particular, scaling to a desktop-like experience on 7-8” tablets was a clear winner over seeing radically different layouts in portrait vs landscape mode. Perhaps, with a lot of iteration and work, we could tune our experiences so that this doest matter, but were simply not there now.

So why not bring back the View Full Site link?

I gave up on my idealism when I started learning SEO, why should I be a purist with such a nascent new way of building things?

The technical solution was straightforward we did almost exactly what the article describes: Add a link, drop a cookie with the user preference, and change our META VIEWPORT tag to force a screen width of 1024 css pixels (this happens to be the landscape width of an iPad), scale to the device width, and allow user-scaling. We also default all tablets to this mode.

View Full Site is, of course, a misnomer, but one couched in user expectations. For us it means give me a scalable fixed-width site to pinch. Our other adaptive mobile optimizations (native droplists instead of DHTML, fewer search results per page) still happen.

And does feel like a Full Site experience. Which, ironically, is kinda the point of Responsive Design.

More articles from Jan Martin Borgersen

Modernizr, IE8, X-UA-Compatible, and Standards Mode

Here ’ s a quick tip for folks using Modernizr for client browser detection (or any other script that puts comment blocks around your HTML…

September 24th, 2013 · 1 min read

Should I Use A Carousel?

Should I Use A Carousel? Jared Smith warns us about the accessibility of Carousels.

August 2nd, 2013 · 1 min read
© 2003–2020 Jan Martin Borgersen.
Stock photography from Unsplash.
Built with Gatsby. Hosted with Netlify. Theme based on Novela by Narative.
Link to $https://github.com/razorborgLink to $https://www.linkedin.com/in/jborgersen/