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)
- When using google maps I found that the markers need to be customised and made bigger to handle the iphone4 retina display. Otherwise the physical click was appearing above the marker. Also when creating markers the iphone didn’t seem to like using sprite images
- Not all phones with Android 2.2 support flash due to the phones hardware capabilities. Here are the phones that do
- When testing in multiple devices use a URL shortening service like bit.ly, it saves a lot of typing
More to come as I work them out…