The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but what if you just want to design a site or form that looks like a native iPhone App?
This is where iWebKit comes in. iWebKit is a free framework package for creating websites and applications that are optimized for the iPod Touch, iPhone & iPad. The bulk of the framework is CSS3 which can work its magic to makeover any dreadful site and make it look fresh.
I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. Its documentation is excellent, so dig around or check out the demo site on your iPhone to get inspiration.
When designing for the iPhone OS, you should use the iPhone simulator available in the SDK to get an idea of where your design is heading. You can also use Safari to get a pretty close representation, but nothing beats using a real physical device. It’s amazing how cool it feels and you really do get the impression it’s a native application.
Getting Started
Here is what the form looks like on the iPhone before we optimize it.
It’s pretty dull looking, to say the least. Below is the original HTML code being used. We’re going to get Apple-blood running through it and give it a makeover.
<html><head><title>Test Form</title></head>
<body>
<form method="post">
Name: <input type="text" size="12" maxlength="12" name="name">
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>
This code needs to be in an HTML file in the same folder as the iWebKit framework. I called it index.html.
The first step is to add these lines between the <head> tags.
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" 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" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="homescreen.png"/>
<link href="startup.png" rel="apple-touch-startup-image" />
These lines tell the iPhone browser that this page is designed for it. It also references the CSS, JavaScript and images for the iPhone Home Screen and a startup image.
To create the top title bar we need to enter the following code immediately after the <body> tag.
<div id="topbar">
<div id="title">Test Form</div>
</div>
If you load up the page in your iPhone simulator browser you will see this bar at the top.
Now we need to start our main content with the following <div> tag.
<div id="content">
All the form fields will be inside of this <div> and we won’t close it till the end of the form. The first form fields we want are the Name and Password fields.
Replace the original code:
Name:<input type="text" size="12" maxlength="12" name="name"><br />
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
With this:
<ul class="pageitem">
<li class="bigfield"><input placeholder="Name" name="name" type="text" /></li>
<li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li>
</ul>
Our Name and Password fields have now been transformed.
The <ul> container represents the white box while the <li> tag is to signify separate sections inside of the white box. You could also put each of these fields in their own <ul> containers and they would look like two separate boxes. To save screen space, I group similar items together. Now lets replace those old fashioned radio buttons from the Gender question.
Replace this:
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
With this:
<span class="graytitle">Gender</span>
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Male</span>
<input name="gender" type="radio" value="M" />
</li>
<li class="radiobutton">
<span class="name">Female</span>
<input name="gender" type="radio" value="F" />
</li>
</ul>
The radio buttons are changed for the better.
Next up are the checkboxes under the Favorite Food question.
Replace this:
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
With this:
<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
<li class="checkbox">
<span class="name">Steak</span>
<input name="steak" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Pizza</span>
<input name="pizza" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Chicken</span>
<input name="chicken" type="checkbox" />
</li>
</ul>
Now instead of check boxes, we get those pretty on/off sliders we’re accustomed to inside the iPhone OS.
The textbox is pretty simple since it just creates a nice white box around the textbox.
Replace:
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
With this:
<ul class="pageitem">
<li class="textbox">
<textarea name="quote" rows="5">Enter your favorite quote!</textarea>
</li>
</ul>
Lets move on to the dropdown menus. Dropdowns always use the iPhone’s built-in method and help create the feeling of a native app.
Replace this:
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
With this:
<span class="graytitle">Level of Education</span>
<ul class="pageitem">
<li class="select">
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<span class="arrow"></span>
</li>
</ul>
Notice the arrow span class adds the down arrow to the right of the selection box.
As far as the form goes, all that’s left is the Submit button and to close the <div> tag.
Replace this:
<input name="Submit" type="submit" value="Submit" />
With this:
<ul class="pageitem">
<li class="button">
<input name="Submit" type="submit" value="Submit" />
</li>
</ul>
Now close the content <div> tag with the following:
</div>
Finally, we may want to put a footer at the bottom of our page. It’s nice to also support the iWebKit folks.
<div id="footer">
<a href="http://iwebkit.net">Powered by iWebKit</a>
</div>
That’s it for the HTML portion. Two nice little touches you can do are for when someone adds the page to their home screen. When browsing the page, click the “+” button and select the Add to Home Screen option. You will see an icon that, by default, is a screenshot of the page. You can customize this by making your own 58×58 pixel image and referring to it in the <head> section. Mine is named homescreen.png and I’ve already included the code at the beginning of the article.
Now when this page is added to the Home Screen, it will look and feel like a native app. Why not have a startup screen displayed while the page loads? iWebKit also has this feature and you simply need a 320×460 pixel image that again, is referenced in the <head> section. I have called mine startup.png.
That’s it, we’re done! iWebKit has many other features that you should check out. You may get some inspiration for an app or at least look good to your boss when you pretty up that old form that’s been around for years. All the files used in this article are also attached for your viewing pleasure along with a short video walkthrough of this tutorial.
Project Files: iwebkit-tutorial-files.zip (94 KB, ZIP)
Developers looking to beta test their apps before getting them into the App Store have a number of options for finding and communicating with beta testers, but few are as slick and easy to use as TestFlight. Now the provisioning tool gets even better, thanks to a number of updates in version two, which made its official debut on Monday.
Out of the box, Apple has you covered on your iPad 2 with 
iPad users aren’t stingy with their devices, according to a 
Scrabble
Words with Friends
Game Table
UNO HD
Strategery
Theme Checkers
Board Box
Ludo
Moonlight Mahjong
Honey, That’s Mine!
Software bundle web site MacHeist has unveiled its latest offer. The ‘
MacJournal (Retail: $39.95)
RipIt (Retail: $19.95)
Clips (Retail: $27)
CoverScout (Retail: $39.95)
Flow (Retail: $25)
Tales Of Monkey Island (Retail: $34.95)
RapidWeaver (Retail: $79)
Looking for people who is interested in auto sport to become a TestFlight pilot for up-coming new release of
My iPad Wish List: 10 App Requests
Watching the iPad’s first television spot on the Oscars Sunday night, I got giddy all over again in anticipation of getting my hands on this hot new product. Though it’s still a few weeks away, I’m even more excited for the applications that will be coming to the platform. Here’s my top 10 list of apps that I want to see developed for the iPad.
Coda
As a graphic designer and web developer, Coda is a staple in my workflow. It features a built-in FTP system, which could be problematic to port to a mobile device, considering there isn’t a traditional file structure to store data. However, perhaps the iPad’s new file storage system will provide an adequate solution. Regardless, as someone who codes, it would be awesome to sit next to a client and modify code and push changes to a site all from my iPad while they load and test the revisions on their own desktop.
Before you laugh, remember that Adobe has already released Photoshop Mobile for the iPhone, and all things considered, it’s not such a bad application. A larger iPad version could allow support for opening and manipulating native Photoshop files as well as working between multiple files. CS4 introduced a new tabbed approach to viewing multiple documents at once. A similar setup could easily be implemented on the iPad.
Katamari Damacy
What’s a fun touchscreen device without a fun game? Katamari already exists as an iPhone app so it’ll scale up decently on the iPad. But given the advanced graphics of the iPad and the larger screen, a native iPad version is a must. If you’ve never played Katamari, check out this clip below.
Call me crazy (it doesn’t hurt to be wishful) but the feasibility of an iMovie-like app is certainly within the realm of possibility. I would have never expected Apple to introduce video editing on the iPhone. Nevertheless, along with a video camera, the iPhone 3GS allows for simple video edits. Why couldn’t we have a larger implementation of this on the iPad, provided it gains a video camera at some point? With the larger screen, there’s plenty of room to view a larger timeline, add transitions or effects and with one tap, upload your masterpiece to YouTube.
iChat
I’m actually quite surprised this app still hasn’t made it to the iPhone yet, but as a platform that’s designed to be “the best way to experience the web, email, photos and video,” the iPad seems like the perfect device for iChat, especially if a future model gains a video camera.
There have been a number of third-party developers that have created similar apps for the iPhone, but I’m honestly shocked to see that Apple hasn’t implemented its own solution yet. With a larger screen and almost full-size keyboard, remotely accessing and interacting with other Macs on my network would be a breeze on the iPad.
Preview
While the iBooks application will open books that are in EPUB format, I’d love to see a more robust implementation of Preview available on the iPad (and iPhone). Specifically, an app that is capable of annotating PDF files and provides support for links within PDFs. Since I’m also an academic, some of the journals I read (as PDFs) contain bookmarks to other articles or chapters and currently, none of the built-in applications on the iPhone support interacting with them.
I don’t care how it has to happen or if it involves Flash or not. Who doesn’t want Hulu on the iPad? Even if it required a small subscription, I would love to be able to access my Hulu queue on the go. Better yet, since the iPad is a closed system, the app could download and cache content so it wouldn’t necessarily have to be streamed in real time. This could be a great solution to save AT&T’s crowded bandwidth for 3G models and allow WiFi-only models to still play even if a network isn’t around. I’d pay for that; would you?
Bento/Filemaker
Now that we have iWork, how about a real implementation of Bento (or FileMaker if that’s not too much to ask)? The current iPhone version is pretty pathetic and really hard to use to manipulate larger databases. While FileMaker may be a stretch, I’d put serious money on seeing an iPad version of Bento before the year is out.
It looks as though the new iTunes app represents a step ahead of the current iPhone version, but there are still some missing features that would make this app a rock star on the iPad. Adding support for Internet radio, browsing my other libraries by Home Sharing or support for iTunes Extras and LPs would be amazing. Honestly, why hasn’t Apple announced support of iTunes Extras and LPs? The specs call for a viewing area of 1280×720 (the 720p high definition standard). They also call for building your iTunes Extras with what’s called a bleed graphic, or a graphic that can “fill in the extra space” if you’re viewing it at a size greater than 1280×720. Now given that as a way to compensate for a difference in aspect ratios, if you were to scale down an iTunes Extra for the 1024×768 display, wouldn’t it just make sense? Come on, if the Apple TV can do it (and we all know how excited Apple gets about that product), shouldn’t the iPad as well?
What are your thoughts on apps you’d like to see? Share your thoughts in the comments below. The great thing about Apple’s developer community is that they keep up with what’s discussed in the blogosphere. You never know; a developer might see your suggestions. So, share what you’d like to see on the iPad!