iPhoneDevCamp Keynote

transcript

The iPhone:What We Know,

What We Don’t KnowChristopher Allen

July 7th, 2007

Christopher Allen

The iPhone:What we Know

Essential Reading<http://developer.apple.com/iphone/>

The iPhone:What We

Essential Reading<http://www.iPhoneWebDev.com/>

The iPhone:What We

Use Web Standards

The iPhone:What We

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

PDFQuicktime

The iPhone:What We Know

Things to Avoid

FlashSVGJava appletsPlug-in installationEmbedded VideoCustom x.509 certificates

Follow Web Best Practices

Separate 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 Finger is Not a Mouse

Fingers are bigger and blunterLinks and buttons need to be largerSelect 80px by 80px, with 20px of free space between

The Finger is Not a Mouse

Fingers are bigger and blunterLinks 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

Design for Size

The iPhone:What We

Be careful during user input

The iPhone:What We

Use Columns

The iPhone:What We

Use Small Blocks

The iPhone:What We

Orientation a Problem

The iPhone:What We

NY Times Portrait

The iPhone:What We

NY Times Landscape

The iPhone:What We

Viewports, not Windows

The iPhone:What We

Viewports not Windows

Use <meta name="viewport"/> Meta Tagdefaults to width="480"

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”; user-scalable=”false”

usefulwidth="480"; maximum-scale=”0.6667”;

your mileage may vary—try, try again!

The iPhone:What We

Use tel:, mailto: &maps.google.com/maps?

The iPhone:What We

PDF works

The iPhone:What We

H.264 with AAC

The iPhone:What We

Use Reference Movies

The iPhone:What We

Identifying the iPhone

Use CSS if possibleiPhone <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 suggested doesn’t work on IE - workaround in progress

Use user-agent only as needif(navigator.userAgent.indexOf

('iPhone') != -1)

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!

Non-functional events

window.oncontextmenuwindow.onresize * (partial, buggy)window.onscrollwindow.onerrorformfield.ondblclickformfield.onselectformfield.onkeydownformfield.onkeypressformfield.onkeyupform.onsubmitformfield.onmouseenterformfield.onmouseleaveformfield.onmousemovedocument.onkeydowndocument.onkeypressdocument.onkeyup

Be aware, also no...

window.showModalDialog()hover stylestool tipsmousedown, instead happens

right before mouseup

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’ve Learned

Examples<http://www.iPhoneWebDev.com/examples/>

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

The iPhone:What We’ve Learned

Exemplars

gasapp.comJoe Hewitt’s navigation demo

movie.app (in 5 hours o! of nav)telemoosetada lists

Soon to be Exemplars

iPhone dragging

Bugs & Workarounds

viewportwindow.pageYO!set always 0no workaround

window.resize event irregularbut there is hack around based on width

second text entry fails to invoke keyboardhack using javascript

tel: tags do not conform to RFC for p and w charactersuse non-conforming comma ,

bare images in safari render on 980pxuse new page

Discussions

Four kinds of iPhone web pagescompatible, 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

Examples<http://www.iPhoneWebDev/examples.com/>

The iPhone:

What We’ve Learned

The iPhone:What we Don’t Know

Open Questions<http://barcamp.org/iPhoneDevCampOpenQuestions>

The iPhone:What We Don’t Know

Open QuestionsWhat 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?

Open Questions (continued)

Without many events, how do we make ui widgetsHow do we make two-finger

scrolling widgetsHow 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 .docOpenID for iPhone?

Open Questions<http://barcamp.org/iPhoneDevCampOpenQuestions>

iPhoneDevCampHack-a-Thon

MacHack(b:1985 d:2003)

ValuesContribution

assisting the commonso!ering valueusefuless

Sharinghelping otherssource code available

Opennessgood questionsopen to people and ideasfree or open source

Fun & Cool!but we value simplicity & elegance

iPhoneDevCampHack-a-thon

We may give out tickets or smaller prizes for...

best question on Open Questionsbest answer on Open Questionstravelled furthestmost useless hackbest lookingworst lookingbest docsmost fun

Diverse TeamsClient coders (javascript)Server coders (PHP, Perl, Ruby, etc.)CSS/DHTMLArtistsUser Interface/ExperienceTestingDocumentationHardware

Signup by 1pm Sunday<http://barcamp.pbwiki.com/

iPhoneDevCampHackAThon>

5 minutes!

Hack-a-Thon Demo & Contest, Sunday 2pm-5pm

iPhoneDevCampHack-a-Thon x2 x3

<mailto:ChristopherA@iPhoneWebDev.com>

iPhoneDevCamp Keynote

Technology