[LukeGab]

Here's a guide that I made if you are planning on making a web app. It contains images, tips, and references to get you started. Feel free to comment and correct me on spelling errors, broken links, etc.



What is a Web App?

Web Applications, or Web Apps, are websites designed specifically for the iPhone/iPod Touch. They give the feel of a normal application. They can be games, utilities, sports, you name it! Apple hosts many of the web apps available right on there website. Click Here to view them. You will find that this is already in your iPhone's bookmarks.

Web Apps can be added to the Home Screen as Web Clips by tapping the Plus symbol at the bottom of your browser. With this you can quickly get to your favorite web page without having to go to the Bookmarks in Safari. Note: iPod Touch firmware 1.1.3 and above required!


How To Make Web Clips

Making web clips couldn't be easier. Find a image you would like to use and crop it to 60 x 60. Name it apple-touch-icon.png and throw it into the root folder of your website and your done! Don't worry, your iPhone will automatically add the rounded shape, crop the image if need to, and give it the 'glossy' effect to make it fit in with the other icons around it.


Before Designing a Web App

There are several questions you need to ask yourself before you attempt this. Take a look at the following:

"Is my Web App idea useful?"

I've been seeing a lot of Apps beeing made that are completely pointless. Ask yourself:

"What will people think of my app?"

"Will they use it?" and "Who will?"

Making a web app is just like creating a website. So you will need a reliable host and server your application. Some servers and hosts cost money. Some are free, but place advertisements all over your pages. So ask yourself:

"Can I afford a web application?"

"Do I have the time to run and maintain it?"


Designing A Web Application

Below I have compiled several images that will give your App a iPhone feel. Feel free to take and use them. Note: I have not created these images. If I know the source of the image I will post it.

Right Click to Save Image

Top Bar:



Background:



White Bar:



Transparent Buttons:



Transparent Slider:






Coding a Web Application

Most people think when coding a web application is the design must be in a 320 x 480 (iPhone/iPod Touch's browser dimensions) scale. This is incorrect. You may not know it, but the web app is most likely the exact same size as a normal web page but without the ability to zoom and sometimes scroll horizontally. Click here in your computer's browser for an example. To apply these features, simply insert the following code into all of your pages:

[<]meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/"[>]

Note: Be sure to delete the red [ and ] before you put add this to your page.

Width: How wide do want your web page to display? 320 is the width of the iPhone in portal mode.
Initial-Scale: This is what the browser begins at when first viewing the page. 1.0 is equal to 100% so the iPhone will display the whole page.
Maximum-Scale: Do you want your users to be able to zoom in? Keep this the same as the Initial-Scale.
User-Scalable: Marking this at 0 will disable zooming in or out. Marking this at 1 will allow it. Keep this at 0.


Finding a Host and Server

If you want people to be able to access your application you will need to find a host and server! You will need them to upload all of your pictures and code. Below I have compiled several that you might be interested in:

Freewebs - Free website, Free Hosting, Free Webpage - Click Here



Advertising

So you're done with your application and it runs smoothly. Now is the time to advertise and tell the world about it! Here are some ways you can advertise your new application:

Create a website specifically for your app. Then sign to one of Google's advertising programs.
Join other iPhone forums and post your app.
Add your Web App to Apple's list - Click Here



Other Guides
Click Here



Sources
Apple - Click Here
Dan Dickinson's HOWTO: iPhone Webclip Icons - Click Here
Freewebs - Free website, Free Hosting, Free Webpage - Click Here

[MOSHO92]

Hey! Thank You! This is some very useful stuff. And thanks for the templates.

[LukeGab]

Hey! Thank You! This is some very useful stuff. And thanks for the templates.

No Problem at all. :-) If you have any questions feel free to Personal Message me and I'll see what I can do.

By the way, I updated adding:

More Images (2)
Sources (2)
Color coded HTML example

[LukeGab]

Updated

[daveat2ps]

We are having problems getting Web pages to scroll when the data result is taller than the initial screen size. We want to turn on the scroll bar. Can someone help us with this code?

Our initial app where you can see the issue is http://www.tipmyphone.com. If you look up a word such as "horse", you can see the problem. We have another application ready to go, but this scrolling issue is haunting us.

Thanks for your help.

Dave

[LukeGab]

Originally Posted by daveat2ps

We are having problems getting Web pages to scroll when the data result is taller than the initial screen size. We want to turn on the scroll bar. Can someone help us with this code?

Our initial app where you can see the issue is http://www.tipmyphone.com. If you look up a word such as "horse", you can see the problem. We have another application ready to go, but this scrolling issue is haunting us.

Thanks for your help.

Dave

I checked your Web App on my iTouch and I see your issue. This seems to be a frame problem with the iPhone/iTouch's Safari browser. I'll look up more about this and see if I can find a solution but for now all I can say is try extending the frame's height until all answers/definitions fit in it without having to scroll in the frame.

I never thought about this situation until now. I'll see what Apple has to say also.

EDIT: Hey I found your solution! Try simply using two fingers to scroll down instead of one. Sorry to say... but it's extremely slow on my iPod Touch browser. Try it for yourself.

[LukeGab]

Bump

[daveat2ps]

Originally Posted by daveat2ps

We are having problems getting Web pages to scroll when the data result is taller than the initial screen size. We want to turn on the scroll bar. Can someone help us with this code?

Our initial app where you can see the issue is http://www.tipmyphone.com. If you look up a word such as "horse", you can see the problem. We have another application ready to go, but this scrolling issue is haunting us.

Thanks for your help.

Dave

We found the scrolling issue within our first Web app. We are releasing our second Web app this next week.

The scrolling problem was a one word fix. We had overflow:scroll and it needed to be auto:scroll. Sometimes the easiest fixes are the hardest to find.

Thanks for the advice on some possibilities.

Dave