Chapter 15. Responsive Web Design

Web designers have always had to contend with designing for various screen sizes—from 760-pixel-wide laptops to gargantuan widescreen displays. However, the rise of smartphones and tablets has now made it even more imperative to design for a wide range of screen widths and heights. Some companies go so far as to create separate, mobile-only websites (see the top images in Figure 15-1). However, unless you have the time, money, and technical expertise to develop two sites and program your web server to provide the proper site to the proper device, a mobile-only website is probably out of reach.

Fortunately, there’s another, simpler approach that lets you build a single site that adapts to different device widths (see bottom images in Figure 15-1). Called responsive web design, this technique uses several different tricks to make a page change its layout based on the width of the browser screen. On a smartphone, for example, you can lay out a page in a single, easy-to-read column to fit the narrow width of the screen (bottom-left image), while maintaining a multicolumn layout on wider monitors (bottom-right image).

Responsive Web Design Basics

It’s very hard to read a four-column web page on a phone whose screen is just 320 pixels wide. It’s just as difficult to read a single column of text that’s spread across the 2560 pixels of a large desktop monitor. Responsive web design, a term coined by web design pioneer Ethan Marcotte, is an attempt to solve ...

Get CSS: The Missing Manual, 4th Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.