14 Designing Responsive Web Pages
This chapter covers
- Creating page layouts that are liquid and flexible
- Making adaptive layouts via media queries
- Creating mobile-first layouts
- Making fluid images respond to screen size
- Specifying responsive font sizes and responsive measurements
I’ll begin by defining what makes a web page 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.
“ The most important thing about responsive design is flexibility. Everything must be flexible: layouts, image sizes, text blocks—absolutely everything. Flexibility gives your site the fluidity it needs to fit inside any container. —Nick Babich
There are many reasons why it's good practice to make all your pages responsive, and you'll learn about many of them as you progress through this chapter. But arguably the most important reason is also the most basic: when reading a web page, nobody should have to scroll horizontally.