iPhone Web AppsIntroduction for Developers

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

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

iPhoneDevCampSan Francisco July 3-5 2007

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/