People are finally starting to wake up and realize that more and more Web browsing is done on a variety of mobile devices. Unfortunately, too many Web sites either break, or are nearly completely useless on mobile devices. Smaller screens, the touch interface, limited on-board resources, and cellular connections all conspire to make designing Web sites for mobile consumption a different experience than designing for full sized desktop browsers. Here are some tips to help you get up to speed with designing sites that work great on mobile devices. For this article, larger tablets like the iPad are big enough that many of these will not apply.
The navigation for mobile devices has to be significantly simpler than it is on the full sized version of the site. First of all, adding a sidebar (discussed later) is a really bad idea, meaning that your navigation really should fit at the top of the screen, and either remain there as the screen scrolls, or be repeated at the bottom of the screen for easy access. With such a small part of the screen to work with, how many items can you fit there and be readable? Five or maybe six, depending on the size of the items is really the upper limit, and that is truly pushing it. To get the best results, "flatten" your site's navigation, eliminate any less useful pages (or only link to them in relevant text and take them out of the navigation), get rid of any menu systems that depend on clicks and mouse hovers, and keep the wording short and brief.
Remember that mobile devices are used in a wide variety of environments where the lighting is often far from ideal. High contrast color schemes are your friend here. No, that does not mean garish 1997-style colors (red text on blue background, anyone?) It means black and white; do not use shades of grey or the same hue to differentiate items, and preferably lots of solid black or white with a bright, bold color to accent (but not as text). Also keep in mind that these simpler computing devices are the favorites of children and are attractive to the elderly who are often computer-shy; both of these groups often have perceptual challenges that are hard to understand unless you have experienced them or worked closely with someone in these age groups.
Keep your use of images to a minimum. Remember, mobile devices are often running on 3G (or slower) cellular networks! And when you do use images, do not simply take the full-sized image and set the height and width in HTML or CSS to be smaller; create a properly scaled down, compressed image. That said, the screens on mobile devices are getting better and better, so do not over compress the image. Instead of having multiple images where usual (like a product page), make it possible to view different images, preferably without refreshing the entire page.
Insets, sidebars, and headlines
These should all be avoided unless absolutely necessary. Headlines are acceptable if used sensibly; make them stand out with color, font weight, and a small amount of white space, not size. Also try to limit the words in them to reduce scrolling. With the amount of space available on mobile screens, the normal size of an inset or scrollbar on a desktop is often almost the whole screen on a mobile device, and instead of acting as an "aside" they dominate the content.
Touch screen keyboards really are not meant for large amounts of input. Eliminate any large text input requirements from your sites, or make them optional. Any tricks that depend on keyboard input should not be required.
Sizing and layout
The site should expand to fill the entire screen, period. With limited real estate as it is, limiting yourself is going to make it miserable. There should never be any horizontal scrolling. Again, sidebars and insets are off limits, because there just is no space available for them at all. The name of the game is maximizing the limited screen space, so using seas of whitespace is not helpful. In many ways, the mobile Web experience is similar to an early-Web experience, in that the screen sizes and bandwidth are limited, so you need to keep your site focused on the content itself and not on stylistic gimmicks.
Justin James is an OutSystems MVP, architect, and developer with expertise in SaaS applications and enterprise applications.