Responsive design

Citation metadata

Author: Jeff Wisniewski
Date: January-February 2013
From: Online Searcher(Vol. 37, Issue 1)
Publisher: Information Today, Inc.
Document Type: Article
Length: 1,907 words
Lexile Measure: 1270L

Document controls

Main content

Full Text: 

Redesigning your website? Building a mobile site? Thinking of doing either? Stop, breathe deeply, and read this first. You need to know about responsive design before you get too deeply involved. Responsive design is a set of tools, most of which you're probably already familiar with, and techniques, many of which you're probably not, that allow web designers to create a single website that responds to context. A site, when viewed on a desktop computer, will look and behave differently than that same site when viewed on a smartphone, which in turn will look and behave differently when viewed on a tablet.

It goes beyond merely resizing content for various screen sizes. It can also dynamically turn a top navigation bar into a drop-down menu on a smartphone to better use real estate; it can display or not display certain content depending on the type of device being used; and it does all of this using (mostly) CSS, HTML, and JavaScript. Thus, while it uses some techniques that may already be familiar to you, such as fluid grids using percentages instead of fixed width, it goes beyond form to include function as well.

What problem does responsive design solve? A big one--our inability to predict the future with any accuracy whatsoever. A few years ago we had the desktop, the iPad, and the smartphone. Today we have the desktop in multitudes of sizes, the iPad, the iPad with retina display, the iPad Mini, the Kindle Fire, the Kindle Fire HD, smartphones with 4" screens such as the iPhone 5, smartphones with 5" screens such as the Samsung Galaxy Note, and many more I haven't listed. What will tomorrow bring? I'm not sure, but I do know that creating separate interfaces across this ever-expanding universe of devices and contexts is untenable.

Web standards guru Jeffrey Zeldman identifies the problem as being a "standards nightmare" when it comes to hardware. "There's a plethora of devices out there with widely differing abilities--it's never been more confusing or challenging to create brilliant interfaces that work across them all" (www.netmagazine .com/features/15-top-web-design-and-development-trends-2012).

The benefit to you, dear webmaster, should be obvious: one site across various platforms that optimizes itself for that platform. Another benefit is that, by redesigning responsively, you're future proofing your site. Not eternity proofing, but the next few cycles proofing. The benefit for end users is that they get a good experience regardless the device or devices from which they're accessing your site.

Conceptually, responsive design usually takes a mobile-first, progressive enhancement approach. In plain English, that means the content prioritization and performance optimization necessary to create a solid mobile experience are important exercises that create the foundation for a good experience across other device types.

