Taking Interaction to 11 – Designing your website for the Mobile Web

Mobile browsing is here to stay and that means your website is viewable in more places than ever. In recent years the web has gone beyond the desktop to the handheld device. Mobile web browsing used to be a joke with tiny little screens and web browsers with no capabilities. Now with the growing popularity and sophistication of smart phone operating systems, the experience is drawing closer to that of your laptop or desktop home computer, just at a far smaller size. Creating an unforgettable design and interactive experience on your website is a difficult task by itself when your visitors will be viewing your website on a large monitor. To shrink this same experience to a space about the size of a credit card needs a special touch to be effective. Giving attention to how your website is viewed on other modern browsing platforms is giving attention to your website’s visitors. So, what does this mean for your website?

The first place to start is to figure out how your user is viewing your website. This can easily be accomplished server-side (via PHP, ASP.NET, Ruby on Rails and the like) before the web page is loaded, giving you the greatest control over customizing the experience. By detecting if a user is viewing your website on a mobile browser or not, you can change what content appears, what interaction functionality to include and what format the user will view the page in. This will allow you to create a custom tailored experience for your visitors, to better communicate your message. If you do not have direct access to your website’s server, you can also look into the new Mobify service to help syndicate and customize your website’s content for mobile browsing.

One thing to keep in mind when showing an alternate version of your website for mobile visitors is that sometimes your visitor may want to see your website as its desktop counterpart. This may be due to the elimination of some information in the mobile version or he may prefer the way that their mobile device renders the web page by default. Always make sure that a link is provided to view the website in the normal mode. With the use of cookies, you can even setup your website to remember your visitor’s viewing preferences. The point here is to give the control to the visitor, not drive them away by forcing them to conform to an imposed standard.

Simplify your presentation to make your message easy to scan. Attention spans are getting shorter and shorter and mobile web browsing does nothing to help this. Often a visitor on a mobile device will be killing time waiting for the bus or quickly treading through their Inbox. Browsing sessions are in short bursts and you need to grab your visitor’s attention quickly. The content on most websites, even ones that have already been optimized for scanning, still contain too much information to be viewed on a mobile screen. A mobile screen will generally have a very low resolution compared to a desktop monitor and lines of text will wrap often, increasing the perceived length and scope of your message to more than it is. By detecting a user’s mobile platform, you can serve up custom formatted information to them on in easy to read bite-sized chunks. If the visitor’s mobile device supports JavaScript, as most modern mobile devices do (iPhone, Android, Palm Pre, Windows Mobile 6.5+), you can even hide some of this information and make it displayable with a link without having to send your visitor to another page.

Speed up your visitors experience by trimming the fat. Mobile browsing is really quite limited when it comes to speed. A fast connection is not always reliably available, so optimizing what actually gets delivered to your visitors is key in keeping the experience responsive and flowing. If a visitor on your website has to wait for a massive header image to download on their one or two bar connection, the abandon rate will go up pretty quickly. If you decided to make your primary means of communicating your message via an Adobe Flash header, you’re out of luck. Windows Mobile 6.5 is currently the only mobile operating system out there with a modicum of Flash support and market exposure there is low (although Adobe is working to change this). Keep your mobile content light and compatible and you’re sure to keep visitors coming back for more.

As more and more manufacturers and cell phone carriers support and push modern mobile browsing smart phones, you can count on your visitors hitting your site on the go. Setup your site to really cater to this market and you can ensure that those on the go visits won’t be drive-bys!

Try viewing this blog on a mobile phone and see an example of how a website can be reformatted to allow for a better user experience and easier communication of information.

Resources you might be interested in for making your site more mobile friendly:

• MOBIFY – New mobile site optimizing service
• http://mashable.com/2009/10/20/mobile-web-presentation/ – Keynote notes on the mobile web from the Web 2.0 Summit in San Francisco
• http://detectmobilebrowsers.mobi/ – An easy to setup PHP browser detection script. Setup your preferences on this website for how you want to handle mobile devices and it generates the script for you
• http://mobiforge.com/developing/story/lightweight-device-detection-php – A simple PHP script for detecting mobile browsers. They also provide an ASP version. This is a good reference to build a mobile detection script in any programming language.
• http://www.dtelepathy.com/blog/telepathy/dont-make-an-iphone-app/ – The importance of keeping the visitor in control when viewing your website
• http://gigaom.com/2009/05/27/android-and-iphone-dominated-mobile-browsing-in-april/ – Mobile browsing platforms as of April. Please note that this has changed a little since then and with the recent release of the Motorola Android on Verizon early November, coverage for Android results will be far higher.
• http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009 – Great article from Smashing Magazine on Mobile Design