Developing Web Applications for the iPhone
This article will explain what you can and cannot do in a customized iPhone Web site
By Matthew David
The initial Software Developers Kit Apple has given the world for the iPhone is Safari. There are some extensions and caveats when developing AJAX solutions for the iPhone. This article will explain what you can and cannot do in a customized iPhone Web site.
The basics of iPhone Web development - Apple's Safari
The heart of your Web development is Apple's Safari browser. For years Safari, you could only use Safari on the Mac. Safari is now available on Windows 2000, XP and Vista. This means you can develop on Windows and deploy to the iPhone without having to cross your fingers and toes.
While Safari does lack plug-in support, the very good support for all other Web standards is a welcome surprise. Indeed, tests such as the Acid 2.0 Web Standards tests, demonstrates that the iPhone version of Safari supports more standards than Microsoft's desktop version of Internet Explorer. The many different mobile Web browsers do not compare to iPhone. As the commercial says, "it's just the Internet."
Developing Web sites for the iPhone
Apple has done a lot of work on the iPhone to make it easier for you to create Web sites. The simple request that Apple asks is that you keep to industry standards in your design. Safari does support the following standards:
- HTML 4.01
- XHTML 1.0
- CSS 2.1 and partial CSS3
- W3C DOM Level 2
- AJAX technologies, including XMLHTTPRequest
Support for all of these standards is great news. Of particular interest is support for AJAX technologies supporting XMLHTTPRequest. The XMLHTTPRequest allows you to post data back to a Web Server without having to refresh the whole page. This allows for the creation of complex applications in a Web page.
If you are looking to develop Web solutions for Safari on the iPhone then two very good solutions you can use are Adobe’s Dreamweaver CS 3 and Microsoft’s Expression Web. Both tools have very strong support for XHTML and CSS. Dreamweaver does come with additional support for Spry, Adobe’s Open Source AJAX library.
As you might expect, Safari on the iPhone does support GIF, PNG and JPG image formats. It also supports TIFF image formats. You will want to restrict your file sizes to less than 8MB for GIF, PNG and TIFF image formats. Due to the way JPG images are drawn on the iPhone, you can have a JPG up to 128MB.
The document reader on the iPhone allows you to read Adobe Acrobat (PDF), Microsoft Word (DOC) and Excel (XLS) files. You can link to these file types in your Web pages. When Safari comes to these file formats a new page will open and the built in reader will present the document to you.
Safari clearly demonstrates the tight integration between the products on the iPhone. You can easily link to email using the following format in your Anchor tags:
You can also use Anchor tags to link to other applications. You can call directly from a Web page by adding a link on any phone number as in this example:
You can also link to a Web page in Google Maps:
These are all tools you can use to make it easier to develop integrated iPhone solutions.
What to watch out for
Safari on the iPhone is very flexible. There are, however, some caveats to watch out for. The most important feature that is different from the iPhone and any other Web browser is that the directional device you use is your own finger. It brings a new meaning to point and click. Point your finger on the screen and tap. The screen will respond to your taps.
The immediate reaction the screen will give as you tap is to let you select a link. The default view a screen will be when you land on it will be 980 pixels wide x 323 pixels tall if you are viewing the page in landscape. Links on the page will look small. If you are looking to have a link that you want your viewer to click on the home page, then make the link close to the top of the screen and prominent in size.
Allow your users to easily double tap their way through your screen. Double tap will allow content inside of a table or DIV tag to zoom up and fill the whole screen. This technique is easier to navigate with then relying on the user resizing using their thumb and forefinger in a pincer movement.
Safari does not support the following technologies:
- Mouse-over events
- Hover styles
- Tool tips
- Java applets
- Custom x.509 certificates
Many of the technologies make sense. For instance, it is hard to “hover” your finger over a link to active a “hover” style. These specific technologies require a mouse.
Next Steps You Need To Take
While the iPhone is wildly hot, it is good to remember it represents only 1 million of the 900 million Internet users. However, unlike other mobile Web browsers used on BlackBerrys and Windows Mobile devices, the Web browser on the iPhone is very easy to use and represents the Internet as you see it on your desktop. You may not specifically be building Web sites for the iPhone today, but if Apple has its way, you will need to be developing for Safari very soon. Some estimates see Apple selling 90 million iPhones within 4 years. That’s 10% of the total Internet population. If you are not designing for the iPhone today, then your customers will be demanding that you do very shortly.