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 ...