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.
[source: Mike Donahue, Citrix] 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.
Progressive enhancement: Not everyone has the latest, most capable browser or fastest Internet connection. The trick is to layer on enhancements for those that do without excluding those that don’t.
A good way to think of this is to look at an escalator. When an escalator breaks it simply becomes stairs. Motion in this case is an enhancement to an already functional system. Give careful consideration to every enhancement and what will happen when it breaks, not if it breaks.
For example, if for some reason the JavaScript you’re using for your navigation fails to load can the user still navigate your site and get to your content? Always keep in mind that while it’s likely your enhancements are what draw the audience in, it’s your content that they really want. A true enhancement never gets in the user’s way, even when it fails.
Fun fact: responsive itself is a progressive enhancement.
Server-side device detection: Devices lie, and even when they do tell the truth it’s not always enough. Device-detection services help optimize and adapt content and features when needed. Give people only what they can handle.
Each of these topics go much deeper and are far more nuanced than we have time for here. We’ve barely scratched the surface of what you need to consider when building responsive responsibly, and we still have two questions remaining.
Is a responsive site the right choice?
The real question is “Does the user’s needs change when their device changes?” Knowing their device alone doesn’t help us decide; knowing their needs does. If the user’s needs don’t change based on device then responsive may be right.
If the user’s needs are different you need to know why so you can determine the best solution. For instance, do they need access to device functionality not currently available through the browser? A mobile app may be a better option in this case. Is there functionality that is only useful on a touch-enabled device? You may need a more adaptive design. There’s a lot to consider, and it can help to have a partner to work it all out.
What should I look for in a responsive partner?
Whether it’s an in-house team or an outside agency, having the right people on the project is crucial to success. The best people are those that know it’s as much about why to do responsive as it is about how to do it.
A good responsive partner doesn’t assume responsive is the right answer. When responsive is the right answer they understand that responsive is part of a strategy and not the strategy itself. Look for a partner that works content out, mobile first, with progressive enhancement.
I hope this clears things up a bit and helps you feel more confident in choosing to, or not to, go responsive. Citrix is a provider of mobile technology for businesses and service providers.