Your SlideShare is downloading. ×
Developing for iPhone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing for iPhone

13,957

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

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
13,957
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
504
Comments
3
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×