With 1.6 billion customers forecast to be mobile Internet users by 2013, the question of whether or not to make your website small-screen friendly is almost moot. The real issue now is how serious you are about attracting large amounts of traffic to your site. Don’t let bad (or non-existent) mobile design make you the object of rants on iPhone user forums. Instead, use this collection of tips and tools to make your site a thing of mobile beauty.
1. Design with Mobile in Mind. Don't wait until you have a finished product to consider your mobile-device friends.
- Provide Simple Navigation. If a mobile user has to dig through layers and layers of menus to get to their destination, they’re likely to give up. Instead, provide a clear menu and make the most important information accessible from the top of the home page.
- Size Matters. Think of your website’s mobile version as a pair of online skinny jeans -- you gotta keep it smaller in order to work. For users that have bandwidth restrictions, a large and heavy site will be an anathema! So code simply, reduce graphic size and if using video, choose your encoding wisely.
- Detect the phone. Do some sleuthing work so that you can redirect mobile visitors to versions of your site optimized for their phones. If you’re coding your own site from scratch, make use of this handy PHP function that will detect users’ access device for you. If you’re using Joomla, make use of the Mobile Joomla! extension. For Drupal users, check out this article about using Varnish for automatic mobile detection.
- WPTouch: For WordPress blogs, you can install WPTouch. It’s a plug-in that automatically displays a mobile/tablet optimized version of your site for iPhone, iPod, Blackberry, PalmOS, Samsung Touch and Android clients. Instead of modifying your existing theme, the plug-in provides a completely separate customizable theme.
- MoFuse: Looking for a full-featured CMS for mobile devices? Check out MoFuse. Using your RSS feeds, Mofuse creates a mobile version of your website or blog in all existing phone flavors. If you don’t have or want an RSS feed, you can design the mobile version of the site yourself using MoFuse’s interface. (They also allow you to monetize the site using several different ad networks.)
- Mobify: Another popular CMS for mobile sites, Mobify allows you to choose which content from your existing site should make the move to the mobile version. That content will always be linked with your full site and will update simultaneously. The program also gives you “behind the scenes” access, so that you can tinker with the code to your heart’s content.
3. Test, Test, Then Test Again. Just as it’s important to test your main website extensively in different browsers, it’s also important to test your mobile website to see how it displays on various smartphones. Here are a smattering of simulators to make that job easier:
- Blackberrys: Use the Blackberry Device Simulator to test how a Blackberry user will be able to navigate your site.
- Androids: You can use the Android Emulator SDK to view your site through an Android user’s eyes.
- iPhones: The iPhone Simulator provides an easy way to test your site, even allowing you to see both the vertical and horizontal views.
Designing a mobile site can be as simple or as complex as you choose to make it. But the option of whether or not to make a mobile optimized site is no longer on the web design menu. It’s now a must!
In the comments section below, share your tips and tricks on how you’ve rolled out your website’s welcome mat to iPhone, Android and other mobile phone visitors.