December 8, 2013 by Jan Martin Borgersen
I was clicking through some links off of Zurb’s Foundation pages this weekend and stumbled upon this article that was written in September:
http://css-tricks.com/user-opt-out-responsive-design/
What’s funny about this is some of our story with Zazzle’s responsive redesign that launched over the summer.
It turns out that if you do a competitive analysis of large e-commerce sites on smartphones, you’ll 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) it’s 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 we’re 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 don’t actually care that we’re “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 they’re 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!, there’s 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 they’re 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 does’t matter, but we’re 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.