ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

Responsive design for dummies

Responsive design for dummies Evan Gerber

If you work in the mobile space, it's pretty likely that you've heard the term "responsive design" thrown around quite a bit lately. By building interfaces that adapt content to the form factor, a business creates a framework to support multiple devices and makes big steps toward future-proofing its web presence. On the other hand, teams that decide to ignore the implications of this fundamental change to how websites are built will certainly find themselves lagging behind competitors and losing users on smaller screens as the mobile space continues to evolve.

Responsive design for dummies

The concept, in a nutshell, is that websites can be written to adapt to multiple screen sizes. Instead of writing different presentation layers to suit a desktop browser or a tablet or a smartphone, presentations can be created to respond to the screen they are presented on.

This notion seems pretty straightforward, and in some ways content has been adapting to platforms for a few years. But this approach is revolutionary in how it abstracts form from function and the flexibility it provides designers as well as business owners.

Here are the basics that marketers need to know about responsive design, along with the pros and cons of facets of the concept.

What is responsive design?

We are designers for things we can't predict. It seems like every month there is a new device -- with a new screen size -- coming to market, and users want to consume their content on it. One way to address this approach is writing code that adapts content to the page that it's on.

This approach, called "responsive design," was coined by Ethan Marcotte to describe code that uses fluid design grids and lays pages out depending on the media, or device type, requesting the information. By using a combination of HTML, CSS, and JavaScript, the system can adapt the look and feel of its content to work in a number of different places. For example, open up Sony.com. Resize the browser window, and see how (and whether) the screen redraws itself. There are three breakpoints in the design where the browsers redraws the content to fit into different screen resolutions. 

Elegant, but with challenges

The mechanism of responsive design is very elegant and pretty simple; the HTML does not change, but the CSS and JavaScript adapt how it lays out. To boil it down almost to oversimplification, the HTML is the code that tells the browser what the content is, the CSS dictates where on the page it goes, and the JavaScript controls how content is animated.

By writing standards-compliant code and applying consistent treatments across a site, a responsive build can be much less expensive to maintain over time. Like any browser-based experience, a responsive build will face a few inherent challenges that can add cost and complexity to the process. Fortunately, with the correct approach and tools, the risk is minimal and the progress is significant.

Think across form factors

It used to be that teams only had to consider a few screen sizes and browsers. That's not the case anymore, given the significant number of different screen sizes and resolutions currently on the market. Anyone who is only used to desktops and an unfragmented browser and operating system landscape will have to recalibrate his or her thought process. Teams now have to design for multiple form factors, screen sizes, and resolutions. For example, a user on an iPad mini might have trouble tapping a link that is easy for an iPad user to see. Or more importantly, text might render very small on the iPad mini and make it hard for older or vision-impaired users to read.

This challenge extends to input metaphors as well. Although the tablet and desktop are close enough that they can be treated as one look, this can limit the ability to take advantage of touch interfaces. If a business opts for this approach, designers should make sure that they are creating interfaces that can work for both mice and fingers by doing things such as using big targets for tapping or clicking. The Next Web does a great job with this by providing ample room for fingers as well as mice.

Work collaboratively

Many business owners and designers assume that responsive design means significantly more documentation than a traditional build. This is not the case if the team is willing to adapt its approach. A more collaborative process works wonders, both for product quality as well as time to market. By sitting developers, designers, QA, and business strategists down together in front of a whiteboard or with a paper and pen, teams can sketch out well-thought-out, easy-to-build designs without a lot of back and forth. A few sketches are worth a thousand words when sharing concepts.

Watch out for fragmentation

Another challenge to responsive design is fragmentation. For a little while, we were blessed with a few key platforms and browsers, but the landscape is devolving into a tangle of software and hardware. Not only are there different versions of Android, for example, but the different carriers regularly make changes to their builds. The below pie chart represents the breakdown of Android devices, by platform version, that accessed Google Play within a 14-day period.

Source; data gathered over a two week period ending on Dec. 2, 2012

This splinternet can lead to lots of headaches during development and QA. The best bet is to design simple interfaces that don't put too much motion or interactivity in any one place. This key step ensures that coders don't have to put in a million hacks to make things work smoothly. An ancillary benefit is that these designs are generally easier for end users to learn, which has a very positive effect on adoption.

Consider bandwidth differences

Finally, the each device will have wildly different connection speeds to the internet. A user plugged in at home has ample bandwidth and can browse faster or perform more complicated interactions than someone relying on a wireless carrier's network. Experiences have to be designed to be simple and straightforward, requiring as little code as possible to ensure a smooth experience on multiple networks.

Consider a mix of responsive and selective

There is no question that any brand serious about its presence on the mobile web must employ a responsive strategy. But like all other options when building digital content, there are different options and shades of grey. If there are pages that generate enough traffic or profit, consider building platform-specific versions for them. Google News and Google Weather have built out a tablet-specific HTML pages that make the most of touch.

Google News on keyboard and mouse

Google News on iPad

By studying which devices and operating systems are responsible for the majority of traffic, brands can then design, build, and test releases specific to each one. This approach, sometimes called "selective design," has some pros, such as pixel-level control over key factors, but it is haunted by a few key limitations. First, this approach gets expensive, especially when a site has a lot of pages or content types that don't generate a lot of revenue. Second, over time, it requires a lot more resources to maintain and update.

If a site is going to be around for any significant period of time, the less code to manage, the better.  With that said, for key pages, many major brands will create a device-specific page, especially for tablets. Amazon is a great example of this; it has built out a touch version optimized for the tablet, but it sends desktop users on similar screen resolutions to a keyboard and mouse optimized experience.

Kindle store on keyboard

Kindle store on iPad


The term "responsive design" is oft referenced, but frequently misunderstood, both in terms of how it works, as well as the huge implications it has for organizations adapting to an increasingly fragmented digital landscape. It is an abstract and evolving approach to envisioning, designing, and building scalable layouts that work across multiple form factors and screen sizes.

Designers, developers, and business strategists must understand not only what responsive design is, but also how to adapt existing content and functionality to it. Otherwise, they will quickly find themselves overwhelmed with managing multiple experiences across myriad devices. While not risk free, this approach to content presentation and development ensures flexibility and scalability over time. By carefully planning, yet quickly designing and executing across multiple form factors, organizations can move to market with experiences that are maintainable and relevant across multiple devices and contexts.

Evan Gerber is VP of mobile user experience at Fidelity Investments.

On Twitter? Follow iMedia Connection at @iMediaTweet.

"Responsive web design" image via Shutterstock.

Since the late ‘90s, Evan Gerber has created innovated technology solutions for unique business problems. Evan is the Vice President of Mobile Design and Emerging Interactions at Fidelity Investments.  An avid technophile and self...

View full biography


to leave comments.