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

Embed Size (px)

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

  • 1.September 23rd, 2007 The iPhone:What We Know, What We Dont Know Christopher Allen1

2. Christopher Allen 2 3. The iPhone: What we Know 3 4. The iPhone: What We KnowEssential Reading 4 5. The iPhone: What We Know Essential Reading 5 6. Three Safaris6 7. The iPhone: What We Know Mobile Safari Desktop-Class Web Browser Same on iPhone & iPod Touch Version Webkit/420+ Safari/419.3Not quite Safari 3, butalmost Performance similar to G3 Mac Many expect update with OSX 10.4 Leopard in November7 8. The iPhone: What We Know Mobile Safari Features HTML 4.01 and XHTML 1.0 CSS 2.1 and some CSS 3 Full DOM Javascript 1.4 XMLHttpRequestthus support for AJAX Canvas PDF & Quicktime Up to 8 tabs 8 9. The iPhone: What We Know Not SupportedFlashSVGJava appletsPlug-in installationEmbedded VideoCustom x.509 certicatesDrag & DropSelectionFile UploadSOAP 9 10. The iPhone: What We KnowUse Web Standards! 10 11. 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 dont rely on browser scaling! Use small background images tile the pieces Dont send unneeded data no 50K javascript where 10% is used11 12. 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 12 13. 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-nder Drag Move the viewport or pan Flick Scroll up or down Pinch Zoom in or out13 14. The iPhone: What We KnowDesign for Size 14 15. The iPhone: What We KnowBe careful during user input15 16. The iPhone: What We KnowUse Columns16 17. The iPhone: What We KnowUse Small Blocks 17 18. The iPhone: What We KnowOrientation a Problem 18 19. The iPhone: What We KnowNY Times Portrait19 20. The iPhone: What We KnowNY Times Landscape 20 21. The iPhone: What We KnowViewports, not Windows21 22. The iPhone:What We Know Viewports not WindowsUse Meta Tagdefaults to width="980" may look good on NY Times, but probably not on your sitesimple (twice portrait)width="640"native portraitwidth="320"; initial-scale=1.0;maximum-scale=1.0; minimum-scale=1.0;native landscape usefulwidth="480"; maximum-scale=0.6667;your mileage may varytry, try again!22 23. The iPhone: What We Know

23 24. The iPhone: What We Know Use tel:, mailto: & maps.google.com/maps? 24 25. The iPhone: What We KnowPDF works25 26. The iPhone: What We KnowH.264 with AAC26 27. The iPhone: What We KnowUse Reference Movies27 28. The iPhone:What We Know Identifying the iPhone Use CSS if possible iPhone not-iPhone bug: apple technique doesnt work on IE - check iPhoneWebDev Use user-agent only as need if ((navigator.userAgent.indexOf ('Mobile') != -1 && ! (navigator.userAgent.indexOf ('Safari') != -1 {}28 29. The iPhone:What We Know Working events window.onload formeld.onfocus formeld.onclick formeld.onblur formeld.onchange formeld.onmouseout formeld.onmouseover formeld.onmousedown * formeld.onmouseup form.onreset * triggered but not as expected Others of these may work oddly! 29 30. The iPhone:What We Know Non-functional events window.oncontextmenu window.onresize * (partial, buggy) window.onscroll window.onerror formeld.ondblclick formeld.onselect formeld.onkeydown formeld.onkeypress formeld.onkeyup form.onsubmit formeld.onmouseenter formeld.onmouseleave formeld.onmousemove document.onkeydown document.onkeypress document.onkeyup30 31. The iPhone:What We Know Be aware, also no... window.showModalDialog() hover styles tool tipsThere may be di!ering event ordering and throttling of events mousedown, instead happens right before mouseup 31 32. The iPhone: What We Know Limit sizes HTML, CSS, Javascript