Mobile Site Design Tips and Inspiration

As users are accessing the internet from more mobile devices than ever before, it is imperative that web designers and developers learn best design practices for mobile devices. What better way to do that then learning from companies who are already executing best-in-class mobile site designs.This article contains 8 tips for redesigning your current site to best fit mobile users and devices as well as plenty of examples of companies who are already implementing these best practices.

1. Define your need for a mobile site.

Why will users be accessing your site "on the go"? What information do users access the most? If you are in the restaurant or retail business it is probably to access store location, contact information, get directions, or book a reservation / appointment. Is it a social site where users will want to post updates or read news anywhere? The strategy for your desktop site is about creating a branded experience for the user. Your mobile strategy should focus on getting the right information to the user as quickly as possible - it is all about accessibility. In most cases, you will not and should not include every page of your desktop site on the mobile site. It will most likely be a smaller, more compact version of the desktop site.

2. Make educated decisions based on analytics.

When designing your mobile site it is important to consider what devices users are already using to access your site. Hopefully you are already using some sort of tracking software (Google analytics is free) to monitor traffic. Look at what devices and browsers users are already using and target these as high priorities when designing, developing, and testing your mobile site.

3. Simplify your design.

A one-column design is typically the best bet for mobile designs. Keep the navigation simple and functional as possible, break up large sections of text to multiple pages, and eliminate large images. Great mobile sites welcome white space and never feel cramped even when viewing on a 480 x 320 screen.

4. Limit scrolling to one direction...down.

Mobile users are familiar with scrolling down to view more content. Keep in mind the "fold" on a mobile device is between 240 and 480 and all important information should sit above including the main navigation. A good way to digest large amounts of content in a simplified way is to use collapsible navigation. Tapping on certain buttons can extend the content which can again be rolled up by retapping.

5. Think about finger navigation versus a mouse.

Users interactive with mobile sites using their fingers instead of a mouse. This creates new opportunities to engage users that must be considered via design. While desktop sites can be navigated with the preciseness of a mouse, mobile designs must account for larger clickable ares such as buttons, menus, and links. Also, unlike the desktop site, there is no "hover state available for mobile. This means you will need to rework elements like drop-down navigation or pop-ups that appear when a mouse hovers over.

6. Don't use pop-ups or open new windows.

On the desktop site, you may be familiar with opening new windows to view relevant content without leaving the main site. This is not the case with mobile devices and should be avoided.

7. Reduce or minimize images.

Large images mean longer load time and impatient mobile users will leave your site quicker than you can blink. The design should enhance the mobile experience without relying on large images.

8. Learn from the best.

Below is a list of great mobile site designs that are also scalable. If viewing on a browser, resize your screen to approximate the size of a mobile device.

http://m.digg.com/

http://i.brightkite.com

http://m.yp.com/

http://m.flickr.com/#/home

http://m.facebook.com/

http://m.webdesignerdepot.com/