7 Tips for Mobile Website UsabilityBlog, Loop11 Articles November 2nd, 2012
When it comes to mobile website usability, there are many more things to consider because of the inhibited screen size. The following are seven things you should think about during the design process and check for after your mobile website is complete to ensure that mobile users are getting the best experience.
1. Look for responsive template designs and test them before purchasing.
If you are in re-design mode for your website, be sure to be on the lookout for templates that have a responsive design or are designated as mobile-friendly. Then test the template you are considering on a mobile device before purchasing it. To do this, simply go to the demo site for the template on your mobile phone to see if the design works with your browser. If it doesn’t, see if the template designer offers mobile customization as well.
2. Download mobile compatibility packages for WordPress.
For those using WordPress as a CMS on their own domain (not WordPress.com), you can look into plugins like WPtouch or WordPress Mobile Pack. These plugins will detect whether a visitors is coming to your website from a mobile device and present them with a mobile-friendly design instead of your main one. Be sure to go through the options for these plugins carefully to make sure they are displaying the pages you want visible to mobile visitors and test your website on a mobile device to make sure everything is configured correctly.
3. Don’t use popups or floating elements on your mobile website.
Outside of running into a website that only uses Flash on an iPhone, the next most irritating thing on a mobile website is a popup or piece of floating content. The challenge with these elements is that they are hard to close because the X is generally somewhere outside of where you can zoom. That or there is no way to close it, and no matter where you scroll, the floating social share button, ad, etc. keeps covering the main content. Sure those are easy to manage on a desktop browser, but make sure they don’t appear on your mobile website.
4. Rethink paginated content.
A popular trend on blogs is to paginate posts, so instead of having 1,000+ words on one page, it will be spread across two or three pages. And while this sounds like a great idea for mobile as it would decrease the load time by having less to load on one page, here is the issue. Someone who is in an area with a choppy 3G signal is going be able to load page, but not the rest. Chances are, they will get so frustrated that they won’t try to get back to that content later either.
5. Offer the option to visit the full website.
Assuming that your main website is not all done with Flash, be sure to offer visitors the opportunity to use the full site instead of the mobile website. This way, if they are looking for something not available on your mobile website, they can still access it via their mobile device. Of course, if you do offer this option, make sure that your site isn’t set to automatically redirect every time someone lands on a page from a mobile device. Otherwise, they’ll almost get to where they want to go and then get shipped back to the mobile website again.
6. Add your phone number throughout your website in the text, not as an image.
Smartphones allow website browsers to click on a phone number anywhere on a website to call it directly, but only if the phone number is in the text of the website. A lot of businesses tend to put their phone number in an image just for design / formatting purposes, but this doesn’t help people contact you when needed. As a side benefit, having a local phone number in the text will also help you with local search rankings.
7. Test, test, and test again.
Web designers know to test their latest projects in a variety of browsers because not all browsers are created equal. The same goes for mobile devices. What works flawlessly on your iPhone may not work so well on an Android. Your best bet is to try your mobile website on a few different mobile platforms including iPhone, iPad, Android, and Windows. The easiest way to do it if you don’t happen to own one or more of these devices is to slip into your local electronics or mobile sales store and run a few quick tests on the demo devices. Try to test key conversion areas such as submission forms or mobile shopping carts to ensure a good experience for your mobile users from start to finish.
What mobile website usability tips would you like to add to this list? Please do so in the comments!