Archive for August 2008

How to optimize a website for Mobile Safari

I though that the iPhone and iPod touch would be not able to play a big role in the development of websites. When you see the developing of mobile market, you will understand, that I was wrong. It is very iportant to optimize websites for mobile browsers, such es Mobile Safari. Although the percentage is still under 1%, but it looks like that this number will be greater with earch day. The new mobile player and mobile phone from Apple are very popular worldwide. The sales numbers growing steadily. Soon, Russia’s will get iPhone officially presented. According to my knowledge is the percentage of cell phone owners, who uses mobile services, in Russia, very high. If China would get iPhone officially than the number of iPhone users will much much bigger. For Internet sites, which designed for international audiences, it is a large market. Exactly that’s why I would like to tell about some interesting and useful tips here:

Viewport:
Mobile Safari is able to show normal websites on the iPhone and iPod Toch. However, for some designs it would be useful, to hide a part of the design. For example, if a website has a design where the real site is oriented to the left and at the right side it has free space, it woulb be useful to hide the free space, so the user could see only an important part of the website.
To achieve this you should use meta-Teg viewport:
<meta name=”viewport content=”width=480″>
The number 480 stands for the number of pixels and the word „width“ for width, where Mobile Safari should center the view.

Favicon:
I think, I don’t need to explain the term favicon, because each web page developer and many users know what it is.
To use favicon in Mobile Safari, you should add this meta tag:
<link rel=apple-touch-icon” href=”favicon.png”>

Internal applications:

Most importantly, if you would like to give users a way to dial a number, by clicking it in the browser of the phone, you should use the following tag:
<a href=”tel:911″>911</ a>

To link a location in Google Maps you should write something like this:
<a href=”http://maps.google.com/maps?q=bahnhofstrasse+1+55116+Mainz”>Mainz</ a>

YouTube video link:
Although iPhone uses a separate program for playing videos from YouTube, you can link those videos with a normal link, as you do it on the PC.