As an ongoing effort to make my website as accessible as possible, I’ve decided to make an iPhone friendly version of my website.
While searching through google I discovered iWebkit. iWebkit is a site template that makes creating iPhone websites a breeze. By dropping the files on your server you can create a website by following the included guide.
This will be the first in a series of posts showing you how to create a killer iPhone site using iWebkit.
Part 1: Installation
iWebkit can be downloaded from the www.iwebkit.net. I suggest that before you do anything you set up a subdomain for your iPhone site (i.e. iphone.gimpneek.com) this can be done in your control panel for your website and makes it easier for users to remember the url.
Once you have the subdomain set up, open the iWebkit folder and copy the contents of the framework folder into the subdomains root folder. When you view the site you will see an empty iPhone style page. If you don’t see this make sure you have copied all the files into the folder on the server.
You can edit this page by adding the various HTML code to the file. First off we’ll be building an ‘Under Construction’ page. This will let anyone viewing the site that we are still working on it and give them a way to view your normal website.
Editing the template
The body of the page is made up of 3 divs: topbar, content and footer.
Topbar contains everything that will be in the header bar, so things like the page title, any navigation elements etc.
Content is where you’ll be adding your content (duh…). This can contain lists, pictures and paragraphs of text.
Footer contains the made with iWebkit text, though you could add copyright information.
Inside the topbar div add the following code:
div id="title">iPhone /div
div id="leftbutton"> a href="http://www.example.com"> Normal Site /a /div
This will add the page’s title and a button on the left that leads to the non-iPhone version of your site. This can be replaced later with a home button.
In the content div add the following code:
ul class="pageitem"
li class="textbox"> This site is currently under construction, please come back later /li
/ul
This will add a text box to the page. You can split up page content by using different ul and li tags.
You don’t need to change the footer just yet. So at the moment your page is just a static website that says the page is under constuction. In the next post I’ll show you how to add a popup that alerts the user that the website is still under construction and navigates them to your normal website.
) I had some fun today learning that the site I’ve put together is too big. As I’m on a Mac Pro with a HDTV as my monitor, my screen res is 1680×1050 and thats what I made it for. When I went to test it on 1024×768 there was mayhem because I was using fixed positioning. I sorted it out in the end though. You can see the front page at