The Way We Work
February 21, 2011 by Julia Camenisch

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.

  • Less is More. When it comes to images, text, Flash or JavaScript, remember to keep it simple. For most mobile devices (tablets aside) the viewing space is extremely small. When you include too many images on a page, the visitor can easily get frustrated scrolling through them en route to their desired content. And with Flash and JavaScript, remember that not all phone browsers support them. (It would be a nasty design faux pas for that cool drop-down menu on your main site to just be a broken link on a smartphone.)
  • 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.

2.   Get Help. Mobile design can be tricky. If you’re pressed for time or are not comfortable tinkering with the code of your site, then look at some of these design tools:mobile device friendly three

  • 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.


Julia Camenisch

Contributing Author

Julia Camenisch is a freelance technology and business journalist. She also works as an editor and copywriter for a wide range of clients, including national magazines, small businesses and nonprofit organizations. Julia brings to Upwork a passion for empowering small businesses through the innovative use of technology.