Let's focus on the basics of designing for mobile devices.
1. Do You Really Need A Mobile Website?
Before diving into creating a mobile-ready website or shelling out a bunch of money to have one created, it's important to figure out if you actually need a mobile website. Of the estimated 91.4 million mobile internet users inthe US, how many of them are in your target audience? How many of them will need to gather information from your website on a regular basis?
Check your existing website analytics and identify how many visitors are using mobile devices, along with the types of devices and operating systems they are using. Identify where they are going and what sort of content they are using. If they are using just a couple of features, like finding your phone number or hours of operation, you may be better off for now just optimizing your desktop site to make that information easily accessible by mobile users instead of building and maintaining a separate mobile site.
2. Prioritize Content
After deciding you and your users will benefit from a mobile website, it's time to figure out what information they want access to
Mobile web surfing isn't the same as desktop surfing. Mobile users are not captive users and tend to use the internet for specific reasons, such as connecting with others, looking up contacts, keeping up to date on events or articles and using applications such as reservations or purchasing. By prioritizing your content for the mobile user, you make their experience clean, efficient and useful.
In Tapworthy – Designing Great iPhone Apps, author Josh Clark boils down the mobile user’s mindset to one of three possibilities:
- Microtasking: Using the phone for short bursts of activity.
- Local : Finding out what’s around the user.
- Bored : Using the phone for distraction/entertainment.
Keeping all these factors in mind, now it's time to consider your mobile web design strategy.
3. Designing for the Mobile Device
- Design for smaller screensThis is a given. Although you have a wide range of mobile devices from simple phones to tablets, make your site fluid. Be sure the width is shrinkable as well as expandable.
- Simplify Navigation
Web design for mobile devices must take into account ease of navigation, and placing it at the top of the screen makes for a frustrating experience on a cell phone. Have the content show up first, and keep links at the bottom. For touch screen devices like the iPhone, long link text is easier to tap on than short links, so use more than three words for your text links. - Minimize User Input
Tiny keyboards and touchscreens are vulnerable to errors and take time. Good rules to follow:
- Keep URLs as short as possible
- Use alternate input mechanisms where possible, such as drop-down choices, buttons
- Limit input to essential fields. For example use zip codes only, rather than city and state inputs on forms. - Design for Intermittent Connectivity
Even with mobile providers offering faster and faster speeds, connectivity on mobile devices still can't match broadband. Users pay for internet access and not everyone has unlimited plans. Your site should be designed with reduced size in mind:
- Keep page sizes small so they load quickly
- Remove unnecessary code, comments and optional tags
- Reduce image sizes and resolutions that are optimized for mobile devices
- Minimize the number of embedded image to reduce the page load time
4. Testing Your Mobile Website
Once you've created your mobile website, it's good to test on as many mobile devices as possible. You can test your site's mobile-readiness by visiting one of these sites.
- http://ready.mobi
- http://ipadpeek.com/
- http://validator.w3.org/mobile/
- http://www.google.com/gwt/n
- http://www.gomez.com/mobile-readiness-instant-test