How to Make your Site Mobile Friendly, Part 2
Editor’s Note: This is “Part 2″ of a 2-part series on making your website mobile friendly. “Part 1” we published previously.
In “How to Make your Site Mobile Friendly, Part 1,” I addressed how technology is only part of the answer for creating an effective mobile website. You also need to design for your users and their expectations, which is what I’ll address in this “Part 2” installment.
Back to Basics
When deciding what to include on your mobile website, start with listing your objectives.
- What are the objectives of the mobile website?
- Are these objectives measurable?
- Should there be a separate mobile site, or one overall site that is responsive for all users?
- Are all the needed stakeholders — management, marketing, IT, sales — involved?
- What devices do your visitors most frequently use?
- What do your mobile site visitors want to do?
- What do they need to do?
- Do they need to perform specific actions and what are those actions?
- In what environment will they be performing those actions?
- Is there a simpler way to illustrate concepts — graphics vs. words?
- What navigation is necessary to guide your visitors to their desired tasks?
- What functions or tasks need to be performed?
The key to a good customer experience is to determine how you can address the needs of your visitors and provide that functionality. Are they looking for a map? Do they want to order something? Compare prices? Need to book an appointment or make a reservation? Remember, too, that your visitors will use their phones and tablets in multiple scenarios — sitting in the car, on the couch watching TV, or browsing at Starbucks.
At all times, keep in mind that your visitor is using a small screen.
Guidelines for Good Mobile Website Design
Below are the most common recommendations for building a mobile-friendly site.
Remember to be aware of your graphic sizes and keep the file size small. This will help with users that have limited data plans and will also allow for fast page loading.
- Provide the most important information at top, such as business name, address, phone number, and a link to directions or map.
- When displaying phone numbers, use “click to call.”
- Simplify navigation to the most important buttons based on what your visitors are seeking.
- Don’t be cluttered — make use of space.
- Don’t make users scroll horizontally.
- Provide contrast between text and background.
- Consider how users hold their mobile devices.
“Designing for Touch,” an article in .net Magazine, discusses “thumb-thumping hot zones” on phones and tablets. These hot zones are where people will most often tap, using their thumbs, while holding their devices in one hand. It also illustrates that people focus their attention at the top of the screen when using a tablet.
The article explains that it doesn’t really matter if the person is left or right-handed, as people switch hands depending on the tasks they are doing. It’s important that the buttons most likely to be tapped are in this hot zone.
The article points out that because of the tablet’s size, most people focus on the top of the screen and depending on if they are standing, sitting or propping the device, their hands are usually toward the top of the device.
Content is extremely important. Many businesses have spent much effort, time, and money creating content for their desktop websites. With your mobile website, however, showing all that information can be overwhelming and frustrating to the visitor who must now scroll through multiple screens of copy. Copyediting is a skill that must be mastered. You want your customers to access your information easily.
- Edit your content to the most relevant information.
- If your website is responsive — i.e., size adjusts based on the device — you still need to edit your text since it will be displayed on a phone as well as a desktop. Work to find the right balance.
- Edit each page to the bare bones.
- Use bullet points when possible.
- Use headlines and short paragraphs.
- If the content has text links, consider pulling them out and placing them at the end of the paragraph on their own line.
- Offer a link to the desktop version of your site.
Targets and Buttons
- Buttons should be clickable with a thumb.
- Targets, such as buttons, should be at least 44 pixels high and wide.
- Be aware of how close your targets are to each other. Allow for space between them.
- Use only the needed buttons.
- If data entry is required, make area easily visible and identifiable.
- If adding controls, such as sliders and play-or-pause buttons, add them below the content.
- Keep forms short and use top-aligned labels.
- Acknowledge of the action of your visitors.
Test Your Mobile Website
- Check both portrait and landscape orientations.
- Test on various devices to make sure the coding and the layout work as intended. Testing is especially important if you are using shopping cart software.