CSS3: Using media queries to improve the website experience

It’s no longer practical or even possible to build different sites for all of the different devices that your users may be visiting your sites with. From widescreen TVs to mobile phones, desktop computers to tablets, the number of ways that people view web pages is more diverse than ever before.

How can you create a site that looks good in all these different environments—and keep your sanity? A new feature of CSS3 called media queries allows you to easily make a single site that automatically adapts its design to the users’ settings so that it looks good and works well in whatever screen space is available.

Using practical but progressive examples, Zoe will show you how to use media queries combined with liquid/fluid layout techniques to make your web pages more dynamic, responsive, and usable. You’ll learn how to use media queries to tailor your sites to mobile devices like iPhone, Android, and iPad, as well as the various screen sizes of desktop computers, while still attending to outdated browsers like IE 6, 7, and 8.