iPhone Web App Example Code

Problem

Learn ways to enhance iPhone or iPod touch web applications. Web apps are web pages, but the iPhone and iPod add several extra CSS and HTML extensions. Mainly the problems we need solved involve resized content and input fields, along with some image issues.

Solution

I learned that you can optimize some web apps for the iPhone and iPod without too many headaches. The solution here comes in many parts. Let's get started with the iPhone and iPod-specific markup rules. The most important thing to take from this page is the text magnification hints.

Simplify text input

Some iPhone text input features don't make sense on many applications, such as one with an input that accepts names or codes. For your input text boxes, add some of the following attributes on the input tag. If the iPhone detects the word search, it will put a search button in the bottom right corner when the user taps the input box.

<input type="text" or "search" 
       autocorrect="off"
       autocapitalize="off"
       placeholder="Letters" / >

How can we magnify text?

With a special tag. The most important change is to the resize the viewport, thus zooming in the content and creating a page that the mobile Safari user can see. You will need to put a special tag in your page's HEAD element. The following code block contains two lines, and you should only use one of them (preferably the second).

<head>
    <!-- good but not ideal -->
    <meta name="viewport" content="width=device-width" />

    <!-- use this line instead -->
    <meta name="viewport" content="width=device-width,user-scalable=no" />
</head>

How can we change input size?

With text size adjusts. In my experience, pages need the input fields' text sizes adjusted upwards. This means the text box doesn't need to be zoomed into when the user starts typing. The next thing is to change the sizes of certain elements for viewing on the iPhone and iPod. In CSS, use this:

/* This css changes the size of the input elements */
input {
    -webkit-text-size-adjust: 140%;
}

How can we make it visually appealing?

Use corner radiuses. A very valuable change is to use corner rounding on your block-level elements such as divs. Also, just to keep Mozilla Firefox in the loop, you should have it round corners too. Another thing to consider is text shadow. Here are some visual effects CSS code examples.

/* rounded corners in safari on a div */
div {
    -webkit-border-radius: 10px;
}
/* for firefox */
div {
    -moz-border-radius: 10px;
}
/* cool shadow, but maybe not useful */
h1 {
    text-shadow: 2px 2px 6px black;
}

Color schemes
Do Google searches for HTML color samples or visit Adobe Kuler. Make sure you get a good color scheme--please, no HTML yellow or red or blue. Try out a few different schemes, from bright and shiny colors to light backgrounds and pastels.
Input styling
I don't set any complex style properties on input boxes. These just look awful in Internet Explorer. I just use the text-size-adjust rule on the input elements to increase their size on the iPhone. That makes it pretty for iPhone-users, and doesn't mess with the default on the desktop.
Eliminate clutter
Reduce clutter to an absolute minimum. People don't want to see a ton of links--they want to use your app, so make it as nice as possible for them to use it.
External links
Don't use a lot of links to the regular web--if you have some "about this program" you want to show, make it use a special screen within your web app. People will be really impressed and will actually read your about information this way.

What are the best content sizes?

Pages that take up 100% of the width work well for me. Padding should be 8 pixels or less on the outside edges of the main div. If you make it any larger, you lose too much space. Padding can be greater vertically, but don't make it any greater than 20 pixels. Here are some constant sizes that I have had success with.

Page element	Information or dimensions
Body margin	15 pixels on the top
Surrounding div padding	6 pixels on left and right
Body text size	8 point to 14 pt Works well with the text-size-adjust I noted above
Div max-width	I use max-width on the div to make it look great on the desktop I like a max-width of 500-600 pixels on the desktop.

Make your home screen image

Yet another really important thing to do is to make an iPhone icon. This is so people can add your program to their home screen with the + button. On these mobile devices, people really will add your application to their home screen if it is any good--my applications have been added well over 2,000 times in a couple months. Here's the special HTML you must add:

<!-- Put the following line in your HTML markup. -->
<link rel="apple-touch-icon" href="image.png" />

Home screen details

The home screen PNG image must be 57 by 57 pixels. Apple's software will apply pretty shines to it, so just make something simple. Simple is ideal--just some letters, or a two-color icon, on a nice solid color would be wonderful. Remember, it is better to be minimalistic instead of presenting people with something nasty-looking.

What about the directory screenshot?

You need a screenshot to use for Apple's Web Apps directory. People want to make sure that your program isn't going to show them something ugly or distasteful. Open Safari 3.1.1, and look on Apple's guidelines. You will need to resize the viewport of desktop Safari to a smaller size. I wasn't able to get it to 320 by 356 pixels, but I got an approximation.

Conclusion

Getting a web app at Apple's directory working correctly for the first time is challenging, but it is a rewarding experience. My web apps have been used over 150,000 times in the first month they have been available. It is an interesting and fascinating emerging technology, and my guess is that mobile Internet technology will become more prevalent in the future.

Examples

This article wouldn't be complete without the links to my two web apps. First, Naming Helper is on this site, and is also listed in Apple's directory. If you look at the main listings you can see the Staff Pick designation. My anagram program is also available here.

Dot Net Perls is dedicated to sharing code and knowledge. It has

150 articles focusing on C# and .NET programming
4 Internet articles similar to this one
A companion source code viewer