This document provides an overview of web app development for the iPhone, including its capabilities and design best practices. It discusses the iPhone's connectivity options, input methods like pinching and tapping, and standards-based development using HTML, CSS, JavaScript. Key recommendations include avoiding wide blocks of text, legacy code, and Flash, and taking advantage of columns, blocks, and specific stylesheets. Rich media, file size limits, and developer tools are also outlined. The summary emphasizes that fingers are different than mice and that both WiFi and EDGE connectivity are important factors for iPhone web apps.

1. iPhone Web Apps
Introduction for Developers
Source http://www.flickr.com/photos/eschipul/743621029/

2. iPhoneDevCamp
San Francisco July 3-5 2007
Source http://www.flickr.com/photos/eschipul/743092489/

3. Source: http://www.flickr.com/photos/eschipul/764938378/

4. Outline
1. Capabilities of the iPhone
2. Design Practices for Web (standards)
3. iPhone specific design principles
source: http://developer.apple.com/iphone/designingcontent.html

5. 1) Capabilities

6. Connectivity
• EDGE = AT&T’s network for the iPhone
• WiFi - iPhone supports wifi
• Hack can activate phone for WiFi only

7. Input Device
• Input Device = Two Fingers
• Two Fingers <> Mouse
http://developer.apple.com/iphone/designingcontent.html

8. Input Methods
• Double tap = Zoom in or Center Blocks
• Touch and hold = Display Info Bubble
• Drag = Move the viewport
• Flick = Scroll up or down
• Pinch open = zoom in
• Pinch out = zoom out

9. Negatives of Input
• No copy/paste! WT_?
• Density of links is an issue
• Double taps to blocks depends on html
(DIV, OL, UL, TABLE, IMAGE)

10. Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/

11. Note Changed Size
Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/

12. My Opinion
• ZOOMING GETS OLD. FAST. REALLY.

13. 2) Design Practices
• Perfect Size to Watch Charlie by WiFI

14. Standards Based Dev
• HTML 4.0.1
• XHTML 1.0
• CSS 2.1 and Partial CSS 3.xx
• Javascript 1.4 including DOM support
• AJAX technologies, inc XMLHTTPRequest

15. Think Windowless
• viewport <> windows
there are no stinkin’ windows!
• automatic scaling
apple knows better than you silly rabbit!

16. Avoid
• Avoid W i d e Blocks of Text
• Avoid using html to resize images
• Avoid framesets
• Legacy CSS and JavaScript (slow!)

17. Does NOT Support
• No: WML (wireless markup language)
• No: Flash files
• No: Downloads
• No: Files over 10 Megs
• No: Images over 2 Megs (some tricks?)

18. Use
• Stick with the standards
• Separate HTML, CSS & JavaScript
• Columns and Blocks
• Has full PDF file support
• Did I mention Columns and Blocks?

19. iPhone Specific Design

20. Be Specific With Design
• You CAN render pages specific to iPhone
• user_agent for iPhone = safari:
• Mozilla/5.0
(iPhone; U; CPU like Mac OS X; en)
AppleWebKit/420+ (KHTML, like Geck0)
Version/3.0 Mobile/1A543a Safari/419.3

21. iPhone App Links
• Tel: <a href=”tel:1-408-555-1212”>
• Mail: <a href=”mailto:foo@bar.com”>
• Maps: <a href=”http://maps.google.com/
maps?q=houston”> (uses google app)

22. iPhone StyleSheet
• <link media=”only screen and (max-device-
width: 480px)” href=”iPhone.css”
type=”text/css” rel=”stylesheet” />
• Other browsers ignore “only screen” part

23. Rich Media
• Streams movies and audio using HTTP
• EDGE and Wi-Fi networks
• Servers must support byte-range requests
• No Flash / No Downloads
• No streaming

24. Best Practices
• Use “Poster JPGs” - link image to movie
• 480 x 320 pixels
• Pay Attention to Bit Rate
• Reference Movies
• More: http://developer.apple.com/quicktime/quicktimeintro/tools/
• or the iPhone Developers Guide

25. Limits
• 10 MB File Size Limit
• Javascript
• 5 second limit per each top level entry
• Limited Media Types (see guide)

26. Tips
• Hold “sleep” (top) to power off
• Hold “home” (front) and “sleep” (top)
buttons at the same time for 8 seconds to
hard reset
• youTube is NOT a specific app for iPhone
and not the “real” youtube. Learn from this.

27. Accessorize!
• Damien’s $1200 GPS iPhoneAddOn
Source: http://www.flickr.com/photos/eschipul/748489927/

28. Developer Tools
• Aptana - like visual interdev but with AJAX
framework support and an iPhone plugin
Source: http://www.aptana.com/

29. Developer Notes
• Icons: icon pngs are 59x60 pixels drop
shadow

30. source: http://www.flickr.com/photos/eschipul/750755295/

31. Developer Resources
• Apple iPhone Dev Guide:
• http://developer.apple.com/iphone/
designingcontent.html
• www.iphonewebdev.com
• http://groups.google.com/group/
iphonewebdev
• http://barcamp.org/iPhoneDevCamp

32. Conclusion
• New Device = New Emergent Best
Practices
• Fingers are NOT the same as mice
• WiFi is a big factor for the iPhone
• EDGE still is kinda-lame, but it works
• Developers need to train on new standards

33. Closing Thoughts
• This presentation was completed on the
Monday after iPhoneDevCamp. Please keep
in mind that things will change and update
accordingly. M’kay? - Thanks!

34. Thanks!
• Ed Schipul
• Co: www.schipul.com
• Blog: brandtobedetermined.com
• Flickr: www.flickr.com/photos/eschipul/
• Twitter: twitter.com/eschipul/