14 Designing Responsive Web Pages
This chapter covers
- 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
- Making fluid images that respond to screen size
- Making text adapt to the screen size by specifying responsive font sizes
- Making other page elements adapt to the screen size by specifying responsive measurements
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.
QUOTe
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