the iphone: what we know, what we don't know
TRANSCRIPT
The iPhone:What We Know,
What We Don’t KnowChristopher Allen
September 23rd, 2007
1
Christopher Allen
2
The iPhone:What we Know
3
Essential Reading<http://developer.apple.com/iphone/>
The iPhone:What We
Know
4
Essential Reading<http://www.iPhoneWebDev.com/>
The iPhone:What We
Know
5
Three Safari’s
6
Mobile Safari
“Desktop-Class” Web BrowserSame on iPhone & iPod TouchVersion
Webkit/420+Safari/419.3
Not quite Safari 3, but almost
Performance similar to G3 MacMany expect update with OSX
10.4 “Leopard” in November
The iPhone:What We Know
7
Mobile Safari Features
HTML 4.01 and XHTML 1.0CSS 2.1 and some CSS 3Full DOMJavascript 1.4XMLHttpRequest
thus support for AJAXCanvasPDF & QuicktimeUp to 8 “tabs”
The iPhone:What We Know
8
Not Supported
FlashSVGJava appletsPlug-in installationEmbedded VideoCustom x.509 certificatesDrag & DropSelectionFile UploadSOAP
The iPhone:What We Know
9
Use Web Standards!
The iPhone:What We
Know
10
Follow Web Best PracticesSeparate HTML, CSS and JavascriptUse well-structured and valid HTMLUse columns and blocks
no wide columns or text across page
Avoid framesetsUse CSS or iframes
Size graphic elements appropriatelydon’t rely on browser scaling!
Use small background imagestile the pieces
Don’t send unneeded datano 50K javascript where 10% is used
The iPhone:What We Know
11
The Finger is Not a MouseFingers are bigger and blunter
Links and buttons need to be largerSelect 80px by 80px, with 20px of free space between
The iPhone:What We Know
12
The Finger is Not a MouseFingers are bigger and blunter
Links and buttons need to be largerSelect 80px by 80px, with 20px of free space between
Fingers can do more...Double tapZoom in and center a blockTouch and holdDisplay an information bubbleOne or Two-finder DragMove the viewport or panFlickScroll up or downPinch Zoom in or out
The iPhone:What We Know
13
Design for Size
The iPhone:What We
Know
14
Be careful during user input
The iPhone:What We
Know
15
Use Columns
The iPhone:What We
Know
16
Use Small Blocks
The iPhone:What We
Know
17
Orientation a Problem
The iPhone:What We
Know
18
NY Times Portrait
The iPhone:What We
Know
19
NY Times Landscape
The iPhone:What We
Know
20
Viewports, not Windows
The iPhone:What We
Know
21
Viewports not Windows
Use <meta name="viewport"/> Meta Tagdefaults to width="980"
may look good on NY Times, but probably not on your site
simple (twice portrait)width="640"
native portraitwidth="320"; initial-scale=”1.0”;
maximum-scale=”1.0”; minimum-
scale=”1.0”;
native landscape “useful”width="480"; maximum-scale=”0.6667”;
your mileage may vary—try, try again!
The iPhone:What We Know
22
<body style="-webkit-text-size-adjust:none">
<body style="-webkit-text-size-adjust:auto">
<div style="-webkit-text-size-adjust:200%">
The iPhone:What We
Know
23
Use tel:, mailto: &maps.google.com/maps?
The iPhone:What We
Know
24
PDF works
The iPhone:What We
Know
25
H.264 with AAC
The iPhone:What We
Know
26
Use Reference Movies
The iPhone:What We
Know
27
Identifying the iPhoneUse CSS if possible
iPhone <link media="only screen and (max-device-width: 480px)"
href="iPhone.css"
type="text/css" rel="stylesheet" />
not-iPhone <link media="screen" href="fancy.css" type="text/css"
rel="stylesheet" />
bug: apple technique doesn’t work on IE - check iPhoneWebDev
Use user-agent only as needif ((navigator.userAgent.indexOf
('Mobile') != -1 && !
(navigator.userAgent.indexOf
('Safari') != -1 {}
The iPhone:What We Know
28
Working eventswindow.onload formfield.onfocusformfield.onclickformfield.onblurformfield.onchangeformfield.onmouseoutformfield.onmouseoverformfield.onmousedown *formfield.onmouseupform.onreset
* triggered but not as expected
Others of these may work oddly!
The iPhone:What We Know
29
Non-functional events
window.oncontextmenuwindow.onresize * (partial, buggy)window.onscrollwindow.onerrorformfield.ondblclickformfield.onselectformfield.onkeydownformfield.onkeypressformfield.onkeyupform.onsubmitformfield.onmouseenterformfield.onmouseleaveformfield.onmousemovedocument.onkeydowndocument.onkeypressdocument.onkeyup
The iPhone:What We Know
30
Be aware, also no...
window.showModalDialog()hover stylestool tips
There may be di!ering event ordering and throttling of eventsmousedown, instead happens
right before mouseup
The iPhone:What We Know
31
Limit sizes
HTML, CSS, Javascript <10MBdon’t send unneeded Javascript
Javascript execution <5 secGIF, PNG, and TIFF up to 8 MBi.e width * height * 4 < 8 MB
Animated GIF <2MBor only first frame shown
JPG up to 128MBwill be subsampled internally
Non-streamed media <10MB
The iPhone:What We Know
32
The iPhone:What we’ve Learned
33
FAQ<http://www.iPhoneWebDev.com/faq/>
The iPhone:
What We’ve Learned
34
Examples<http://www.iPhoneWebDev.com/examples/>
The iPhone:
What We’ve Learned
35
Examplesviewport samples
view source bookmarklet
selecting di!erent keypads
changing CSS on orientation change
hiding the URL bar onload
mailto: with arguments & html
iPhone user-agent detection
event testing
The iPhone:What We’ve Learned
36
iUI Framework
< http://www.joehewitt.com/iui/ >Navigation windows from JSON
objectsNavigational objects using canvas UI
tags for speed
Handles phone rotation events
A great iPhone user experience
1.8KB with gzip and Dojo shrinksafe
Moviesapp.com written in 5 hours...
The iPhone:What We’ve Learned
37
moviesapp.com using iUi
The iPhone:What We
Know
38
Bugs & Workaroundsviewportwindow.pageYO!set always 0
no workaround
window.resize event irregularbut there is hack around based on width
second text entry fails to invoke keyboardhack using javascript, may be fixed in 1.0.2
tel: tags do not conform to RFC for p and w charactersuse non-conforming comma ,
bare images in safari render on 980pxuse new page
User-scalable set to false prevents the magnifying loop on text inputset maximum and minimum scale the same
The iPhone:What We’ve Learned
39
DiscussionsFour kinds of iPhone web pages
compatible, friendly, optimized, and web app
Standard for an iPhone friendly icon for directory apps
What qualities does an exemplar iPhone web app have?
Two finger scrollingDevelopment librariesSound in iPhone web gamesImplementing the back buttonType faces, type sizesDebugging javascript, FireBugAlpha/Beta testing new web apps
The iPhone:What We’ve Learned
40
The iPhone:What we Don’t Know
41
Open QuestionsWhat Canvas support is available and how much can we do with it?How does the iPhone cache web
pages and objects?What limits do we have for cookies?What limits do we have for
bookmarks?How do we make two-finger scrolling
widgetsHow to do animations faster
size, direction, tricks?
How best to use PDF and .docSetInterval stops in background-what
happens with AJAX in background?
The iPhone:What We Don’t Know
42
Things we’d like to havewindow.onresize working so we stop using hackAbility to get/set scaling ratioMore complete CCS 3 and Safari stylesTurn o! spell checkerUse the URL keyboard in formsAn event for when the browser is interrupted by phone callAccess to user dataPersistent storage. How about Google
Gears?OpenID for iPhoneNative support for handling SOAP based
web serviceslike Mozilla's SOAPCall
The iPhone:What We Don’t Know
43
Native AppsNot supported by Apple, but...Apple Exec Greg Joswiak said Apple
takes “a neutral stance" on third-party iPhone applications.
“Apple won't forcibly prevent developers from writing new apps for the handset, nor will it maliciously design software updates to break those apps.”
NullRivers Install App< http://iphone.nullriver.com/beta/ >
Installer / JailbreakPackage Manager
The iPhone:What We Don’t Know
44
Some Native AppsSummerboard (extended manager)Open SSHiStumbleriIRCmLAMP apps (Apache, Perl, Python, etc.)Mobile Chat, Apollo IMVoice NotesNEZ and Z Game Emulators
Many more
The iPhone:What We Don’t Know
45
Upcoming SessionsMonday
10:10am: Dojo & Ajax4:05pm: Building the iPhone with Adobe AIR5:40pm: Build, customize and deploy iPhone
Apps with the Etelos Ecosystem6:35pm: Aptana IDE and the iPhone
Tuesday9:15am: Building an iPhone Application in 24
Hours: Behind-the-Scenes with Laszlo Systems
10:10am: Mobile AJAX, SVG, and the Future of the Web4:05pm: From WAP to WOW.
Developing a Web Service for the
The iPhone:
46