• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing for iPhone
 

Developing for iPhone

on

  • 19,930 views

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

Statistics

Views

Total Views
19,930
Views on SlideShare
19,189
Embed Views
741

Actions

Likes
29
Downloads
503
Comments
3

10 Embeds 741

http://blog.signified.com.au 448
http://www.webdirections.org 255
http://www.slideshare.net 28
http://translate.googleusercontent.com 4
http://static.slideshare.net 1
http://soapbox.gruden.com 1
http://agglom.com 1
http://blog.up100.nl 1
http://www.birdnest.org 1
http://localhost 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Developing for iPhone Developing for iPhone Presentation Transcript

    • developing for the iPhone tim lucas & pete ottery
    • RAILS & JAVASCRIPT
    • 2 parts.
    • it’s SHITDANGs, not iphones
    • why build a mobile version?
    • IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
    • Mobile Safari CSS3 Javascript
    • OLD SCHOOL MOBILE DEVELOPMENT
    • IT’S EASY TO BE DISTRACTED BY THE HYPE photo by Mark Cohen flickr.com/people/rageman
    • You should not make sites for the iPhone - and that includes the URL.
    • 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.
    • 1st of many
    • developing for the iPhone tim lucas & pete ottery
    • developing for Super Hot Internet Touchscreen Devices And Next Generation Mobiles
    • developing for S H I T D A N G Mobiles
    • developing for SHIT DANG ! Mobiles
    • developing for SHITDANGs tim lucas & pete ottery
    • developing for Mobile 2.0 tim lucas & pete ottery
    • Entry Ticket
    • <link media=’only screen and (max-device-width: 480px)’ ...
    • OLIVER WEIDLICH
    • One Web, No Go.
    • iphone.news.com.au
    • .mobile pages
    • redirect users
    • HTTP Header: User-Agent
    • Only redirect /
    • photo by Esti Alvarez flickr.com/people/esti COOKIES
    • “mode”
    • use URLs!
    • iphone.news.com.au -> link to www.news.com.au
    • /home.mobile -> /?no-mobile-redirect=true
    • /webjam8.mobile -> /webjam8
    • /webjam8 -> /webjam8.mobile
    • IPHONE FRAMEWORK GRIPES photo by Scot Campbell flickr.com/people/randomurl
    • iUI ciUI WebApp.Net
    • 1. Native iPhone UI 2. Ajax-style page nav 3. Swoosh!
    • Create Navigational Menus and iPhone interfaces No knowledge of JS required Provide a more “iPhone-like” experience
    • Native iPhone UI
    • OS SPECIFIC DESIGN DOES NOT AGE WELL
    • Building a great mobile user experience is hard. Go easy on yourself by starting simple. Brian Fling, Mobile 2.0
    • 2. AJAX-style page navigation
    • WHILST IT MIGHT IMPRESS
    • AND FEEL A BIT SNAPPIER
    • HOW MANY KITTENS DO WE NEED TO SACRIFICE? photo by fenlandsnapper flickr.com/people/32834218@N00
    • Back button
    • Bookmarking
    • URLs
    • phones w/o javascript
    • NEW GENERATION OF ACCESSIBILITY ISSUES? photo by Adrian Q flickr.com/people/aquan
    • WWJKD? photo by Faruk Ateş flickr.com/people/kurafire
    • WHO USES AN IPHONE IN BED? photo by Damien Roué flickr.com/people/damienroue
    • efficient interactions
    • EXAMPLE: WEBJAM 8 PHOTO BROWSING
    • AJAX Data URLs CSS Sprites Asset Bundling Cache Headers YSlow
    • 3. The Swoosh Effect
    • transitions
    • and
    • animations
    • are
    • all
    • about
    • subtlety
    • only 2 people allowed.
    • Use your existing tools
    • Pete
    • Part 1 Different interaction models. Design for phones & iphones.
    • Part 2 Getting started. Code examples.
    • mice vs thumbs?
    • 40 x 15 pixels
    • 320px 416px
    • thumbs/fingers = about 50 x 50px
    • thumbs/fingers = about 50 x 50px
    • Simplify as much as you can.
    • And then delete a bit more.
    • “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.”
    • phones vs iPhone
    • Getting started
    • <!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>
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • qÉñí
    • <!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>
    • <!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>
    • qÉñí
    • qÉñí
    • <!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 --
    • <!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 --
    • qÉñí
    • <!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 --
    • qÉñí
    • <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 --
    • qÉñí
    • qÉñí
    • qÉñí
    • 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 --
    • 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 --
    • 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 --
    • 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Éñí
    • 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;
    • 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;
    • 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; }
    • 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; }
    • 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; }
    • some stats on usage
    • ãKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT
    • ãKåÉïëKÅçãK~ì áéÜçåÉKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU
    • mfÛë ãKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
    • mfÛë áéÜçåÉKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë
    • the end. Questions?