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 necessary, but avoid these pitfalls:
- Don’t water down the 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.
In part 2 of this topic, I’ll go through some good examples of sites that currently tailor their experience for mobile (right now that most likely means the iPhone).
