13 Designing Responsive Web Pages
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. —Ethan Marcotte
This chapter covers
- Learning why you should avoid fixed-width layouts
- Creating page layouts that are liquid and flexible
- Using media queries to build pages that adapt to changing screen sizes
- Creating layouts designed first for mobile screens
I’ll begin by defining what I mean when I describe a web page as responsive: A responsive page is one that automatically adapts its layout, typography, images, and other content to fit whatever size screen a site visitor is using to access the page. In other words, the page content should be usable, readable, and navigable regardless of the dimensions of the screen it's being displayed on.
Responsive web design—or RWD, as it's colloquially known in the web-design community—wouldn't be a big deal if only the occasional site user were surfing with a smartphone or tablet. However, sometime back in 2014 the worldwide percentage of web users on mobile devices surpassed that of users with desktop browsers.
Web design is responsive design. Responsive web design is web design, done right. —Andy Clarke