Up to this point, we've built almost everything with a fixed size. Our layout had a fixed width, our images had fixed widths, and our menu had a fixed width as well. But this is not going to deliver a favorable experience when using phones, tablets, and a multitude of other device sizes that are out there. Luckily, responsive web design is here to transform our static website into a fluid, device-friendly website.
The book that started it all - Responsive Web Design, by Ethan Marcotte, 2011. He outlined three main technical pillars of responsive web design:
- Fluid grids,
- Flexible images, and
- Media queries.
We'll discuss these three fundamental CSS foundations of responsive web design, followed by how to build accommodations for primary navigation at smaller screen sizes, and finally, the viewport meta tag.
