How can you enhance iPhone or iPod touch web applications? Web apps are web pages, but the iPhone and iPod add several extra CSS and HTML extensions. Here we look at how you can optimize some web apps for the iPhone and iPod without too many headaches.
This page offers tips on how to develop web applications for the iPhone or iPod.
First, 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 element. 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.
Tip: Try changing the type to "search".
Input tag [HTML]
<input type="text"
autocorrect="off"
autocapitalize="off"
placeholder="Letters" />Here we note that you can magnify the 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 element [HTML]
<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>You can change the size of inputs with text size adjust statements. 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:
Input rule [CSS]
/* This css changes the size of the input elements */
input {
-webkit-text-size-adjust: 140%;
}
You can improve the appearance with techniques such as 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.
Custom styles [CSS]
/* 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.
kulerInput 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.
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.
Body margin
15 pixels on the top
Surrounding div padding
6 pixels on left and right
Body text size
8 point to 14pt
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.
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:
Link element [HTML] <!-- Put the following line in your HTML markup. --> <link rel="apple-touch-icon" href="image.png" />
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 users with something nasty-looking.
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.
Here we looked at how you can improve the user interface on iPhone web applications targeting the Safari web browser. 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.
Dot Net Perls