Web Content Development primer for iPhone [Part 1]

by Anol on December 19, 2008

20081219-ms8diah4fq3wnwa8ys52isk7pm.jpg

At GetIT we are working on a web content development project for a client. The learning curve was steep, ’cause we never did mobile content development before and the resources are scattered all over the places. Here goes a primer of web content development for iPhone.

Quick Fix

iPhone’s Safari browser able to display the ‘real’ Internet, but you can make your site more accepting of the mobile browser. as a quick fix, add a <meta> tag that lets the iPhone know how wide to display the initial page.

<meta name=”viewport” content=”width=808” />

Every browser besides MobileSafari will ignore this information, apart from iPhone, it optimizes the viewport for your content. Since the iPhone displays the entire site zoomed out, specifying a viewport width means that the iPhone will zoom by default to that size, leaving less unused space around your content. In order to find the right width for your site, you’ll need to engage in a little old-fashioned trial and error.

Design web content ‘made for iPhone’

The safest way to start is to download a framework / webkit and design/code around that. Here are few useful ones:

  1. iui : User Interface (UI) Library for Safari development on iPhone, download from Google Codes. Based on Joe Hewitt’s iPhone navigation work, iUI has the following features:

    1. Create Navigational Menus and iPhone interfaces from standard HTML
    2. Use or knowledge of JavaScript is not required to create basic iPhone pages
    3. Ability to handle phone orientation changes
    4. Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)
    5. Download the 0.13 release from the Downloads page.
  2. UiUIKit (Universal iPhone UI Kit) : My favorite! It’s a collection of HTML examples of what can be done with CSS3 and Safari’s Webkit. The framework is based on 1 stylesheet and several HTML examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects. Download UiUIKit-2.1
  3. jPint : If you want your iPhone web content to look very similar to an app, use this. Only problem, everything needed to be on one page, i.e. not suitable for multi page content and not scalable. Download jPint from here.
  4. iWebKit: iWebKit is great because it is very easy to use, extremely fast, compatible & extendable. It is simple html that anyone can edit contrary to some other more complicated solutions based on ajax. Simplicity is the key! Only problem – when user press the Safari back button, the screen shows a blank page. Little bug – big consequence! Download iWebKitv 3.01
    UPDATE [25/12/08]: Christopher commented:
    iWebkit is really awsome. The problem with the blank page can be resolved by disabeling the sliding.
    It has multiple causes: can’t block safari caching and can’t set js timers.
    The next version is coming out tonight and a lot of sliding problems will be resolved. Not all.

Test your iPhone Content

To try out your iPhone content use iPhoney. iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development. And it’s free. iPhoney is not an iPhone simulator but instead is designed for web developers who want to create 320 by 480 (or 480 by 320) websites for use with iPhone. For more accurate depiction, use iPhone Simulator by Apple, which comes free with the iPhone SDK (free, but registration required).

Redirection for iPhone Friendly version
If you want your users to be redirected without any message add this to the head section of your homepage:

<script language=javascript> <!– if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {location.replace("iphone-version.html");}–> </script>

Make an webclip-icon for the content
when you click on the + sign in safari you can bookmark your page on the homescreen of your device. To create a webclip icon you need a a square PNG file that is at least 57×57 pixels of size. You don’t need to make it rounded. It will automaticly be resized on te ipod. Call the PNG file apple-touch-icon.png and put it in the root of the website with the index.html file. If you need to override the bookmark on a specific page, Use a different icon for a specific page, it’s possible by placing a rel link between the “head” tags of that page like this:
<link rel="apple-touch-icon" href="[ICONNAME].png"/>

That’s all for this round. In Part II I will discuss about

  1. Media contents
  2. Integrating with native iPhone apps
  3. Blog for iPhone and more

Stay tuned..

More resources:

  1. CSS iPhone Gallery for iPhone design inspirations.
  2. Put Your Content in My Pocket by Craig Hockenberry at A List Apart; (Part II)
  3. Apple—Developer Section
  4. iPhoneWebDev.com—A resource for more advanced information on the iPhone.
  5. John Allsopp’s CSS3 support on iPhone
  6. The iPhoneWebDev Google Group

{ 2 comments }

Christopher December 25, 2008 at 4:10 am

Iwebkit is really awsome. The problem with the blank page can be resolved by disabeling the sliding.
It has multiple causes: can’t block safari caching and can’t set js timers.
The next version is coming out tonight and a lot of sliding problems will be resolved. Not all.

Anol December 25, 2008 at 9:59 pm

Thanks Christopher. I must admit that iWebkit is the most easy to use framework of all, if sliding bug get resolved – it will rock!

{ 3 trackbacks }

Previous post:

Next post: