Women’s clothing brand Roman Originals has been inundated by calls since the photo became the center of an online debate.
Is responsive web design right for your e-commerce site? A user experience architect explains what responsive design is, and what it can—and can’t—do.
Everybody is talking about responsive web design these days. The problem is few people are talking about it correctly. Half the people are touting responsive as the savior of the web in a post-desktop era. The other half are cursing responsive for creating more problems than it solves. Both sides are right and, at the very same time, wrong.
You may be asking yourself, "How can responsive be the answer and the problem all at once? How can I tell the good information from the bad? What makes a good responsive site? Is a responsive site right for me?" I'll try to answer these questions while clearing up some of the misconceptions about responsive in the process. Let's start by resetting our expectations for responsive.
What does responsive web design do?
The only thing responsive was ever intended to do was change your contents layout within a browser regardless of screen size. That may not seem like much, but the implications are significant.
In theory this means we create, maintain and serve just one code base (HTML, content) which creates content parity for the user. The user can find the same content whether browsing on their desktop, phone or tablet. The question however is, do users always want the same content, or features for that matter, regardless of device? I'll come back to that in a bit.
So, if all responsive is intended to do is handle presentation of content then what's with all the confusion and misinformation? To clear this up we need to know what defines responsive web design.
Responsive web design defined?
Ethan Marcotte, the guy that coined term and explained how it's done, defines responsive web design by three things: fluid grids, flexible media and media queries. Anything more or less than that and we're talking about something else.
So, what are these three things and what do they do? Fluid grids are percentage-based columns that aid in site design. Flexible media are images and videos that scale up and down to fit the space they are designed for. Finally, media queries are the magic beans that tell the browser at what point to rearrange or modify the elements on the page
Many articles ignore this definition and conflate what responsive actually does with things that other techniques actually do. Because of this responsive is suffering from a kind of identity crisis, so let's clear that up right now.
What responsive web design does not do.
Fix bad or too much content. Unless you've been writing with mobile consumption in mind I can almost guarantee your content isn't ready for responsive. Content that is easy to consume on a mobile device is easy to consume anywhere. Edit your content ruthlessly, but thoughtfully until you achieve what I like to call "appropriately concise" content. Same goes for features.
Optimization or adaptation. Maybe the single biggest knock against responsive sites is that they are bloated. Sad to say, that’s not an untrue characterization in many cases. Responsive itself is not to blame here. This is like blaming your hammer for hitting your thumb.
Optimization is about reducing both file sizes and total number of files served. Adaptation is about changing content or features based on user need, and/or device capabilities and constraints. Adaptation can occur in the browser, on the server or both.
Make life easy. Even in its simplest implementation responsive is not easy. In fact it's extremely hard to build a responsive site that loads quickly, maintains design integrity, and delivers the best possible experience across devices.
Developers aren't the only ones that have it hard. Responsive web design requires everyone involved with the project to change their approach to and expectations of what it means to build web experiences. Let go the desire to achieve pixel perfection and identical experiences across devices. This is both impractical and often not in the user’s best interest.
For example, I worked on an e-commerce site in 2012 with about a million visits a month that detected over 4,000 screen sizes, 89 different browsers, and 30 different operating systems in a single quarter. These numbers were growing steadily quarter after quarter. In this light it's easy to see the futility of chasing pixel perfection across devices. And the bigger the audience the more impractical it becomes.
Your audience doesn't care about identical, they care about consistent and effective. This is a subtle but significant difference.
How do you build a good responsive site?
For starters don't think about building a "responsive site" per se. You wouldn't try to build a house with only a hammer, a "hammer house" if you will, so why try to build a site with only responsive? Responsive should be thought of a just one of the tools needed to build a site.
Yet many articles fail to mention any complementary techniques that improve the performance of responsive. An in-depth examination of all the techniques that can and should be used is well outside the scope of this article. That said, I wouldn't be doing you or responsive any favors if I didn't mention at least a few that play a key role in creating good responsive sites.
Mobile first: Next to responsive this may be one of the most misunderstood topics. It's really about people first, their device second.
It's about knowing the user’s context, constraints and capabilities. Context is about the user’s situation: Do they have a lot of time or a little? Are they focused or distracted? Is the situation urgent or leisurely? What device are they using? And so on. Constraints and capabilities are about what's working for them and against them as they try to complete their goals. Finally it's about what device they are using to accomplish their goal and why.
From a development perspective it's about working up from the smallest, least capable to the largest, most capable. When you go this route you essentially get mobile for free and prevent much of the bloat caused by working from the desktop down