CSS3 Media Queries: From Widescreen to Mobile
It's been just recently that I've jumped on the bandwagon with the use of CSS3 media queries when designing for the web, but I can tell already it’s a powerful tool for optimizing website content to fit a wide variety of screen sizes/resolutions out there these days. Think about all the technology we have available and what various formats we can view online content. Mobile phones, iPads and other tablets, traditional desktop computers, laptops, video game consoles, TVs and refrigerators (yeah, they’re out there). Each one of these devices has different screen resolutions and aspect ratios. But before I go too much further, let's figure out exactly what a media query is.
According to W3C, "A media query consists of a media type and zero or more expressions that check for the conditions of particular media features... By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself." Translated into simple terms, media queries check to see what size screen (or media type) a person is using and then optimizes the design/layout of the site to display the content ...all without changing the information of the website itself.
One CSS File
One of the greatest points I’ve found for using CSS3 media queries is that all your styles can be stored in a single CSS file. From wide screen monitors to mobile phones, you control what each of these visitors are seeing...all from one file. Changes and updates become much quicker and the management of CSS files becomes simpler. For your site visitor it means a single file to download which could result in less waiting on their part.
Customize Graphics, Layout and Presentation for All Screen Sizes
With the use of media queries you're in control of what shows on which screen sizes, how big the graphics are and where they’re placed. Graphics and images that would normally display on the widescreen design can easily be changed to simple and effective buttons on a mobile device or hidden all together, allowing more important information to rise to the top. I’ve found that the majority of my designs are becoming less about absolute widths and more about percentage based layouts. This allows the design to become much more fluid and adaptive rather than stiff and rigid.
Widescreen and Mobile Are the New Standard
1280x800 Is the New 1024x768
Looking over some site stats recently for 360Wichita.com, I noticed an uprising trend among website visitors. The majority of visitors are at a 1280x800 resolution or higher. This means that wide screen monitors are the norm and those old, gigantic CRT computer monitors with tiny screens are becoming nothing more than inconvenient paperweights. Another notable screen size that is making its way up the rankings, in contrast, is 320x480 (#5 on the stats list), a popular screen size for touch-screen mobile phones.
Simply a Better User Experience
Regardless of how a visitor reaches your website, they are there for one reason: to find content as quickly as possible with the least amount of work involved. That may mean less scrolling, less clicking, less reading or simply less waiting (or all the above). With the various devices and screen resolutions out there today, CSS3 media queries gives designers and developers a quick and organized way to make changes to layout, graphics and overall website presentation based on screen sizes/resolutions while the keeping content front and center.
The use of CSS3 media queries allows for changes in layout and design to accommodate the widescreen visitors, mobile visitors and everyone in between. It means adapting your site design to your visitor rather than forcing your visitor to adapt to your site’s design.