Mobile website development tips

I have been developing a few mobile sites recently and want to document the things I have found out along the way.

  • Keep it relative – Use percentages for horizontal widths and em’s for vertical padding and margins. I have found this to be the most consistent way of getting results without pixels.
  • Let it breath – I like to keep a gap at the sides of my sites to help them breath, to achieve this I create content thats 96% width and give it 2% left margin. This way if there are any rounding bugs (which there often are with percentage based layouts) the not defining of the right margin give you some room to breath.
  • For spacing items out e.g. navigation or form input boxes, Use padding top and padding bottom as line-height dosen’t render in Opera mini
  • If you compress your CSS with google closure be aware that it dosent like media queries that define a specific the media type. You need to leave out the media type which makes it default to all. So use @media (max-device-width:320px), instead of @media screen and (max-decice-width:320px)

More to come as I work them out…

This entry was posted on