Web application on an iPhone - styling it to look like native iPhone app

Question

Hi,

I saw some web pages display diffrently on an iPod Touch (and iPhone) - they pretty much looked like the native iPhone apps.

Think this can be done with styles and, optionally, rendering diffrent HTML on the server side, based on the user agent from request.

So, how do I get this effect? And, also, is there any emulator of iPhone OS browser, so I could test my application before really launching it, to see if it even displays?

Answer 1

See here for info on Joe Hewitt's CSS and JavaScript for native-looking iPhone web apps: http://ajaxian.com/archives/iphone-native-looking-skin

To simulate the look and feel of a web page on iPhone, you can try this: http://www.testiphone.com/. (But of course, if you are serious about this, use a real iPhone or iPod Touch.)

Answer 2

http://code.google.com/p/iui/

Answer 3

All the CSS/Javascript features you need are documented on the Apple Developer site.

Start here: http://developer.apple.com/safari/

Apple have a series of PDFs that describe what you need to do to customise for the iPhone and iPod.

Although you can download safari for Windows and Mac - it won't have the same resolution set as an iPhone or iPod.

Answer 4

iui is a good solution, but I also suggest http://www.jqtouch.com/ which is based on jquery. It is growing radiply. And also you can use the Google group http://groups.google.com/group/iphonewebdev

Answer 5

You can use the jqtouch framework to make your web pages look and behave somewhat like a native iphone application. The author has a link to a demo on his homepage that you can check out with your iphone.

Regarding testing: Apple has an iphone sdk you can download if you've signed up to be an apple developer. But currently, I'm testing by just pointing my iphone to my dev server.

Answer 6

Apple's iPhone SDK actually comes with an iPhone Simulator which allows you to test your pages on a real version of Mobile Safari. I believe the software is for Mac OS X only.

• OS X 10.5 iPhone SDK Download

You'll have to authenticate with your iTunes credentials to get the download.

Answer 7

If you own a Mac, you should really try try Dashcode (which is a part of the iPhone SDK).

Answer 8

I'm currently working with the iUI dev team on the current CSS style for the project and I have to say I'm quite impressed by the power of the little broswer. Most webkit functions are available to the end user including -webkit-gradients so that you can get most of the UI elements out of the way with zero images. While you can render the page diffrently based on the User-Agent string, I recomend stearing away from that as of this this as you can target the iPhone with a stylesheet paramater.

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

This allows you to use the same HTML markup, and change the way it looks for your iPhone.

For iPhone OS Emulators, apple has you covered, over on the Windows Side it is Safari, and don't forget to change the useragent to iPhone in the dev options. I however use Chrome as it also uses the webkit engine, so most CSS is syntaxially the same.

However, most people have an iTouch or iPhone if your doing this kind of dev work. Your best bet is to test on the 2G phone as it has the highest level of restriction (and slowest of all of CPUs). This gives you a wrose case sorinaro that if you find acceptable, will only get better for the people with 3G and 3GSes.

Some great resources on the subject include:

Apple's Webapps Page

Apple's Developer Safari Page - Includes Link to iPhone Simulator (MAC ONLY).

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

MUST READ: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp