CSS3 Pushing the Limits

Chapter 12

Going Responsive with CSS3 Media Queries

The last decade has seen an astonishing advancement in the area of handheld devices, both in terms of technology and popularity. Ten years ago, the only thing I used my mobile phone for was to make the odd call and to try and beat my top score on Snake. Now I have what is effectively a minicomputer in my pocket, complete with camera, countless apps, and most importantly, easy access to the Internet.

The rapid nature of this progression left developers and their tools a few steps behind, because suddenly everyone owned a smartphone and was using it to browse the web. This was not supposed to happen; everything on the web was designed to be viewed on a large, desktop monitor or perhaps a laptop, but certainly not something that can fit in the palm of your hand! Subsequently, billions of smartphone users were trying to navigate websites that had been optimized for desktops on a tiny device, forcing them to zoom, pan, and swipe their way around these fixed-width designs, resulting in an exhausting and unbearably frustrating user experience.

As a result, designers needed a solution for optimizing their websites for smaller screens. When the concept of responsive web design (RWD) was introduced, it seemed to tick all the boxes. New features in CSS3, such as the additional range of media queries, play a fundamental role in the RWD process. Looking further ahead, the new layout mechanisms proposed in CSS3 are geared toward this responsive ...