Go Mobile or Go Home – Mobile Fitness Checklist
Have you realigned everything you are doing to be mobile-friendly and mobile-optimized? If you haven’t, you’d better stop ignoring its importance. Do it now. It’s time to: “Go Mobile or Go Home.” Your prospects and viewers are arriving more and more on mobile devices. If your sites and emails are not translating well for mobile, your audience will be frustrated and will go elsewhere to get what they want.
Mobile Fitness Checklist
Here is a checklist to remind you of all the areas you need to take a look at and make sure they are mobile-compliant and mobile-ready.
- Consider using mobile redirects to detect mobile devices and redirect them to the mobile version of your site.
- If you are only using one version of your site, your site framework needs to be responsive, meaning, will resize to fit the device. Detection scripts can be employed to detect and resize to optimized dimensions based on the device screen size.
- If you are using wordpress, use a responsive theme for your design and it will resize elements and layout based on the window size. If you are not using a CMS (content management system) framework such as wordpress, joomla, drupal, etc., you may want to consider it for the sake of getting a responsive platform. Otherwise, you may need to employ HTML 5 tags.
- If using a CMS, use plugins to help optimize your site. Many, if not all you’ll need, are free.
Layout and Design Best Practices:
- One column layout works best. Employ it if possible.
- Fast loading pages are even more critical because mobile is typically slower than desktop connections.
- Simplify the navigation of your site. Use well-structured menu hierarchy.
- Use large “thumb-friendly” sized buttons. At least.
- Keep text minimal and use white space for easier reading and clarity of elements. Less is more.
- Use checklists for data entry fields and pre-populate them where possible. Use drop-down list options. All these are more “finger-friendly” for the user.
- Include a “view full size” (or similar) link that links to the desktop version of your site.
- Include phone number, contact link, address and maps on your landing page.
- Do not use pop up windows.
- For mobile, max width is about 320 pixels.
- Use at least 22 pixel text for headlines and 14 pixel text for body copy.
- Use as few graphics as possible, and even no graphics. You should plan for delivering your messages in a “no images” environment nonetheless, as many mobile devices operate in an “images off” mode.
- Keep the subject line short. The small screen will cut off your text. Less is more.
- Make links stand out by separating them from content as much as possible.
- Leave space around your links, they can be hard to spot when “buried” within content.
- Leave at least 40 pixels of space around links and buttons
- Use the actual URL for links instead of anchor text.
- Keep links separated from each other, rather than close to one another, for clarity.
- Make your buttons big.
- iOS devices resize, but not so for Android. The fold is approximately 320 pixels.
It goes without saying really, but you need to test your sites, landing pages, ads and email for mobile devices. There are several very good sites (free and paid) that offer emulators for testing your web pages and email layouts in a mobile environment.
- Use Google analytics to track the behaviors of your mobile users and look for problem spots you can make improvements to.