:: NotForPaper | The best design work for screen ::

Home :: All featured posts

Mobile Websites and iPhone

posted by Robert, on December 30th, 2008

Around the time the iPhone was released, some website owners began creating tailored versions of their sites specifically formatted for the new high-tech device. Still others created websites that are designed exclusively for the iPhone such as games and mini-apps. These were coined and promoted by Apple as WebApps. Now about a year and a half later, some of the excitement has subsided, but the importance of tailoring sites for mobile should not be underestimated. As web designers and developers, we should continue to address mobile usage of our sites whenever appropriate.

The iPhone and other new devices like the G1 and the upcoming Palm Pre Fortunately these sights don’t require special code knowledge other than your standard HTML/CSS/AJAX/PHP/etc. The only difference between these sites and their full-sized standard counterparts is the attention paid to screen size and resolution. These phones and devices have fully functional web browsers that can take full advantage of all the latest web technologies (…err, when is full flash support coming to mobile?). And now with an unprecedented number of people regularly doing web browsing and searching on these high tech mobile phones, it would be considered unwise to ignore them. Those who have a good experience visiting a web address will remember and come back – even if visiting from their computers.

I can say from personal experience that if available, I will purposely favor visiting sites on my iPhone that have been tailored for it. These sites load faster, have all or most the features I need, are much easier to navigate without all the zooming in and out, and are easier to click through with my thumbs.

Tailoring for mobile is becoming more and more necessary but should avoid a few pitfalls.

Don’t over water down features, users will just yearn for the full site.
Always offer a way to get to the full site.
Don’t always force the user to use the mobile site. And watch for cookies that won’t let a phone navigate to the full site when desired.
Don’t forget that good design still matters. Even on a credit card sized screen.
iPhones are not forever. Design a mobile site that works well on other phones with modern browsers – like Android phones. These sites can hit a larger market and will last longer than the iPhone.
Don’t be afraid to use AJAX – this will speed up loading times and make the experience better.
It should (if possible) be a front end layer only. Use all the same data and assets from the full-size site. Ideally, Even the images could be pulled from assets already used in the full site.

So going into 2009, remember when designing a website to think about the mobile experience. Yes its one more thing to add to the list to support. It is however a unique design challenge that offers its own kind of satisfaction after completion. And besides, I think its finally safe to say that IE6 needs almost only minimal support at this point. So at least many of us can save some time and money there.

Note that the google interface for the G-1 is identical on the iPhone. This is likely because they use the very same code. Soon we will be able to rely on the fact that most new mobile browsers will display HTML in virtually the same way.