Mobile phones are everywhere, and many of them are now web-capable, making them mobile browsers. If you want a loyal fan base among your mobile visitors, design your web site with this in mind. On this page we cover:
Google has defined three classes of mobile user -- so be aware of which class you are designing your site for.
The repetitive now are users checking the same piece of information over and over like checking the same stock quotes or weather. Google uses cookies to help cater to mobile users who continually check the same data.
The bored now are users who have time on their hands. People on trains or waiting in airports or sitting in cafes. Mobile users in this behavior group look a lot more like casual Web surfers, but mobile phones don't offer the robust user input of a desktop, so the applications have to be tailored.
The urgent now users want to find something specific fast, like the location of a cafe or directions to the airport. Since a lot of these questions are location-aware, Google tries to build location into the mobile versions of these queries.
Mobile limitations
Small screen size Compared to desktop browsers, mobiles are very restricted in screen size. While a typical desktop browser might have a screen size of 1024 wide x 768 pixels high, mobiles use very small sizes like 240 x 320.
Because mobiles may be operated by finger touch, keep as much spacing as you can between links
Low data speed For mobiles, bandwidth is expensive -- your visitors may be paying by the kilobyte for data they download. Their connection speed may also be slow.
As well as this, mobiles are inherently slow -- to make best use of limited battery power, they use slow processors and have restricted memory.
Limited data input Mobiles don't have mice -- something that might be very easy with mouse and desktop computer, will not be nearly so easy with a mobile. And a mobile keyboard is not something you would write a novel on.
Limited fonts and sizes Most mobiles default to their own font families and sizes regardless of what you might specify.
Poor lighting Mobiles are also often used in sunlight and other difficult conditions while PC screens are used in more controlled environments. Reducing screen contrast may be used to conserve battery life. For these reasons you should use good contrast between foreground and background. Subtle color differences will disappear.
Shift in emphasis
These factors mean a shift in emphasis for sites intended for mobile viewing. Whereas in desktop design, you will often place objects side by side, for mobile you will place them one under the other.
Compensate for the low data speed by keeping your site as lean as possible:
No large images
Minimal images
No tricky navigation
No popups or fresh windows
No frames
Your visitors may run with images turned off, so make sure you use an "alt tag" (a Title made with the link editor) for each image you use. Don't rely on images for navigation.
Compensate for the limited data input by not requiring your visitors to type anything. Assume that they will be expert at cursor movement, so have them do as much as possible in point-and-click mode. A user should be able to get to any page on your site with only 3 clicks. Make the important, popular information easily accessible and reduce the number of clicks to get anywhere.
In short, the KISS principle (Keep It Simple, Stupid).
Testing
Much of the testing effort is trial and error. You will want to do as much as possible from your desktop -- simply because it is fast and easy that way.
SiteSpinner Pro caters for the the small screen size by providing methods to view your site at the small size -- see the Mobile Development tutorial
Look over your finished code, looking particularly for duplicated images, and images that are too large in file size. One way is to clear your preview folder, preview your project or page, and examine the files that have appeared in your preview folder.
Simulate the lack of a mouse by hiding your desktop mouse and just using the desktop cursor keys for navigation.
If a page is already on the web, you can show it in Opera Mini, using a link like that here:
Desktop testing will give a good idea of how the site will work, and it should give some feel for the navigation and flow of the site. However the ultimate test as always, is test it on some real mobiles.
