7. The iPhone:
What We Know
Use Web Standards
HTML 4.01
XHTML 1.0
CSS 2.1 and partial CSS 3.xx
JavaScript 1.4, including DOM
support
AJAX technologies, including
XMLHTTPRequest
PDF
Quicktime
7
8. The iPhone:
What We Know
Things to Avoid
Flash
SVG
Java applets
Plug-in installation
Embedded Video
Custom x.509 certificates
8
9. The iPhone:
What We Know
Follow Web Best Practices
Separate HTML, CSS and Javascript
Use well-structured and valid HTML
Use columns and blocks
no wide columns or text across page
Avoid framesets
Use CSS or iframes
Size graphic elements appropriately
don’t rely on browser scaling!
Use small background images
tile the pieces
Don’t send unneeded data
no 50K javascript where 10% is used
9
10. The iPhone:
What We Know
The Finger is Not a Mouse
Fingers are bigger and blunter
Links and buttons need to be larger
Select 80px by 80px, with
20px of free space between
10
11. The iPhone:
What We Know
The Finger is Not a Mouse
Fingers are bigger and blunter
Links and buttons need to be larger
Select 80px by 80px, with
20px of free space between
Fingers can do more...
Double tap
Zoom in and center a block
Touch and hold
Display an information bubble
One or Two-finder Drag
Move the viewport or pan
Flick
Scroll up or down
Pinch
Zoom in or out
11
20. The iPhone:
What We Know
Viewports not Windows
Use <meta Meta Tag
name=quot;viewportquot;/>
defaults to width=quot;480quot;
may look good on NY Times, but
probably not on your site
simple (twice portrait)
width=quot;640quot;
native portrait
width=quot;320quot;; initial-scale=”1.0”;
maximum-scale=”1.0”; minimum-
scale=”1.0”; user-scalable=”false”
useful
width=quot;480quot;; maximum-scale=”0.6667”;
your mileage may vary—try, try again!
20
21. The
iPhone:
What We
Know
<body style=quot;-webkit-text-size-adjust:nonequot;>
<body style=quot;-webkit-text-size-adjust:autoquot;>
<div style=quot;-webkit-text-size-adjust:200%quot;>
21
26. The iPhone:
What We Know
Identifying the iPhone
Use CSS if possible
iPhone <link media=quot;only screen and
(max-device-width: 480px)quot;
href=quot;iPhone.cssquot;
type=quot;text/cssquot; rel=quot;stylesheetquot; />
not-iPhone <link media=quot;screenquot;
href=quot;fancy.cssquot; type=quot;text/cssquot;
rel=quot;stylesheetquot; />
bug: apple suggested doesn’t work
on IE - workaround in progress
Use user-agent only as need
if(navigator.userAgent.indexOf
('iPhone') != -1)
26
27. The iPhone:
What We Know
Working events
window.onload
formfield.onfocus
formfield.onclick
formfield.onblur
formfield.onchange
formfield.onmouseout
formfield.onmouseover
formfield.onmousedown *
formfield.onmouseup
form.onreset
* triggered but not as expected
Others of these may work oddly!
27
28. The iPhone:
What We Know
Non-functional events
window.oncontextmenu
window.onresize * (partial, buggy)
window.onscroll
window.onerror
formfield.ondblclick
formfield.onselect
formfield.onkeydown
formfield.onkeypress
formfield.onkeyup
form.onsubmit
formfield.onmouseenter
formfield.onmouseleave
formfield.onmousemove
document.onkeydown
document.onkeypress
document.onkeyup
28
29. The iPhone:
What We Know
Be aware, also no...
window.showModalDialog()
hover styles
tool tips
mousedown, instead happens
right before mouseup
29
30. The iPhone:
What We Know
Limit sizes
HTML, CSS, Javascript <10MB
don’t send unneeded Javascript
Javascript execution <5 sec
GIF, PNG, and TIFF up to 8 MB
i.e width * height * 4 < 8 MB
Animated GIF <2MB
or only first frame shown
JPG up to 128MB
will be subsampled internally
Non-streamed media <10MB
30
33. The iPhone:
What We’ve Learned
Examples
viewport samples
view source bookmarklet
selecting di!erent keypads
changing CSS on orientation change
hiding the URL bar onload
mailto: with arguments
iPhone user-agent detection
event testing
33
34. The iPhone:
What We’ve Learned
Exemplars
gasapp.com
Joe Hewitt’s navigation demo
movie.app (in 5 hours o! of nav)
telemoose
tada lists
Soon to be Exemplars
iPhone dragging
34
35. The iPhone:
What We’ve Learned
Bugs & Workarounds
viewportwindow.pageYO!set always 0
no workaround
window.resize event irregular
but there is hack around based on width
second text entry fails to invoke
keyboard
hack using javascript
tel: tags do not conform to RFC for p
and w characters
use non-conforming comma ,
bare images in safari render on 980px
use new page
35
36. The iPhone:
What We’ve Learned
Discussions
Four 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 scrolling
Development libraries
Sound in iPhone web games
Implementing the back button
Type faces, type sizes
Debugging javascript, FireBug
Alpha/Beta testing new web apps
36
40. The iPhone:
What We Don’t Know
Open Questions
What is the list CSS3 and how
should we use it?
What Canvas support is available
and how much can we do?
How do we get the URL input panel?
Are background pages executing?
Do we know when the browser is
interrupted by phone call?
How do we get/set scaling ratio?
A CSS3 media query that doesn’t
break IE?
Persistent storage - can we rely on
cookies? Any Google Gears?
40
41. The iPhone:
What We Don’t Know
Open Questions (continued)
Without many events, how do we
make ui widgets
How do we make two-finger
scrolling widgets
How to do animations faster
size, direction, tricks?
What does iSafari do when...
opening .lnk, .web archives
What does mail do when...
receiving .vcf (vCard), .m3u, .url .lnk or .web archives
How best to use PDF and .doc
OpenID for iPhone?
41
45. iPhoneDevCamp
Hack-a-thon
Values
Contribution
assisting the commons
o!ering value
usefuless
Sharing
helping others
source code available
Openness
good questions
open to people and ideas
free or open source
Fun & Cool!
but we value simplicity & elegance
45
46. iPhoneDevCamp
Hack-a-thon
We may give out tickets or smaller
prizes for...
best question on Open Questions
best answer on Open Questions
travelled furthest
most useless hack
best looking
worst looking
best docs
most fun
46
47. iPhoneDevCamp
Hack-a-thon
Diverse Teams
Client coders (javascript)
Server coders (PHP, Perl, Ruby,
etc.)
CSS/DHTML
Artists
User Interface/Experience
Testing
Documentation
Hardware
47