Have you checked your web site statistics recently? If yes, have you looked at the percentage of traffic from mobile devices on your site? You might be surprised.
It’s all Apple…
The astonishing fact of the statistics I have access to, is that over 90% of all mobile traffic comes from iPhones or iPods, leaving Blackberry and Android powered devices back in the dust.
On certain sites, these Apple devices are responsible for 1%-3.5% of all traffic. This number is even more impressive if you consider that these sites do not offer a optimized interface for the reduced viewing area.
Internet access from mobile devices will certainly not decline in the near future. On the contrary it is more likely that user interfaces optimized for mobile devices will encourage their use.
Creating an iPhone optimized site
Being aware of the mobile situation, we wanted to be prepared for the first client that wanted to add a mobile site to its current web presentation. It was natural to use our own site as a playground. The strategy was quite simple: adapt content and interface for the iPhone while using the existing content.
Mobile content
It must be noted that not all content is appropriate for mobile users - after all they're busy and on-the-go. Offering only the most relevant or newest content will make navigating a mobile site easier. The r42 mobile site contains only the complete blog, the portfolio list, contact and about page.
Additionally, our mobile site offers the possibility to leave the mobile version and get access to the full version on any page. This eliminates frustration for someone who is actually looking for something that has been excluded from the mobile version.
The interface offers only 4 sections. The portfolio is only an overview, complete project descriptions are only available in the regular site.
Interface
There are two facts to consider: Mobile devices have very small screens and are often touch screen devices which require a simple and uncluttered interface design. Also, loading a page takes considerably longer than with a desktop browser, which is why the navigation model should allow the user to get to the content with one or two clicks.
Another aspect worth mentioning here is the fact that an iPhone has two different viewports: a horizontal and a vertical. Therefore the layout needs to be fluid, text must flow and images be scaled on the fly.
Type gets bigger automatically if you hold the iPhone horizontally and the image is scaled to the full view port.
Reusing the same content
For smaller organisations with limited resources, the key for a successful mobile site is to reuse the content from the regular site. This saves updating two sites which would cost more in resources.
For our site, because all content is stored in a database this seemed not to be an issue, That's not to say there were no hurdles; like making images fit the smaller viewport and automatically removing links to pages that do not exist in the mobile environment.
Thanks to the very flexible architecture of Kentico all these issues did not take up too much time and our new mobile site is online.