Weekend Projects: Make Your Site iPhone Friendly
Posted on March 29th, 2008
Around 4 million or more iPhone’s have been sold and are being used to surf the Internet. As time goes on more people will be surfing the Internet using a web phone of one type or another. This week we will focus on making our site or blog more iPhone friendly so that those who are surfing our site using an iPhone will not be lost.
Apple Touch Icon
Like a favorite icon for your web browser the iPhone has the ability to save a page to a touch icon so users can quickly access that site again. The touch icon is a 57 x 57 png image that you can set in your header. To get started you will need to create the png icon. For those that are graphically inclined just open your logo and shrink it down to 57 x 57 (you can do any box shape and the iphone will shrink it down to 57 x 57) and be sure to save it as a png. For those not so graphically inclined do the following…
- Choose an image or logo that is bigger then 57 x 57. If it is already boxed shape that will help but is not required.
- Go to this online image resize page. Once there upload your image you picked. Set the image size to 57 pixels for both height and width and save the file as a PNG. Download the image and save it somewhere you can find it.
- Rename the file apple-touch-icon.png. In windows just click on the image and press F2 and you can rename it.
- Upload the apple-touch-icon.png to your site or blog root folder.
- On your index page add the following code to your header <link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
- Save your page and your done. Your icon will look something like the below screenshot on the iphone.
iPhone Theme for your Blog
If you have a blog then odds are people with an iPhone will try and surf it. Installing an iPhone theme for your blog will make it easier for them to surf your blog. I have installed the iWPhone theme and plugin on to this blog. If you install it your blog will look like below.
Redirect iPhone users to a Separate Site
If you do not have a blog and want to push iPhone users to another folder where you can then develop a more iPhone friendly design add the following to your .htaccess…
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^Mozilla.*iPhone.*
RewriteRule ^index\.html$ iPhone/index.html
If you get stuck let me know in the comments.
PS - Thanks to Matt and Brady for the screenshots.
Posted in Weekend Projects | 1,696 views
Related Topics:
Weekend Projects - Make Your Site iPhone Friendly Part 2iPhone Friendly Domain RegistrationWeekend Projects: Make Your Site Blackberry FriendlyWeekend Projects - Optimize Your CodeWeekend Projects: Make Your Site Android Friendly
1 Comment
Sorry, the comment form is closed at this time.
Just a note, that if the icon is named apple-touch-icon.png and in your site root then the head code is not required.