Slightly ajar

When designing for mobile, one has a few options. These include doing nothing and relying on how the mobile browser reformats the page (using either small screen rendering, desktop view or both depending on the browser), creating a new mobile friendly site, or restyling the page using handheld stylesheets or Media Queries. I'll look at the latter two here.

As part of the preparations for the Opera Mini 4 launch this Tuesday, I've been developing our developer documentation. This includes examples of using both handheld stylesheets and CSS3 Media Queries. The first example uses Media Queries to reformat the page when the screen is 480px wide or smaller. The code could be optimised more, and the design is simple so small screen rendering on its own would probably do a good job, but it is an example of what can be done. On a more complex page with images the results would be more worthwhile. Both screen and handheld were specified as the S60 browser from Nokia and the Safari iPhone browsers both ignore handheld stylesheets, so the screen media type had to be specified for those browsers. I choose 480px for the width as that is the resolution of the iPhone when in landscape mode, but any width could have been chosen. max-device-width doesn't have to be used, I could have chosen max-width, or any other number of options. I don't have a S60 or iPhone browser to test, but I suspect they will both render similarly to Safari 3, minus the font differences. Opera Kestrel and above have improved Media Query support so that the changes kick in without refreshing the page. This means in the previous example it will apply the Media Query content as soon as the browser view port is 320 pixels wide. As you could imagine, once more browsers support this, it would be very useful for elastic layouts to stop content overlapping when the browser window gets too small. The contents could be set to clear instead for example.

The second example is based on the first and and uses handheld stylesheets. It sets the stylesheet in the above example to only apply to the screen media type and creates a new stylesheet with the handheld media type. This means that browsers that support handheld correctly will only apply the second stylesheet. This stylesheet then includes all the styles needed to create the design.

As can be seen in these two fairly simple examples, it is possible to optimise for mobile without too much difficulty, or learning many new techniques, as long as your mark-up is clean and without presentational aspects, such as tables for layout. Unfortunately, handheld support is not where it could be, but Media Queries are well supported in modern full HTML mobile browsers. If your web sites page will benefit from it, I'd recommend you give Media Queries a try. I'd recommend specifying in the stylesheet that images and any content have a max-width of under 100% so that horizontal scrolling is not needed.