Mobile HTML5

Chapter 11. CSS Features in Responsive Web Design

Your content should be designed to work on any device because it will be viewed on every device, everywhere. The website we’re building today with the goal of displaying it on a desktop, smartphone, and tablet may be viewed on a 52-inch TV screen or 3 × 5-inch GPS LCD screen. By starting with a flexible foundation, your site should be able to grow or shrink gracefully no matter the hardware that loads it.

For your website to adapt to any screen size, you want to make it as flexible as possible. Using percents and rems, instead of pixels for widths and font size, will bring you 90% of the way there. Add in some media queries, and you’re 95% of the way there.

There are several CSS features, other than media queries and other CSS3 features we’ve covered so far, that are helpful in developing responsive websites and will bring you up to the 99% mark. Why 99% and not 100%? There is always more you can do to make a site more responsive, more accessible, prettier, faster, etc., but at some point, you have to say “this is good enough” or “this book is way too long.”

Media Queries, Breakpoints, and Fluid Layouts

I mentioned this before, but it bears repeating: don’t create layouts for specific phone sizes. Rather, slowly expand (or shrink) your site in a browser. When the layout starts looking less than optimal, that is where you should alter your design for the next set of devices. You may need eight layouts for tiny, xx-small, small, medium, ...