This tutorial has been updated. You can now see a video tutorial on how to make an iWeb site mobile friendly.
We all know how sucessful Apple’s iPhone has become since it’s 3G version was released and now the iPhone 3G S is out and selling like hot cakes, the mobile internet is going to get even faster, and even more popular.
As a rule your iWeb site will work on an iPhone without to much hassle (unless you have added some flash obviously) however there are a few little tweaks that you can make here and there to make it even more iPhone friendly.
The process of adding a favicon for iPhone users is a relatively simple one. To begin with you need a few image making skills. Your favicon needs to be 57px x 57px and saved as a PNG file. Normally favicons are saved as a ICO file so note the difference.
You also need to save it as ‘apple-touch-icon.png’ (without the quotation marks). If you now upload this image to the folder that contains your site (either on MobileMe or via FTP to a third-party host) that should be all you need to do.
There is the fallback however of adding some code to your iWeb pages, but this needs to be done once you have saved your site to a folder on your Mac. You will have to open each page individually in a text editor and within the ‘Head’ section of the page add the following HTML:
Now when a iPhone user adds you as a bookmark, they get your favicon too.
Make your phone number clickable.
Every web-site should have some form of contact details available to the visitor, but with the iPhone enable site you can add your telephone number and have people call you directly. Simply add the following code to an HTML Snippet and your telephone number will appear as a hyperlink.
Obviously you have to replace the phone number with your own in both instances.
Change the width of your site.
By default iWeb sets the width of your site to 700px. This is a fallback to when 800 x 600 was still a popular screen resolution. Thankfully those times have passed and even the iPhone can handle web-sites of 980px wide.
To change the width of your site open Inspector and select the ‘Page Layout’ icon (far left). Next choose the ‘Layout’ button and adjust the width of your site to suit.
Sort out your Google Maps.
One of the widgets that became available in iWeb 08 and 09 is the ability to add Google Maps to your iWeb site. These however, do not render well on an iPhone. Instead we have to insert a bit of code via an HTML Snippet to have the map show up better.
Once again you will have to change the name of the place from ‘Paris’ to whatever you want it to be.
Optimize your images.
One further piece of advice would be to ensure all your images are optimized. Despite the speed that 3G and 3G+ gives us loads of images mean slower sites and possibly bigger phone bills for your iWeb site’s visitors. Keep images small and to a minimum.
You should also check in your iWeb preferences to make sure that ‘images are optimized on import’.
Of course you could make all these changes to your existing site or you could make an additional one designed just for iPhones and incorporate all of the above tips.
Do you have an iPhone optimsed site? Why not leave the URL in a comment and let us take a look.