Making your site mobile

More and more people are viewing web sites on their mobile devices. Since we have just redesigned our company site, the question came up about how our site looks on a mobile device. The answer, better than IE 6. Our site does not look bad, but is this the best user experience we can give our visitors when they look at our site on a mobile device.

We have decided to design a completely mobile version of our web site. Not just shifting the existing content, but editing the content to be more in keeping with the mindset of the mobile user. The way a user interacts with a mobile device is completely different than when you are sitting in front of a desktop or laptop computer.

Here is a list of questions we try and address when designing or re-purposing a website for a mobile device.

Navigation for me is the #1 issue on an iphone, I hate having to zoom in on a nav bar to make it big enough to tap on with my finger. Most sites, even apple, try and fit navigation designed for a 1024 pixel wide screen onto a 320 pixel screen. Drop-down navigation does nor work well either on a mobile device, so we are simplifying the navigation so the user get to each section of the site with just one click.

question 2 is content, does the mobile user expect an abbreviated version of a website. For our site, we figure a mobile user is going to have a limited amount of time to view our site, so we are editing the content to give a high level overview of who we are and our work, the user should be able to get through the top level of content in just a few minutes.

the next part we are working on letting users access built in iphone functionality, when they chick on our phone number, they will initiate a call, click on our address and google maps will be launched.

The last consideration to be aware of is the fixed browser size on a mobile device, the current version of Safari on the iphone, sees all sites as 980 pixels wide.

This is a screen shot on the iphone of sample page built st 320 px wide with a 17px high font size


This is a screen shot of the same page built at 980 px wide, the font size in the purple section is 21px high.



Apple has published a helpful tips document on there developer site you will have to sign up to see the document.

Stay tuned to see the final W+W mobile site.