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

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

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

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

1) Capabilities

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

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

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

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)

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

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

My Opinion
• ZOOMING GETS OLD. FAST. REALLY.

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

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

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

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

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?)

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

iPhone Specific Design

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

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)

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

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

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

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

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.

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

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

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

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

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

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

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!

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