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