Mobile Device Must-Haves
Designing websites specifically for mobile devices is currently one of the most rapidly growing web design careers. The large number of web users with mobile devices gives mobile developers strong reason to make websites easy to navigate and view with these devices. The primary factors that drive mobile design are the smaller display and lack of a mouse. Hongkiat.com discusses 10 tips for making websites more usable for mobile users, including screen size, breaking up pages and simplifying design. Here is a look at "mobile design must-haves":
Overview
Mobile websites need to emphasize functionality over style. You need to create the major content for a website so that it occupies the smallest possible amount of space on the display. You also need to avoid components such as flash animation and large images, which take too long to download to mobile devices.
Ensure that your websites are compatible with as many mobile devices as possible to ensure a consistent user. This design consideration means that mobile websites require more testing than websites designed for traditional devices such as desktops and laptops.
Accommodate Different Screen Sizes
A mobile website must accommodate the larger variety of screen sizes and resolutions that mobile devices may have. Strive to strike a balance between audience size and screen size, meaning that common screen sizes should receive greater consideration in the design process than less common screen sizes. The primary challenge with this aspect of mobile web design is avoiding the creation of separate pages for each type of mobile device.
Uxbooth has a list of popular mobile devices and their screen resolutions as of February 2011. For example, the Apple iPhone and iPod have a resolution of 320x480, while the iPad is a resolution of 768x1024. Windows 7 phone devices have a resolution of 480x800.
Break up Web Pages
The limited viewing area of a mobile device frequently means that you must break up the content by placing it on more than one page. You should also use a single column of text that wraps to the next line. These features allow mobile users to view the entire content without scrolling horizontally. Prioritize the content on your websites, so you can eliminate as much low-priority content as possible.
The mobile website for CBS News demonstrates how mobile designers can break a large amount of content into smaller portions. The site also displays the first portion of an article and provides a link that allows the user to view the remainder of the article.
Simplify the Design
Simplicity is equivalent to usability in mobile design. Navigation needs to be as easy for mobile users as possible, so designers should eliminate formatting widgets such as frames and tables. Use the minimum possible amount of padding if you use it all. Mobile devices have slower download speeds than desktops, so each additional click can increase a page's load time. The mobile website for Best Buy demonstrates a minimum hierarchy by displaying only the most essential categories for its products.
Want to be a mobile designer? Need help designing a mobile site? Want to learn more about mobile device must-haves? Contact us today to learn more.
