UIEtips: Devising a Strategy for Responsive Design

BY JARED M. SPOOL

Originally published: Jan 29, 2013

Thanks to Marco Dini for translating this article to Italian.

This year, it will be hard to find an organization that doesn’t prioritize making their web site responsive. Yet, as we talk to organizations moving in this direction, we’re finding they haven’t nailed down their strategy for getting there yet.

The Core Tactics

Almost everything you read about responsive web design starts with what I call the core tactics — the basic elements that make responsive sites be responsive. You can’t ignore these, they form the basis of the 
overall strategy.

The first core tactic is discovering the breakpoints. These are the page widths that will cause design elements to re-order. In between breakpoints, items will change their size or flow, but at the breakpoints, you’ll see a sudden change in configurations.

A responsive design can have multiple breakpoints, say for a small-screen phone, then a large-screen phone, then a tablet, then a laptop/desktop. Many teams try to decide on breakpoints using average screen sizes.

However, it’s better to look at what the content and navigation wants to be. By letting the content and navigation drive the breakpoints, teams find they can often get away with fewer screen configurations. For example, a high-resolution Retina iPad might easily share the same configuration as a well-constructed laptop display, while lower resolution tablets might just need a little adjustment to that same configuration.

The second core tactic is keeping page load times low. Too often, in the rush to responsive design, teams discover they’ve created CSS that slows down their pages across every type of device.

Smart placement of media queries and progressive enhancement can dramatically reduce the footprint of the CSS file on smaller, slower devices, which dramatically increases their usability. By learning to do this early in the move to responsive web design, teams won’t be in a position of having to make major overhauls (and the QA cost that comes with that) down the road when they discover how big their load times are.

The third core tactic is image size optimization. Right now, this is the hardest core tactic to get under control, because there are no solid best practices to follow. Retina and other high-resolution technologies create a problem for teams, because they need large images to look good, but those same images are slow to load on lower resolution screens.

There’s a ton of discussion in the standards community about how to deal with this issue. Unfortunately, none of that discussion helps a team know what they should do about it and the best practices seem to change almost weekly. Once things settle down, this should be easier to deal with.

What’s Getting Left Out?

Once a team moves beyond the core tactics, they find themselves dealing with the bigger implications that come from responsive web design. The first of those bigger implications has to do with figuring out how they get all that stuff they’ve accumulated in their desktop version to fit on the smaller screen.

Of course, it doesn’t take long at all to realize it won’t all fit. That’s when they realize they need a strategy for paring down.

Mobile First

A few years ago, Luke Wroblewski was seeing teams struggle with this. He began proposing an idea he called Mobile First. The idea behind Mobile First is that the team starts from scratch, asking the question, “What’s the minimum amount of content and navigation that we need to make our design useful? ” From this, they start to define the most minimal configuration, and work their way back to their maximum case.

The guiding principle of Mobile First is that it’s easier to add to a design than to take away. By starting 
with a minimum configuration, you can then add in more as you gain more space from larger screens 
and resolutions.

Luke suggests, however, that you add slowly and thoughtfully. It’s possible that there are things in your current design that don’t need to be in any responsive configuration, because they really aren’t useful 
to the user.

Research First

Does the team truly understand who their users are? Do they know what those users will need from their design? Whether a team chose the Mobile First route or is pairing down their existing design, they’ll struggle if they can’t answer these questions. They need to do their homework first.

The team can employ field research, analytics, and other study methods to understand which functions are important and which are nice-to-have. Using a well-understood set of scenarios can grease the skids for the discussions about what to cut and what to keep in.

Without that research and those scenarios, teams likely find themselves arguing with opinions and struggling with every design decision. Shortcutting user research is a near-term cost-cutting strategy that will cost the design team in the long run, once the opinion wars start.

Establishing a Process for Adapting Content

Chances are, all those words and images that are now living in the design will put up a fight when the team tries to fit them into a smaller configuration. While some teams might get away with condensing or pruning their content, most teams will find themselves with different content across different configurations.

Not entirely different content, mind you. Content that adapts to the right devices. For example, a headline that looks great on the laptop-resolution may not work at all on the a mobile-sized screen. As Karen McGrane likes to say, “Truncation is not a content strategy...”

An adaptive content strategy accompanies the responsive design strategy by modeling the various forms the site’s content will take across configurations. Once the strategy is thought through, the team can put together a supportive editorial process and content management tools. The alternative is to battle with the content as it tries to adapt to configurations it wasn’t designed for.

Shifting Information to Interaction

Having a lot of screen real estate gives the designer leeway, especially when it comes to flatting out the information displayed. It’s easy, for example, to put all the features of a multi-product comparison table, with all its glorious rows and columns, right there for all to see. On a small screen, at lower resolution, that table of useful data becomes exponentially unusable, with no amount of pinch-zoom action that can make sense of it.

Teams moving to responsive design need a strategy for creating interactions where information once laid flat. Using an interactive interface, users can directly manipulate filters to drill into the data they need.

Even site navigation, which may previously have been solved through mega-menus (or, at least, the team thought they’d solved it), now needs to be thoughtfully interactive. Smaller screens beg for data to be a starting point of interactions, with obvious touch actions for the most important functions and subtle gestures for shortcuts.

What to Do with that Image

Everything in the strategy comes together with images. A great responsive design strategy will know what to do with each image, while a poor one will force the team to deal with sub-optimal results and slow 
production times.

Take an online news article with supporting photos and diagrams. For each image, someone will need to decide what the right course of action. Do you scale the image down to the smaller resolutions? Do you crop the image? How about scaling and cropping? Do you put in a touch-to-zoom function? Or maybe you can leave the image out altogether, since it’s more of a nice-to-have than necessary for the story?

If you’re working on a news site, having a long-term strategy for dealing with images can help tremendously. This means knowing how to decide, for each image, which alternative you’ll use, and having an easy way for the editorial team to indicate the best outcome. Since most sites deal with images at some level, those teams will need to have a similar strategy in place.

Your Strategy Maps How You’ll Get There

It’s easy, when selling management on why responsive design is important, to not realize how far reaching its affects will be. Saying yes to responsive design will require changes to your editorial process, the ways you approach visual and interaction design, and how you think about your users and their goals. Being prepared with a solid strategy will make the transition to responsive easier and reduce the surprises along the way.

via UIE Brain Sparks http://www.uie.com/brainsparks/2013/11/27/uietips-devising-a-strategy-for-responsive-design-2/