Building an iPhone Compatible Version of your Website

Those of you who have business websites built with iWeb are probably already losing customers due to not having a mobile compatible version of your site. Smart phone users hate conventional sites and aren't going to waste their time trying to navigate and read them - never mind buy anything or give you their business.


Unfortunately, you cannot create a responsive website design like THIS using iWeb. What you can do is to create another version of your site that will make iPhone users happy and automatically direct them to it when they enter your website URL into the browser.

Copyright © Roddy McKay - 2009 - All Rights Reserved

Here's an example of an iWeb built site which has a separate version for the iPhone. If you are on a personal computer or tablet like the iPad you will get to the conventional website page.

Those on an iPhone will get sent to a different version which looks like the above images showing the top and the bottom of the page.

Click HERE to get another version with more advanced features.

Creating a version of an iWeb site for devices such as the iPad is simply a waste of time since most standard websites work fine on them.

Instead of detecting mobile devices in general, this one detects devices by screen width. The script is added to the index.html file for the main site and should only have to done once if you are uploading using an FTP app rather than the iWeb FTP.

On the other hand, the code that makes the mobile Safari menu bar disappear on load needs to be added to the HTML of each page post publishing. 

Mobile Site


The image to the left shows the Home page in iWeb.


The page inspector shows the various dimensions.


The navigation is made up from colored rectangles which are created as hyperlinks to the other pages. These should not be less than 30px in either dimension to give a large enough target for a fingertip.


The "Back to the top" button is created as shown on the Navigation page of this section of iWeb for Musicians.

Instructions


The iWeb Mobile Website ebook contains instructions for creating the site, uploading it to a sub domain of your main website and adding the code to divert smart phone users to the mobile version.


How to create iPhone compatible content, images, navigation, audio & video players, contact form and make the mobile browser menu bar disappear on load.


Click the image to the right for more info...

Mobile Website Design


Click HERE if you would like a mobile version of your website that works on all smart phones and tablets.


Go HERE for more examples of mobile website designs.

Next Page

Accordions


Click HERE for examples of accordions that can be used to create a mobile website.