Every once in a while you read something on the internet and it leaves you scratching your head thinking, "what the heck is this person talking about?" We recently had a similar thing happen to us over the weekend when we came across this article on the so-called "responsive design myth," saying responsive design is a "little overrated."
Here's a break down of the article's arguments against responsive:
- Creating pages in responsive design takes a lot longer and they require new content management workflows
- Content hidden on screens still needs to be downloaded and causes long load times
- Responsive design requires a whole new process for image optimization on all devices
- It doesn't make sense from a retail or e-commerce perspective
- Testing is too complex; you have to test for every browser and device
To summarize, responsive design causes headaches, isn't as simple as it appears and takes forever to do. Well, not exactly and here's why, point-by-point.
Responsive Design Takes Longer to Do
We've said it once and we'll say it again, designing for one device is suicide. But designing a website for desktop then designing a mobile-specific site or a tablet-specific device is just a waste of time. Doing so only triples your workload and you're once again stuck in the mentality of designing for specific devices rather than across them all.
Using a responsive framework actually saves time since you're dealing with a fluid grid that will shrink to match the four corners of most devices, from big to small. You're not having to do more work in the process.
British design firm The Workshop, for instance, used Foundation, our responsive framework, to build an interactive educational site for National Geographic in about three weeks. Even for the Boston Globe's responsive site, the designers were able to quickly move into code and iterate on it after only a couple weeks of static design.
So this myth's busted.
Hidden Content Slows Things Down
Long load times is really a valid concern and the article was right to bring it up. There's no perfect solution (right now), even with Foundation, for hidden images on mobile that don't muck up the page's load. If we hide one image and show another on mobile, it still loads.
One way around it is to build everything you can with CSS, making sure images are as optimized as they can be. You might even think about using javascript to control the preloading of images.
So we yield on this point. It's valid and something that still needs a lot of work to get right.
Responsive Design Requires Image Optimization For All Screens
Sorry to keep using Foundation as an example, but it really works in this case too. As Jonathan pointed out months ago, our responsive framework doesn't allow images larger than their container, scaling them down to fit the grid. Background images can be sized using a background-size property. You can also use very large images that are scaled to 50% size on newer devices, too.
For retina displays, you can use a media query that targets a pixel ratio of 2 to load a larger image and scale its size down to 50%, so a very large image only loads on retina. Far from perfect, but these are just a couple of ways of implementing responsive images.
So we'll bow here too and say that there's still work to do when it comes to retina displays, but not for different screen sizes in general.
Doesn't Makes Sense From a Retail Perspective
This argument is a real head scratcher. Especially when you consider that shoppers spent more than $20 billion on mobile purchases. Think about how many people you could potentially be closing off from your product because you only designed it for consumers on one device. Or how horrid of a shopping experience you're creating by building three or four different variations of one site that are specific to a single device. Responsive design makes the most sense — one site that can neatly shape itself to work on a desktop, phone or tablet.
Yeah, this one was busted before it even got started.
You Have to Test For Every Device
This is precisely why responsive design makes sense. You can't possibly test for every device and browser out there. After all, HTC has some 12 different screen size and resolution combinations on Android. And that's just one product line! What about Acer, Motorola, LG, Sony ... well, you get the idea. Conservatively, there are some 6,500 web-enabled devices out there.
We keep small sampling around the office that we test — and that's what you'll need too. However, responsive design allows us to account for all those browsers and devices as much as possible. It allows us to focus on a representative of each OS and device rather than testing some 6,500 devices.
So the you-have-to-test-everywhere excuse is bunk. Myth. Busted.
A Solid Tool
In the article, Patrick Emmons of Adage Technologies is quoted as saying:
Don't believe the hype that [responsive design] is the only tool you need to concern yourself with. If there are platforms that you determine are worth the additional investment of platform-specific solution, you can always leverage responsive design and use Google to track usage to help validate the market.
Fair point. Responsive design isn't the only tool out there. And you should always use the tool that best suits your needs. However, responsive design is a solid tool. It works. That's why so many are turning to it. That's not hype or myth, that's just good design sense.