We’ve previously discussed using the iUI framework for creating iPhone-ready websites, but there’s another player in the iPhone framework market, and that’s iWebkit. This week we’ll look at how you can use iWebkit to create an iPhone ready website that looks and acts like a native application!
What Exactly Is iWebkit?
As the iWebkit website states, iWebkit is a “file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.” iWebkit uses basic HTML, CSS and JavaScript to allow anyone who has basic web skills to create a fairly complex website that is optimized to look and act like a native iPhone application. Sound complicated? It’s not that bad.
To start with, here’s a look at a basic page I created using iWebkit for our own HTMLGoodies website. You can check out the page live on your iPhone right here. On normal desktop browsers it will still work, but it fits the screen of the iPhone just right.
Although it may look complicated, here is all the code that is used to create the page shown above:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html ><head>
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<link href=”images/logo_bg.png” rel=”apple-touch-startup-image” />
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<meta content=”minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no” name=”viewport” />
<link href=”css/style.css” rel=”stylesheet” media=”screen” type=”text/css” />
<script src=”javascript/functions.js” type=”text/javascript”></script>
<title>HTMLGoodies: The Ultimate HTML Resource</title>
<meta content=”html, help, free images, goodies, color codes, tutorial, html basics,
basic html, tutorials, color codes, hex codes, image map, javascript onclick, backgrounds, onmouseover, learn html,
javascript, css, java, window, htmlgoodies.com, php, vbscript, asp” name=”keywords” />
<meta content=”Free html tutorials and help, images, color codes and more for the
web developer. Featuring tutorials on HTML tags, programming, basics, JavaScript,
frames, hex codes and more. Our weekly newsletter provides the latest information
for developers” name=”description” />
</head><body>
<div id=”topbar” class=”transparent”>
<div id=”title”>HTMLGoodies: Ultimate HTML Resource</div>
<div id=”leftbutton”><a href=”https://www.htmlgoodies.com/”><img alt=”home” src=”images/home.png”></a></div>
</div><div class=”searchbox”><form action=”http://search.internet.com/htmlgoodies.earthweb.com” method=”post”><fieldset>
<input type=”hidden” name=”IC_StartNumber” value=”0″>
<input type=”hidden” name=”IC_BatchSize” value=”10″>
<input type=”hidden” name=”IC_RelevanceThreshold” value=”30″>
<input type=”hidden”
name=”IC_QueryDatabase” value=”htmlgoodies.earthweb.com”>
<input
id=”search” name=”IC_QueryText” placeholder=”search” type=”text” /><input id=”submit”
type=”hidden” />
</fieldset></form></div><div id=”content”>
<span class=”graytitle”>HTMLGoodies Tutorials and Features</span>
<ul class=”pageitem”>
<li class=”menu”>
<a href=”https://www.htmlgoodies.com/html/html-4-0-getting-started/”>
<img alt=”Description” src=”thumbs/notepad.png” />
<span class=”name”>HTML</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/html5/css-3d-transform/”>
<img alt=”Description” src=”thumbs/basics.png” />
<span class=”name”>Cascading Style Sheets</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/news/javascript-adds-async-and-shared-memory/”>
<img alt=”Description” src=”thumbs/start.png” />
<span class=”name”>JavaScript</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/html5/seo-and-html5/”>
<img alt=”Description” src=”thumbs/accessibility.png” />
<span class=”name”>Search Engine Optimization</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/news/video-seo-basics-for-developers-keyword-research/”>
<img alt=”Description” src=”thumbs/video.png” />
<span class=”name”>Web Video</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/beyond/webmaster/”>
<img alt=”Description” src=”thumbs/ipod.png” />
<span class=”name”>Mobile Development</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/beyond/reference/”>
<img alt=”Description” src=”thumbs/other.png” />
<span class=”name”>Web Dev Reference</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/daily_news/”>
<img alt=”Description” src=”thumbs/settings.png” />
<span class=”name”>Web Developer News</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/getting-started/”>
<img alt=”Description” src=”thumbs/help.png” />
<span class=”name”>About HTMLGoodies</span><span class=”arrow”></span>
</a>
</li><li class=”menu”>
<a href=”https://www.htmlgoodies.com/feed/”>
<img alt=”Description” src=”thumbs/help.png” />
<span class=”name”>HTMLGoodies RSS Feed</span><span class=”arrow”></span>
</a>
</li></ul>
</div>
<div id=”footer”>
<!– Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for our work 🙂 –>
<a class=”noeffect” href=”http://iwebkit.net”>Powered by iWebKit</a></div></body>
</html>
Where We Are At
At this point, we have the initial iPhone-ready page set up. We still need to add sub-menus, but that’s for later. For now, you can see that the HTML itself is not that difficult, and we will show you what you need to change in order to create your own iPhone-optimized website using iWebkit. Obviously you will need to download the iWebkit, and have it on your local machine. When you are done editing it, you will need to upload the whole shebang, image file, JavaScript files and all to your web host. Assuming you have done all that, we can move on.
The first thing you will need to edit will be the flash screen logo:
<link href=”images/logo_bg.png” rel=”apple-touch-startup-image” />
This shows up as your “app” is loading. You just need to change the href to the location and name where your own flash screen is located. Note that it will need to be a 320×460 .png file, no larger, no smaller.
Next, not relating specifically to iPhone or iPad development, you will need to update the meta descriptions and keywords relating to your site. On to the body. Well, the top part of the body, called the Top Bar. This is the first part of the page that an iPhone user will see. You have the option to make it black or transparent
using class=”black” or class=”transparent” to the topbar <div>, like this:
<div id=”topbar” class=”black”></div>
<div id=”topbar” class=”transparent”></div>
The home icon/arrow on the left in the image above is created using another div within the topbar div, as shown here:
< id=”leftnav”> <a href=”page.html”><img alt=”home” src=”images/home.
png” /> </a> </div>
Note that we could have also used text instead of the image for Home, and we can also add a link/image on the right side of the top bar, using similar coding. For a full discussion of how to use the iWebkit to do all of this, check out the iWebKit5 User guide, which is provided when you download iWebkit (which is free, btw).
Next we’ll show you how to change the menus, add forms, and even use videos within your web app. We’re going to continue with our iPhone-ready website, and add sub-menus, links to our articles, and then we’re going to try to optimize some content that’s already published for the iPhone.
