Developing for iPhone

14,602
-1

Published on

presentation by myself and Pete Ottery at Web Directions South 2008 discussing our experience developing iphone.news.com.au, and my experience with the mobile version of webjam.com.au

Published in: Technology, News & Politics
3 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,602
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
504
Comments
3
Likes
29
Embeds 0
No embeds

No notes for slide

Developing for iPhone

  1. developing for the iPhone tim lucas & pete ottery
  2. RAILS & JAVASCRIPT
  3. 2 parts.
  4. it’s SHITDANGs, not iphones
  5. why build a mobile version?
  6. IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
  7. Mobile Safari CSS3 Javascript
  8. OLD SCHOOL MOBILE DEVELOPMENT
  9. IT’S EASY TO BE DISTRACTED BY THE HYPE photo by Mark Cohen flickr.com/people/rageman
  10. You should not make sites for the iPhone - and that includes the URL.
  11. Mobile 2.0: Design and Develop for the iPhone and Beyond by Brian Fling Web 2.0 Expo, San Francisco, April 22, 2008 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  12. 1st of many
  13. developing for the iPhone tim lucas & pete ottery
  14. developing for Super Hot Internet Touchscreen Devices And Next Generation Mobiles
  15. developing for S H I T D A N G Mobiles
  16. developing for SHIT DANG ! Mobiles
  17. developing for SHITDANGs tim lucas & pete ottery
  18. developing for Mobile 2.0 tim lucas & pete ottery
  19. Entry Ticket
  20. <link media=’only screen and (max-device-width: 480px)’ ...
  21. OLIVER WEIDLICH
  22. One Web, No Go.
  23. iphone.news.com.au
  24. .mobile pages
  25. redirect users
  26. HTTP Header: User-Agent
  27. Only redirect /
  28. photo by Esti Alvarez flickr.com/people/esti COOKIES
  29. “mode”
  30. use URLs!
  31. iphone.news.com.au -> link to www.news.com.au
  32. /home.mobile -> /?no-mobile-redirect=true
  33. /webjam8.mobile -> /webjam8
  34. /webjam8 -> /webjam8.mobile
  35. IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
  36. iUI ciUI WebApp.Net
  37. 1. Native iPhone UI 2. Ajax-style page nav 3. Swoosh!
  38. Create Navigational Menus and iPhone interfaces No knowledge of JS required Provide a more “iPhone-like” experience
  39. Native iPhone UI
  40. OS SPECIFIC DESIGN DOES NOT AGE WELL
  41. Building a great mobile user experience is hard. Go easy on yourself by starting simple. Brian Fling, Mobile 2.0
  42. 2. AJAX-style page navigation
  43. WHILST IT MIGHT IMPRESS
  44. AND FEEL A BIT SNAPPIER
  45. HOW MANY KITTENS DO WE NEED TO SACRIFICE? photo by fenlandsnapper flickr.com/people/32834218@N00
  46. Back button
  47. Bookmarking
  48. URLs
  49. phones w/o javascript
  50. NEW GENERATION OF ACCESSIBILITY ISSUES? photo by Adrian Q flickr.com/people/aquan
  51. WWJKD? photo by Faruk Ateş flickr.com/people/kurafire
  52. WHO USES AN IPHONE IN BED? photo by Damien Roué flickr.com/people/damienroue
  53. efficient interactions
  54. EXAMPLE: WEBJAM 8 PHOTO BROWSING
  55. AJAX Data URLs CSS Sprites Asset Bundling Cache Headers YSlow
  56. 3. The Swoosh Effect
  57. transitions
  58. and
  59. animations
  60. are
  61. all
  62. about
  63. subtlety
  64. only 2 people allowed.
  65. Use your existing tools
  66. Pete
  67. Part 1 Different interaction models. Design for phones & iphones.
  68. Part 2 Getting started. Code examples.
  69. mice vs thumbs?
  70. 40 x 15 pixels
  71. 320px 416px
  72. thumbs/fingers = about 50 x 50px
  73. thumbs/fingers = about 50 x 50px
  74. Simplify as much as you can.
  75. And then delete a bit more.
  76. “Visiting web sites that have been redesigned for the iPhone is often a quicker and more pleasing experience than it is on ... 20-inch or larger screens.”
  77. phones vs iPhone
  78. Getting started
  79. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  80. qÉñí
  81. qÉñí
  82. qÉñí
  83. qÉñí
  84. qÉñí
  85. qÉñí
  86. qÉñí
  87. qÉñí
  88. qÉñí
  89. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  90. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> qÉñí <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> <ul> <li><a href=quot;linkquot;>Finally a suit to be worn in the shower</a></li> <li><a href=quot;linkquot;>Smelly know-it-alls the ultimate irritation</a></li> <li><a href=quot;linkquot;>Sorry man’s ass thrown in jail</a></li> <li><a href=quot;linkquot;>Ike survivors in the lion’s den</a></li> <li><a href=quot;linkquot;>Woman finds python in Dutch hotel toilet</a></li> </ul> </body> </html>
  91. qÉñí
  92. qÉñí
  93. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> qÉñí <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> <h2><a href=quot;linkquot;>The Other Side</a></h2> -- code continues below --
  94. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } </style> </head> <body> qÉñí <h1>Kiwis carve up washed up mystery lump</h1> <div class=quot;time-stampquot;>Tuesday 7:51AM</div> <p>A LARGE chunk of something unpleasant has washed up on a New Zealand beach and excited locals are stealing bits of it.</p> <p>Some say the “disgusting” squarish white block, the size of a 44-gallon drum, is cheese - possibly brie, while others believe it is ambergris, or whale vomit.</p> <p>And that has solved the problem for council workers who were wondering how to remove the 500kg mystery object that washed up on a beach in Wellington.</p> -- code continues below --
  95. qÉñí
  96. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.0//ENquot; quot;http://www.w3.org/TR/REC-html40/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { } font-size:1.6em; qÉñí .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  97. qÉñí
  98. <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;> <title>Example</title> <style type=quot;text/cssquot;> html { -webkit-text-size-adjust: none; } body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; qÉñí border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  99. qÉñí
  100. qÉñí
  101. qÉñí
  102. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } qÉñí </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  103. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  104. body { font: 16px/1.3 Helvetica; } h1 { font-size:1.6em; } .time-stamp { color:#666; border-top: 1px dotted #ccc; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; } p:first-of-type { font-weight:bold; } h2 { qÉñí font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } </style> </head> <body> <h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
  105. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí
  106. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
  107. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px;
  108. h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #800000; -webkit-border-radius: 5px; padding: 3px 6px; margin: 1em 0 .4em; -webkit-box-shadow: 0 5px 0 #ccc; } a { text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; } qÉñí background: url(quot;sprites.pngquot;) no-repeat 100% -5px; ul { margin:0; padding:0; list-style-type:none; } li { margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; }
  109. text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 0; background: url(quot;sprites.pngquot;) no-repeat 100% -105px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
  110. text-decoration:none; color:#000; font-weight:bold; display:block; } h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; background: url(quot;sprites.pngquot;) no-repeat 100% -5px; } ul { margin:0; padding:0; list-style-type:none; } li { qÉñí margin:0; padding:0; border-bottom: 1px dotted #ccc; } li a { padding: 12px 30px 12px 10px; background: url(quot;sprites.pngquot;) no-repeat 100% -105px, url(quot;sprites.pngquot;) repeat-x 0 100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
  111. some stats on usage
  112. ãKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT
  113. ãKåÉïëKÅçãK~ì áéÜçåÉKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU
  114. mfÛë ãKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
  115. mfÛë áéÜçåÉKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
  116. the end. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×