Best practices for building iPhone-adapted mobile sites
Eswar Priyadarshan, CTO
Featured
in
This year will be viewed
as the year that the mobile Web went from a question mark to a reality, thanks
to the Apple iPhone and its full Web browser capability.
Since the iPhone’s
launch, mobile Web traffic statistics from AT&T, Google and the Quattro
Network show that the iPhone audience is one that should be catered to and
capitalized upon as new and active browser territory.
Yet despite the
preponderance of mobile Web usage on the iPhone, there is still an opportunity
to enhance the experience.
To see
what I mean, check out the iPhone-specific sites for companies such as Facebook
(http://iphone.facebook.com), LinkedIn (http://iphone.linked.com), CollegeHumor
(http://iphone.collegehumor.com) and Realtor.com (http://iphone.realtor.com).
Compare them to their
“wired” companions on an iPhone. I think you will agree that the wired
equivalents are comparatively difficult to browse.
The adapted versions of
these same sites show a giant leap in site usability and performance with
optimal content layout, intuitive navigation, better display
and navigation for ads without sacrificing any of the site content.
Let’s drill down into the
design choices made by these iPhone-adapted sites and provide a rationale for
the decisions.
Lightweight pages
The average 300k wired
Web page will take about 90-100 seconds to download fully on an iPhone on the
AT&T EDGE (2.5G) network.
It will take 30 seconds
to download on the faster 3G network when AT&T and Apple upgrade completely
from 2.5G to 3G. A useful page size rule of thumb is to assume three seconds
for every 10k of page content on an EDGE/2.5G network and slightly below 1 second
per 10k on a 3G network. Assuming you want to have your pages load in the
3-7 second range, you should set your page size metrics to be no more than
25k-30k – thus allowing for more data because of image content in your pages.
One finger/thumb
navigation
The iPhone provides a
very powerful pinch-and-zoom technique to drill down within a page, but the
user gesture requires two hands for page navigation. Given that mobile
navigation is primarily done with one-hand (e.g. the other hand is holding a cup
of coffee), it is important to be able to navigate a site primarily by thumb
scroll and tap. Additionally, image galleries can be made much more
interactive by leveraging the iPhone browser’s JavaScript capabilities to
provide a dynamic click-and-zoom capability for individual images.
Fewer, more prominent
ads
One of the issues of
having a wired Web site rendered as mobile in the iPhone browser is that the
ads on the site appear small, illegible and difficult to click-through.
Reduce the number of ads on the page – perhaps down to three to four,
placed strategically along the page scroll – and ensure that the click-through
is easy and prominent.
Absence
of Flash
The iPhone does not run
the Adobe Flash Player. Recent statements from Steve Jobs, CEO of Apple,
indicate that it is unlikely to ever run the Flash player. You therefore have a
dead-zone for all the Flash sections in your site. You should consider
replacing the Flash sections with Ajax-equivalent interactive content.
iPhone users are increasingly getting used to and coming to expect a quality
and snappy user experience from their favorite sites. Consumers may not
know or care that the site was adapted for the iPhone. But based on traffic
patterns that we have observed on our network, your extra effort will be amply
rewarded with more repeat visits and deeper page views per visit.
Try check the site http://mobil.mobstart.dk
They got a lot of cool iPhone link under the category iPhone
Rich
Posted by: Rich B | April 07, 2009 at 11:26 AM