11 Mobile web gotchas

Another list I had lying around which better serves the world by being somewhere viewable.

In no particular order:
1. URL lengths
Keep em short:
- because people may have to type them in
- because some devices/browser have issues with long ones (256 char limit in some cases)
2. Image sizes
Should be appropriate to the size of the screen on the device. - Don't include something which won't fit on the screen.
Keep the file sizes small too.

3. Javascript
There are varying levels of support with mobile browsers and some interactions won't work (e.g. there's no mouseOver - as there's no mouse.)
4. Select don't type input
Entering text on a mobile can be difficult. Don't make users have to enter anything they really don't have to. That means (as a general rule) select (from a list, or radio button, or ...), don't type whenever possible.

5. Not all devices support all image formats
You're pretty much safe with PNGs except on older devices.  Be aware if you want to use something else else, e.g. JPGs.

6. Header rewriting
Beware of trying to display a page's content based on headers whihc may have been changed by some proxies or operators.

7. Scroll vertically, not horizontally
It's easy to get lost on a page when you scroll in both directions.  Use vertical scrolling only as no one

8. Varying CSS support
Beware anything other than basic styles on older devices.
Be aware of massive variations in levels of support across older devices.

9. Can't get identical output on ALL devices
You may spend a fortune trying.  Aim for a consistent look and feel instead.
10. Keep page sizes small
General rule: Total page sizes should be < 20KB
Keep all asset (images, CSS, JS file) sizes as small as possible too.

11. Validation is important!
Really helps with trying to ensure cross device support
- http://ready.mobi/launch.jsp?locale=en_EN
- http://validator.w3.org/mobile/