34 Comments

Summary:

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 […]

iwebkit_thumb

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" rel="stylesheet" />
<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)

  1. [...] Idea is to create the skeleton of the web app, then style is to the iPhone using CSS. And in the end, you will get something like the image below. You can read the full tutorial here. [...]

    Share
  2. [...] How-To: Create an iPhone Web App – [...]

    Share
  3. Excellent post!

    I have already created an app but I think that the code you have here might be better. I used “iui” and now I am interested in seeing if the iwebkit code performs better.

    You can view my webapp from your device here: http://www.mikepascoe.com/3415/

    - Mike

    Share
  4. I am going to create one now ….. thanx for the tut :)

    Share
  5. I thought Apps are developed in Objective C?

    Share
    1. Apps that you download from the App Store (native apps) are written in Objective-C. Before there was an iPhone SDK, people created web sites that looked like native apps, but were just web pages. Even with native apps, developers are integrating the web into those apps and it’s hard to tell that you’re actually looking at a web page sometimes. This is good if you already have some part of an application that is a web app and don’t want to rewrite it as a native app.

      Share
  6. [...] How-To: Create an iPhone Web App The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but [...] [...]

    Share
  7. This is so cool! I just got an iPhone about a month ago and I love it. I have always wanted to create a web app with it, but never really knew where to start

    Share
  8. [...] How-To: Create an iPhone Web App (tags: webdesign tutorials css html programming design webapp tutorial app iphone) [...]

    Share
  9. [...] Como crear una aplicación para el iPhone e iPad [ENG] theappleblog.com/2010/02/12/how-to-create-an-iphone-web-app/  por Libey hace 2 segundos [...]

    Share
  10. [...] How-To: Create an iPhone Web App The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but [...] [...]

    Share
  11. So when does the iPhone optimised version of The Apple Blog come out?

    =]:

    Share
  12. [...] Bei TAB widmet man sich der Erstellung eigener Web-Applikationen und hat mit “How-To: Create an iPhone Web App” nun ein ausführliches Einsteiger-Tutorial veröffentlicht. Die englische Schritt-für-Schritt Anleitung beschreibt die iWebKit-Integration in eure Inhalte und ist nicht nur ordentlich bebildert sondern auch durch ein 13 Minuten langes How-To Video (Direkt-Link) abgerundet. Die in der Anleitung benutzten Beispiel-Dateien lassen sich ebenfalls herunterladen. [...]

    Share
  13. Seriously, can you guys at least apply a modicum of web standards to this.

    Favorite Food:
    Steak:
    Pizza:
    Chicken:

    should, at a minimum, be:
    Favorite Food:
    Steak:
    Pizza:
    Chicken:

    Share
  14. This is a great posting. We’ve been considering an iPhone application for DrinkedIn and I think that after reading your article, we’ll definitely have it in our roadmap.

    I’m curious as to how to leverage the API for GPS functionality. I want location to be part of the app. If anyone has experience with this, please contact the admin at http://DrinkedIn.net as we would be very interested in a project.

    Share
    1. Hi,

      I am using a geolocation functionality, but not the one built-in the IPhone. Though I know it is possible to use it from Safari.

      Please feel free to test our app

      http://www.mobipolls.com

      and contact us to discuss this further

      Share
  15. Fantastic!
    This is the best way to have a small iPhone app without the need to run through Apple validation and approval!

    Share
  16. I’m not sure my comment went through. I was talking about associating IWebkit with CMS such as Drupal.

    We did that in our app and we are very satisfied with the results.

    http://www.mobipolls.com gives users the chance to get free ITunes codes simply by answering on-line surveys from their IPhone or IPod touch.

    Share
  17. [...] February 15, 2010 · Leave a Comment Just wanted to post this little article about how to create an iPhone Web app. If you’re looking to create an interface to an application you want to convert into an iPhone compatible site by using Webkit. Have a look here for info on the How To [...]

    Share
  18. nice post. i’ve dabbled on this in the past to create a POC…i used webapp.net (http://webapp-net.com/) back then…i wonder how this one compares?

    Share
  19. [...] How-To: Create an iPhone Web App (tags: iphone webdesign css html design) This was written by andy. Posted on Wednesday, February 17, 2010, at 1:36 am. Filed under Delicious. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. [...]

    Share
  20. [...] filed in Development on Feb.17, 2010 how to create an iphone web app [...]

    Share
  21. [...] How-To: Create an iPhone Web App – erklärt bei theAppleBlog. [...]

    Share
  22. Does it work for Android too?

    Share
    1. According to iwebkit, it does.

      Share
  23. Cool Tutorial – Thanks.
    Do you know if this would work on the Android platform?

    Share
  24. Just as note, the example for download is correct but you are missing rel=”stylesheet” in the first step meta tags. Without it the page would show up nicely but not with the table form expected. The tutorial is very nice though.

    Share
  25. thanks for this interesting tuturial. Now I’m looking for a way how to open an URL after an option value is selected in the dropdown menu. Is it possible just to add a link or do I have to add some event handling with JavaScript?

    Share
  26. The questions + comments arising from this article, not to mention the quality of the code given as examples, definitely show why Apple steps in to prevent anyone from creating apps.

    @Pedromiramis: as with all forms in x/html, if you don’t want a standard form interaction you will need to trigger the resulting behaviour via javascript callbacks. Please note, however, to ensure that you do this using progressive enhancement – ie: I can still submit the form like normal and it will work. Hence use event listeners.

    Share
  27. Thanks, Joel. Function follows form. Now I understand the reach of the iWebKit framework.

    Share
  28. [...] 以下の記事でコードなども詳しく紹介されています。 How-To: Create an iPhone Web App   ちなみにiWebKitのデモページはこちら。iPhoneからアクセスできます。 [...]

    Share
  29. I have used the iwebkit since last summer and it is pretty nice. After a while, I ran into limitation when some css use fixed size. So, I was able to customize it to make textboxes wider and ul/li tags to expand in height if width is too long. So that helped because the website need to be a bit more flexible only when needed.

    Share
  30. I found the first great site that talks about how to make an iPad website. it gives detailed information about viewports, flash image swap, and lightview popup.

    http://www.combsconsulting.com/ipad-website-example/

    Share
  31. [...] if I want to learn. So I started looking around for alternative ways to create an iPhone app. I had already created web apps using iWebKit so the idea of using HTML and JavaScript is very [...]

    Share
  32. Hi, nice post :)

    I was wondering if anybody knows if it is possible to get a contact icon/button beside a textfield and allow visitors to click it and let them select a contact from their iphone. When they have selected the contact, that contacts phone number is sent to the textfield?

    Share
  33. This is great thanks, I’ve always wanted to know how to create an iPhone app and now I can! Thanks!

    Share
  34. [...] CSS. And in the end, you will get something like the image below. You can read the full tutorial here. You can read the full tutorial [...]

    Share
  35. just wondering if any of you guys can root a droid.

    Share
  36. Awesome post!

    I don’t really like web apps, but sometimes we have to develop one and if a had found this post like 1 year ago, it would be very useful.

    New “web app people” will love it!

    Share
  37. iWebKit is pretty interesting but I don’t think you can post app made with it to app store because as far as i know it cant be compiled to native objective c. You can also use phonegap to make webapps and compile them to objective c which should be accepted in appstore but phonegap works only on mac.

    Share
  38. Hey guys, I think it’s a nice post about iPhone App. But if you wanna know more detail of

    it, feel comfort to check this out “How to create an i-phone app. Thanks.

    Share
    1. Hey guys, I think it’s a nice post about iPhone App. But if you wanna know more detail of it, feel comfort to check this out “How to create an i-phone app Thanks.

      Share
      1. What the hell is this. Why can’t i make url, help plz.

        Share
    2. ey guys, I think it’s a nice post about iPhone App. But if you wanna know more detail of it, feel comfort to check this out “How to

      create an i-phone app

      Share
  39. Excellent post.

    Is there a way to sell a web app? That is, can I do this entire process, but sell it as an app on the AppStore? (I know it would require some kind of authentication or anyone could just browse to the site.)

    I guess, what I’m asking is: can I make a real app, that simply points to the webapp right away (passing some kind of key). That way it will REALLY look like an app.

    Share
  40. This is not an Iphone App…

    This is just a web page that looks like an app, app is something that you download in your iphone/ipad.

    In iphone you can create a link to to a web page, and if that web page has a little content, that looks like an iphone app.

    Share
  41. Darren Campan Friday, February 4, 2011

    Great post, I’ve just created a web app for work and it works a treat. my only issue is the check boxes, is it possible they could say anything else apart from on/off? ideally yes/no.

    Share
  42. How-To: Create an iPhone Web App: Apple News, Tips and Reviews « http://t.co/OlB5kuml

    Share
  43. How-To: Create an iPhone Web App: Apple News, Tips and Reviews « http://t.co/yVisrESe

    Share
  44. How-To: Create an iPhone Web App http://t.co/PgYaHV13

    Share

Comments have been disabled for this post