Designing Web content for mobile browsers

Let’s be realistic here. Designing content for a mobile phone takes careful planning. If you are totally lost and are looking to get yourself grounded in this area, take a look at this article that IBM has thrown together.

Content designed for display on a desktop browser appears very differently on the space-constrained displays that are typical of mobile devices. Also, due to limited processing power of handheld devices, graphical content can significantly influence page loading times. As a result of these limitations, Web content that is destined for use on mobile devices is often customized (sometimes referred to as mobile-device optimized). The goal of optimization is to present Web page information with minimal scrolling (vertical & horizontal), improve download times, and reduce system-resource demands, while maintaining an intuitive and easy-to-use user interface.

Based on a cursory review of the technical literature and several “device-optimized” Web sites, there are several ways to “shrink” a conventional desktop HTML page to better fit on a device. For example, Steinberg & Pasquale (2002) describe the use of server-based “Web-stream customizers” that compress images and graphics, and reformat frames, and Buyukkokten, Kaljuvee, Garcia-Molina, Paepcke, & Winograd (2002) discuss Web page summarization, in which only a page’s text or hyperlinks are displayed. However, the only way to truly optimize a page is to create a separate version that is designed from the start with the device’s limitations in mind (Clement & Vickers, 2002).

We have assembled the following list of design guidelines to assist in the design of device-optimized Web content. This list is not comprehensive; however, it introduces some general rules that we hope various development teams can take advantage of in their interface design efforts. [Read the rest]

Article Written by