Tips on Building for the Mobile Web

Patricio Robles, tech reporter for e-consultancy.com wrote a piece Mobile Experience Letting Web Users Down.  In it, he talks about the general experience of how to make choices to improve performance and general pitfalls of surfing the web via a handset and on 3G.  Beyond this, he didn’t really get into specifics of what and hows when developing a mobile web site, so I thought i might delve in with 5+ tips and points on developing for the mobile web:

1. Reading material.
   I spent a lot of time hunting around, trying to improve my knowledge of mobile web dev, mobile browser testing, and the intricacies of developing for the mobile web, but in reality there was very little decent material, some of which wasn’t even free – Cameron Moll’s Mobile Web Book for one – and which, ultimately, couldn’t have just been figured out by getting on with the development process.  Don’t kid yourself. Good mobile design follows the same basic tenets of good web design for the desktop.  For some rather dry reading material you can read W3C’s mobile dev best practices.
2. Mobile emulator & support list.
   By looking at your site in a simple mobile emulator you will quickly realize why the experience needs to be enhanced and optimised for mobile devices, and remember, the mobile web isn’t just the iPhone!  Throw in connection issues, screen dimensions and the lack of ability to pre-cache content for your site and you quickly hit 10 reasons why mobile web development needs extra loving.  Developing for handhelds is a notorious game, one level below dealing with cross-browser issues.  It’s a real minefield and ring-fencing the types of device you want to support is a good idea.
3. Use the right tools.
   There are add-ons for FireFox et al that help with the process of developing for the mobile web.  User Agent Switcher is one that will let you mimic a mobile web browser footprint in Firefox, though the HTML will render as normal in FireFox – only good for the iPhone and similar devices.  Using the resize functions of Firefox add-on Firebug you can always ensure your browser window is always at the right test width and height.  The iPhone simulator, part of the iPhone SDK, is also another way to test inthe absence of the hardware.
4. Detection scripts.
   There are mobile detection scripts in PHP and other languages which make it easy to detect devices and send them to specific versions of your web site.  This allows you to optimise down to the finest grain, though of course this means more versions, more code, more headache, so optimise yourself to the hilt.
5. Don’t just streamline, remove and special case.
   When actually developing for the mobile web you need to remove content from the pages, not just hide it with CSS.  If you do simply hide it with display: none; this means you get the overhead of having to download the code to the device without of the functional, or visual, benefit of it.  Also ask yourself the question: What do people want when looking on their device? What can I easily remove with no qualitative loss to the site.  In your quest to streamline, try to reduce connections to download includes, images etc, and also pack/minimise the CSS and HTML code files.
6. Right Mobile Profile & CSS
   Make sure that you setup your HTML document with the right mobile profile doctype.  This makes all the difference in the rendering process and can save headaches down the road.  Make sure your device’s browser can handle this doctype and ensure you don’t use CSS properties that are not compatible with it either.  It’s one thing for them to work under testing in Firefox or elsewhere, it’s another when you get the code onto the device.  Quirks Mode has an excellent chart covering CSS compatibility for the mobile.
7. Test, test & test again.
   I have probably said this enough already but when all is said and done make sure you are fully tested at all widths, heights and angles on all your supported devices.  Make sure you are giving your users the right kind of info in the most easy to use and navigable manner as possible.  Ultimately, make sure it works without flaws.

Alex Ford of The Wexner Center for the Arts wrote an excellent blog post regarding their experience of Developing an iPhone View of wexarts.org.  The focus of the article is on developing content for the iPhone but it goes to show a real world example and provides an interesting case study.  Beyond this, there are plenty of examples of good mobile web sites out there from Last.fm to Flickr, and on to the BBC.

Go forth, check out what others are doing, build and conquer!

Share

Related Posts

• Mobile Sites & Web Apps for Museums
• SiteShrink – Off The Shelf Mobile Sites for Museums
• Do You Have The Right Style?
• Tips for Avoiding Slow Website Performance
• Good Design – Building Usable Menus
• User Experience & Why HTML is Not Just a Wrapper