25 Important Things for Designing Mobile Web

1. Avoid horizontal scrolling.
2. Maintain visual consistency with your desktop site, if you have one.
3. Reduce the amount of text.
4. Use legible fonts on every screen; don’t rely on the resolution.
5. Use background colors to separate sections.
6. Keep the main navigation to three or four links.
7. Maintain the total link count at no more than 10 per page.
8. For low- and mid-end devices, don’t insert more than one link per line.
9. Use all the available width (i.e., not columns) for links, list elements, text inputs, and all possible focusable elements.
10. Provide a Go to Top link in the footer.
11. Provide a Back button in the footer (some browsers don’t have a Back button visible
    all the time).
12. Provide the most-used features at the top.
13. Group large lists by categories, each with no more than 10 items (for example, country selection by selecting the continent first).
14. Minimize the amount of user text input required.
15. Save the user’s history and settings for future predictive usage.
16. Split large text articles into pages (with page size depending on the richness of the
    browser).
17. Try your color palette in different environments. Users may be in a place with poor lighting, on public transport, at the beach in bright sunlight, or in an office with fluorescent lighting.
18. Provide different styling for touch devices.
19. Think about fluid (liquid) designs for best adaptation.
20. Use lists rather than tables.
21. Don’t use text images.
22. For touch and cursor-based devices, use full-width links so that a link will activate if the user clicks on any pixel in the line containing it. Make sure there is only one link in each line.
23. Use high-quality color images and fancier features stuff for smartphones (we will discuss optimizing later).
24. For cursor navigation, create medium-sized clickable zones for the cursor, moving by 5 or 10 pixels every time. Do not make the user travel a lot using the cursor; design all the clickable buttons near each other.
25. If you are providing a shortcut, a widget, or an offline version of your mobile website, create an alert at the top of the design (generally with yellow background) alerting the user to download it. Don’t show that alert after many views or after the user has entered the download area.