Designing a mobile website or mobile app can be a challenge at the beginning. Unless you are working on a website for only one device, forget about creating an exact pixelby-pixel web design. Your mobile website will look different on every device it’s viewed on; you need to accept this and, keeping it in mind, develop a strategy to create the best web design you can.
The best advice I can give you about mobile web design is: Keep It Simple! However, that doesn’t mean Keep It Ugly.
A mobile website ideally consists of vertically scrollable documents. The typical twoor three-column design is not suitable for mobile web pages, unless you are targeting tablets or devices with a landscape orientation mode. Every mobile web document has a few identified zones:
- Main navigation
- Content modules
- Second-level navigation
These sections will be created one after the other in a vertical scope. Only for devices with a landscape orientation and smartphones is it suitable to create an alternative organization, where you can move the main navigation section to a right-side column.
On high-end smartphones, your main navigation can become a top or bottom tab bar, and the content modules can shrink with an accordion or master-detail design.
When you are creating a mobile version of an existing desktop website, you need to understand that you are mobilizingthe website, not minimizingit. Minimizing (or miniaturizing) a desktop website simply involves displaying the same content on a smaller screen. Mobilizing is more than that; it requires understanding the context and offering your services and content in a manner that is useful and allows for quick access by the user.
If you are designing a mobile app or a website using Ajax, you should always insert in the UI a background operation icon to alert the user when a background connection is in progress. An offline button could be useful if the user is not on WiFi or is in roaming mode and doesn’t want to get updates for a while.
Some best practices include:
- Avoid horizontal scrolling (unless you know what you are doing).
- Use Responsive Web Design to provide the best possible design in different scenarios, such as orientation changes.
- Maintain visual consistency with your desktop site, if you have one.
- Reduce the amount of text.
- Use fonts that will be legible on every screen; don’t rely on the resolution.
- Use background colors to separate sections.
- Keep the main navigation to four or five links.
- Maintain the total link count at no more than 15 per page.
- For low-end and mid-range devices, don’t insert more than one link per line.
- Use all the available width (not columns) for links, list elements, text inputs, and all possible focusable elements. Use HTML by-default focusable elements for click-able areas (for example, avoid using divs; use an anchor with a div).
- Provide a “Go to Top” link in the footer.
- Provide a Back button in the footer (some browsers don’t have a Back button visible all the time).
If your navigation requires going back frequently, you should check whether the browser maintains the scroll position after going back. If not, you should probably create back links with anchors to scroll to directly where the user was.
- Provide the most-used features at the top.
- Group large lists by categories, each with no more than 15 items (for example, country selection by selecting the continent first).
- Use standard dialog windows.
- Minimize the amount of user text input required if you have multiple fields.
- Save the user’s history and settings for future predictive usage.
- Split large text articles into pages for feature phones (with page size depending on the richness of the browser).
- 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.
- Provide different styling for touch devices.
- Think about fluid (liquid) designs for best adaptation.
- Use lists rather than tables.
- Embrace accessibility support. For example, use HTML5 ARIA or be careful when disabling zooming.
- Don’t discriminate against your users; provide the best possible experience to every mobile device.
- 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.
- Use high-quality color images and fancier features for smartphones (we will discuss optimizing later).
- 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.
- Provide images that are sized on the server side for the current device’s screen size and pixel density.
- Don’t rely on fixed-position elements or on scrollable small areas (such as using overflow: scroll). Test them and provide alternatives if they are not compatible on some browsers.
- If you are providing a shortcut, a native app, or an offline version of your mobile website, create an alert at the top of the design alerting the user to download it. Don’t show that alert after the first few views, or after the user has entered the download area. We will cover these techniques later.
Keep the text on your site to a minimum. Read every paragraph five times, and you will always find some word you can remove or a shorter way to say the same thing.
For low-end and mid-range devices, it is preferable to use a table design instead of floating divs, like in the first years of the desktop web. But keep in mind that using more than one item, link, or idea per line isn’t a good practice on those devices.