Aaron Gustafson, writing in his Easy Designs blog, clarifies the relationships among responsive design, mobile, and progressive enhancement. To him, responsive web design means "fluid grids, fluid images/media &media queries." Adaptive web design "is about creating interfaces that adapt to the user's capabilities (in terms of both form and function)." Gustafson continues, "'adaptive web design' is just another term for 'progressive enhancement' of which responsive web design can (an[d] often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support" (http://blog.easy-designs.net/archives/ 2011/11/16/on-adaptive-vs-responsive-web-design).

The web has taken notice, with some big players such as Microsoft and The Boston Globe launching responsive websites. Libraries are also paying attention. Take a look at West Virginia University's website as viewed on a desktop versus how it looks on a mobile device.

In this column, I will highlight some of the main features of responsive design, the primary techniques that make it possible, and some tools and toolkits to help you down to path to responsive nirvana. For more information, you'll probably want to consult one of the many books on the topic, some of which you may already have in your library's collection.

USING RESPONSIVE DESIGN

Because one of the primary concepts behind responsive design is a site's ability to resize dynamically based on the device being used, fixed-width anything is generally not recommended. Your grid needs to be expressed in percentages, not pixels. Text size should be expressed in relative, not absolute terms--out go points and in come ems. Ems are a way to express font sizes relative to a system's base font size. For example, in your CSS, when you set your <H1> heading tags to be 2em, you tell it to make H1 headings twice as big as the base font size.

In addition to using flexible typography and flexible grids, responsive web design uses CSS media queries to determine a device's size and capabilities. Media queries are simply conditional statements. A basic media query asks the question, "If the device that's visiting my site has a screen width equal to or less than 480px, then use such and such style sheet. If it's wider than 480px use this different style sheet." A simple media query looks like this:



   <link rel="stylesheet" type="text/css"
   media="screen and (max-device-width: 480px)"
   href="smallscreen.css"/>

These statements can also be used in relation to device orientation (portrait versus landscape), to specify minimum width and maximum width requirements and to determine the device's screen resolution.

So far, we have layouts that are flexible thanks to defining them using percentages, typography that will scale up or down as needed thanks to expressing it using ems instead of pixels, and media queries that ask questions about a device's size, among other things, and serve up a particular style sheet based on the response. Done? Not quite. Let's talk images.

The dream is to be able to serve up higher or lower resolution versions of images based on things such as a screen's size, resolution, the available bandwidth, and the like. In talking about images in the context of responsive design, there are three considerations. First is the issue of dealing with changes in the amount of real estate available on one screen versus another. Secondly, there's bandwidth. Ideally, for the sake of conserving bandwidth, you'd want to send an iPhone user a separate, smaller version of an image that's served to a desktop user.

Finally, consider resolution. Depending on the situation, you might want to send very high-resolution screens--an example is the iPad 3 with Retina display--a higher resolution version of an image. Unfortunately, there's no elegant standards-compliant way to do this at the moment, but many smart people are trying to figure out a way to make this happen that's scalable, flexible, and standards-compliant. Right now, the solution with the most traction is one from an organization called filamentgroup that primarily uses JavaScript to figure out which version of an image to send to a particular device (https://github.com/filament group/Responsive-Images).

PERFORMANCE

This all sounds great, but an important consideration to keep in mind is speed. Because a responsively designed site is the same site on desktop and mobile, it's possible for site load times over a slower connection to suffer. Guy Podjarny from Akamai Technologies recently blogged about the results of a performance test he conducted by loading several hundred responsive sites first at desktop size and then resized to put them into mobile mode. Despite delivering the mobile version of the site, close to 90% of the websites "weighed" roughly the same when loaded in the smallest window, compared to the largest one (www.guypo.com/mobile/ performance-implications-of-responsive-design-bookcontribution).

These results are not surprising given how responsive sites are built, but they serve as a good reminder to keep performance in mind as you design and deploy, and to keep your site as lightweight as is possible to ensure a good experience. His advice (which I think is sound): Use responsive images, start with mobile, and measure performance at every step along the way. A good tool for this is the WebPagetest site (www.webpagetest.org).

One final consideration: Since responsive design is a different animal than we're used to, it requires a change in the processes used to design and build. Stephen Hay, a contributor to Smashing Book #3: Redesign the Web (www.smashing magazine.com/2012/05/08/the-smashing-book-3-redesignthe-web-is-out), suggests a process that contains these steps:

1. Content inventory

2. Content reference wireframes

3. Design in text, structure your content

4. Linear design

5. Breakpoint graph

6. Design for the various breakpoints

7. HTML design prototype

The one new concept introduced here is the idea of breakpoints. The conventional method of determining breakpoints is to base them on device size, so, e.g., at 320px, at 600px. Since this is not fluid, it's a no-go for responsive design. In the responsive method, you'd take your prioritized content, put it in an HTML file, view it in a browser, play around with the width, and see where it feels most natural to have the content break. Notably, then, the design process for responsive should start with your content (which you've prioritized) and work out from there, rather than the other way around.

GETTING STARTED

If I've convinced you to try responsive design, you'll be anxious to get started. If you're using a content management system, you can start there. Both Drupal and WordPress, for example, have numerous responsive themes that can be added to your basic framework. If you're not working within a CMS, you can either start with one of the many responsive frameworks available or start from scratch.

What's a responsive framework? It's a downloadable combination of CSS, HTML, and perhaps some JavaScript that gives you a basic responsive template that you can then customize to your heart's content. A great place to start exploring what's available is Speckyboy Design Magazine's "15 Responsive CSS Frameworks Worth Considering" (http:// speckyboy.com/2011/11/17/15-responsive-css-frameworksworth-considering).

There are some great resources out there to help you learn more about responsive, and there are great tools to help you design, test, and build a responsive site. You should, however, begin at the beginning, with the article that started it all, Ethan Marcotte's 2010 article at A List Apart titled "Responsive Web Design" (www.alistapart.com/ articles/responsive-web-design). In my opinion, the best responsive resources site is Brad Frost's This Is Responsive (http://bradfrost.github.com/this-is-responsive). It contains responsive patterns, resources, and news--if it's responsive and it's good, it's linked from this site.

If you're looking for inspiration, Media Queries (http://mediaqueri.es) links to hundreds of responsively designed websites. You can also follow responsive web design (RWD) on Twitter @RWD.

If you are, or once you get, further along with responsive and want to test your pages to see if they're responding as you'd hoped they would, try the Responsive Web Design Testing Tool (http://mattkersley.com/respon sive). The web version can only test page by page and doesn't let you navigate through your site. However, the site's author makes the code available on GitHub so that you can install on your own web server and test and navigate through your site (https://github.com/mattkersley/ Responsive-Design-Testing).

Responsive design has gained great momentum over the last year or so, and the trend shows no signs of abating. That's because, while not perfect, it pays great dividends for both webmasters and end users. Using responsive design, webmasters can create a single site that delivers a solid experience for end users. Plus, it's future proofed, to the extent that anything in the rapidly changing world of technology can be. Design responsively, and when Apple releases the iPad Mega or the iPad Micro, relax--you're covered.

Jeff Wisniewski

University of Pittsburgh

JeffWisniewski (jeffw@pitt.edu) is web services librarian, University Library System, University of Pittsburgh.

Comments? Email the editor-in-chief (marydee@xmission.com).

Source Citation

Source Citation   

Gale Document Number: GALE|A320732767