Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I'm doing this.
CSS3 Media Queries can be used in conjunction with CSS 2.1 Media Types to target mobile users with a set device size or screen dimension. Using these queries, you can provide optimised CSS style sheets that are tailored to a particular size of device.
Browser support
While the media queries part of the CSS3 specification has not yet been fully implemented in most web browsers, certain parts of it are pretty well adopted in todays mobile browsers. In fact, there is reasonable support for CSS3 Media Queries on Opera Mobile, Opera 5 Mini and Apple's iPhone to name a few. There also appears to be varying levels of support on other Webkit–based mobile browsers, including Android and the Palm Pre.
Designing for the small screen
While this website is a fairly simple design layout–wise, it makes a nice example of just how easy it is to create a mobile optimised view in just a few declarations using the power of CSS3 Media Queries. On smaller screens I find that single column layouts work best, so depending on the structure of your website you will need to realign your layout to suit how you see best. Here we are targeting users with a maximum device width of 480px (I am using this as a general rule since it is the maximum width for the iPhone).
/* mobile optimisation */
@media screen and (max-device-width: 480px) {
}Notice how we are using the media type screen and not handheld. This is because mobile browsers such as those mentioned earlier regard themselves as having 'desktop class' browsing, ignoring the handheld CSS media type used by older devices.
/* mobile optimisation */
@media screen and (max-device-width: 480px) {
nav ul, header, form, article, aside, footer small, footer address { width: 90%; }
article p, article blockquote { text-align: justify; }
article>img { max-width: 100%; height: auto !important; }
-webkit-text-size-adjust: none;
}Next, we can provide a set of regular CSS rules that will be applied only to those devices that satisfy both the media type and the media query. Here I am simply increasing the width of my container items to fit 90% of the mobile screen (as opposed to 50% on the desktop). I have chosen to justify paragraphs and block–quotes to make them fit the small screen nicely and prevent any ragged edges on my typography. Images can also be prevented from rendering wider than the article width by declaring a maximum width of 100%. Finally, since we are creating a strict mobile view here and not a full–size web page, I have included a proprietary Webkit declaration (-webkit-text-size-adjust: none;) to prevent the iPhone from automatically resizing any text.
Disable user scaling
Since our view is now nicely optimised for the small screen, there is no longer any real need for the user to pinch, scale or zoom. I have disabled user scaling using the following meta information inserted into the <head> of each HTML page. This also helps improve usability as this rule makes for smooth, vertical scrolling only — a lot like a web application.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />Testing your mobile site
While you are likely not to have numerous different handsets to test your site on, there are fortunately a number of tools to help with mobile website testing. You can download the iPhone SDK, which includes an on–screen iPhone emulator. Opera also offer an online emulator for Opera Mini. There is an Android Emulator and Palm Pre SDK too (although I have not yet downloaded or tested either).
