Some tips for building mobile optimised web pages
I am currently building a mobile optimised (optimized if you are from the US…) site and thought I would share a few tips and tricks I have learnt along the way. There are not a great deal of sites that deal with mobile optimised page building, so here are my tips:
- Never use tables for layouts!
- Try and keep you coding as simple as possible, avoid inline style, JavaScript and server side scripting where possible.
- Don’t use background images - nearly all mobile browsers will not display them.
- If you want to use rounded corners for boxes then I would strongly advise using Alessandro Fulciniti’s Nifty Corners technique (which is brilliant) - this is supported on the vast majority of mobile browsers I have tested.
- Don’t set a width on your page elements - especially the page wrapper. If you do then the mobile browsers make a real hash of the content. If your pages appear too wide in the browser (this often happens on the Blackberry browser) add the following meta data to the <head> tag:
<meta name=“viewport” content=“width=320″ /> <meta name=“viewport” content=“initial-scale=1.0″ /> <meta name=“viewport” content=“user-scalable=false” />
- For some reason mobile browsers really don’t like divs that are floated left, try and avoid this if you can, however floating lists seems to work
- Try and wrap text around images, mobile browsers tend to interpret this quite well
- Bulleted lists often get the style stripped out, so if you use list-style-image to set your bullet image don’t be surprised if it does not work. One solution for this is to set the list style to none and insert the image before the text. This way even if the bulleted list is displayed (which on quite a few browsers it will be) at least the image is displayed as well
- Make sure you test your pages on various devices, browser combinations, not just on an iPhone!
Clive said
am April 17 2009 @ 3:37 pm
Thanks. Great stuff. I found this blog via the first page of Google - great work.