Responsive Web Design: What Is It, When To Use It

Responsive web design (RWD) is a layout and styling technique that optimizes the layout and viewing experience across devices, from mobile phones to large desktop monitors.

responsive web design illustration
Illustration courtesy Muhammad Rafizeldi

Here’s an easy way to tell if a site is “responsive.” Viewing on a laptop or desktop, squeeze the width of the browser window substantially. If the layout changes – “responds” to the new width by re-jiggering and stacking elements on top of one another in a fluid manner, or changing from a wide bank of global navigation buttons to a little mobile-style menu that you have to pull down to see, you’re looking at a responsive site.

For example, a responsive website might show a mobile-style top menu with a single column layout when viewed with a smart phone, but tabs or global navigation buttons and a 2-column layout when viewed with a tablet, and a 3-column layout when viewed on a laptop or desktop monitor. All three devices can see the same content; the server “responds” to the device with a layout optimized for viewing on that device.

Why Use Responsive Web Design? Pros and Cons

Responsive layouts are increasingly popular due to the significant trends toward increased use of tablets and mobile phones to view websites. Using a content management system (CMS) with responsive templates, you can have one version of the content to maintain, while offering a quality mobile experience to users.

Responsive layouts take some getting used to for designers and developers. It’s significantly more work to code and test responsive layouts. Best practice is to always view new pages or significant updates in all three types of devices: desktop/laptop, tablet (landscape and portrait) and phone (again, landscape and portrait). The same learning curve designers and web authors experienced when moving from print, with its predictable, static layouts and high degree of control, applies here: in order to do responsive design well, the designer must cede control over how the content is displayed OR spend a lot more time planning and testing the various layouts.

Alternatives to Responsive Web Design

Simply ignoring the fact that users are connecting with your site more and more with tablets and phones isn’t a good option.

Pinch and zoom. It has been common practice for some years to design websites to a 900-960 pixel width that looks decent on an iPad and is functional on iPhone. This can be an acceptable experience on most smart phones, though it typically requires quite a bit of “pinch and zoom” manipulation with fingers. Keeping font sizes and generous interline spacing helps, especially in lists of links. iPhones, Android phones and Blackberries all function pretty decently at 900 pixels, and smart phone users are typically used to coping.

Mobile-first design. Instead of designing a full-screen experience and then trying to shoehorn it into a mobile screen, with this minimalist practice, you focus on the content, in bare-bones, structured HTML, that displays well on any device (including assistive devices for people with vision or hearing impairments), and then work to enhance the experience on the various devices as needed. With mobile trends showing that more than 50% of visitors will see most websites on a tablet or smart phone as early as this year (2014) – this is an increasingly attractive approach.

Mobile-alternative websites use the media query function of browsers to detect incoming mobile devices and divert them to a separate, typically more limited, mobile alternative website. Good examples include a restaurant website offering a quick view of the menu and a big locator map, maybe a Yelp link. Nice to do: Place a “See full website” link or button on every page.

Mobile apps. People tend to confuse mobile websites with mobile apps. Apps require users to download from Apple’s App store or Google Play, install the apps, and update when necessary. As an app provider, you must must go through Apple or Google to get your app approved and placed, both initially and anytime you have an update – so maintenance is complicated and expensive. You’ll have to decide which vendors and versions of phones to support. Mobile apps are the way to go when you need to leverage the built-in functions of the phone, such as dialing, geolocation calendar integration, photos, and so forth.