47
The iPhone: What We Know, What We Don’t Know Christopher Allen September 23rd, 2007 1

The iPhone: What We Know, What We Don't Know

Embed Size (px)

Citation preview

Page 1: The iPhone: What We Know, What We Don't Know

The iPhone:What We Know,

What We Don’t KnowChristopher Allen

September 23rd, 2007

1

Page 2: The iPhone: What We Know, What We Don't Know

Christopher Allen

2

Page 3: The iPhone: What We Know, What We Don't Know

The iPhone:What we Know

3

Page 4: The iPhone: What We Know, What We Don't Know

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

The iPhone:What We

Know

4

Page 5: The iPhone: What We Know, What We Don't Know

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

The iPhone:What We

Know

5

Page 6: The iPhone: What We Know, What We Don't Know

Three Safari’s

6

Page 7: The iPhone: What We Know, What We Don't Know

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

Page 8: The iPhone: What We Know, What We Don't Know

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

Page 9: The iPhone: What We Know, What We Don't Know

Not Supported

FlashSVGJava appletsPlug-in installationEmbedded VideoCustom x.509 certificatesDrag & DropSelectionFile UploadSOAP

The iPhone:What We Know

9

Page 10: The iPhone: What We Know, What We Don't Know

Use Web Standards!

The iPhone:What We

Know

10

Page 11: The iPhone: What We Know, What We Don't Know

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

Page 12: The iPhone: What We Know, What We Don't Know

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

Page 13: The iPhone: What We Know, What We Don't Know

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

Page 14: The iPhone: What We Know, What We Don't Know

Design for Size

The iPhone:What We

Know

14

Page 15: The iPhone: What We Know, What We Don't Know

Be careful during user input

The iPhone:What We

Know

15

Page 16: The iPhone: What We Know, What We Don't Know

Use Columns

The iPhone:What We

Know

16

Page 17: The iPhone: What We Know, What We Don't Know

Use Small Blocks

The iPhone:What We

Know

17

Page 18: The iPhone: What We Know, What We Don't Know

Orientation a Problem

The iPhone:What We

Know

18

Page 19: The iPhone: What We Know, What We Don't Know

NY Times Portrait

The iPhone:What We

Know

19

Page 20: The iPhone: What We Know, What We Don't Know

NY Times Landscape

The iPhone:What We

Know

20

Page 21: The iPhone: What We Know, What We Don't Know

Viewports, not Windows

The iPhone:What We

Know

21

Page 22: The iPhone: What We Know, What We Don't Know

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

Page 23: The iPhone: What We Know, What We Don't Know

<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

Page 24: The iPhone: What We Know, What We Don't Know

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

The iPhone:What We

Know

24

Page 25: The iPhone: What We Know, What We Don't Know

PDF works

The iPhone:What We

Know

25

Page 26: The iPhone: What We Know, What We Don't Know

H.264 with AAC

The iPhone:What We

Know

26

Page 27: The iPhone: What We Know, What We Don't Know

Use Reference Movies

The iPhone:What We

Know

27

Page 28: The iPhone: What We Know, What We Don't Know

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

Page 29: The iPhone: What We Know, What We Don't Know

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

Page 30: The iPhone: What We Know, What We Don't Know

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

Page 31: The iPhone: What We Know, What We Don't Know

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

Page 32: The iPhone: What We Know, What We Don't Know

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

Page 33: The iPhone: What We Know, What We Don't Know

The iPhone:What we’ve Learned

33

Page 34: The iPhone: What We Know, What We Don't Know

FAQ<http://www.iPhoneWebDev.com/faq/>

The iPhone:

What We’ve Learned

34

Page 35: The iPhone: What We Know, What We Don't Know

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

The iPhone:

What We’ve Learned

35

Page 36: The iPhone: What We Know, What We Don't Know

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

Page 37: The iPhone: What We Know, What We Don't Know

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

Page 38: The iPhone: What We Know, What We Don't Know

moviesapp.com using iUi

The iPhone:What We

Know

38

Page 39: The iPhone: What We Know, What We Don't Know

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

Page 40: The iPhone: What We Know, What We Don't Know

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

Page 41: The iPhone: What We Know, What We Don't Know

The iPhone:What we Don’t Know

41

Page 42: The iPhone: What We Know, What We Don't Know

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

Page 43: The iPhone: What We Know, What We Don't Know

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

Page 44: The iPhone: What We Know, What We Don't Know

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

Page 45: The iPhone: What We Know, What We Don't Know

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