developing for iphone
DESCRIPTION
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.auTRANSCRIPT
developingfor the iPhonetim lucas & pete ottery
RAILS & JAVASCRIPT
2 parts.
it’s SHITDANGs, not iphones
why build a mobile version?
photo by Scot Campbellflickr.com/people/randomurl
IPHONE FRAMEWORK
GRIPES
Mobile SafariCSS3
Javascript
OLD SCHOOLMOBILE DEVELOPMENT
http://www.flickr.com/photos/rageman/2677718167/
photo by Mark Cohenflickr.com/people/rageman
DISTRACTED BY THE HYPE
IT’S EASY TO BE
You should not make sites for the iPhone -and that includes the URL.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0: Design and Develop for the iPhone and Beyondby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
1st of many
developingfor the iPhonetim lucas & pete ottery
Super Hot Internet Touchscreen
Devices And Next Generation Mobiles
developing for
S H IT
D A NG
!
developing for
Mobiles
SHITDANG !
developing for
Mobiles
developingfor SHITDANGstim lucas & pete ottery
developingfor Mobile 2.0tim lucas & pete ottery
EntryTicket
<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 Alvarezflickr.com/people/esti
COOKIES
“mode”
http://www.flickr.com/photos/esti/147733640/
use URLs!
-> link to www.news.com.au
iphone.news.com.au
-> /?no-mobile-redirect=true
/home.mobile
-> /webjam8
/webjam8.mobile
/webjam8
-> /webjam8.mobile
http://www.flickr.com/photos/randomurl/2558566674/
photo by Scot Campbellflickr.com/people/randomurl
IPHONE FRAMEWORK
GRIPES
iUIciUI
WebApp.Net
1. Native iPhone UI2. Ajax-style page nav3. 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
http://www.flickr.com/photos/32834218@N00/365808908/
photo by fenlandsnapperflickr.com/people/32834218@N00
HOW MANY KITTENS DO WE NEED TO
SACRIFICE?
Back button
Bookmarking
URLs
phones w/o javascript
http://flickr.com/photos/aquan/2780542246/
photo by Adrian Qflickr.com/people/aquan
NEW GENERATION OF
ACCESSIBILITY ISSUES?
http://flickr.com/photos/kurafire/189985967/
photo by Faruk Ateşflickr.com/people/kurafire
WWJKD?
http://www.flickr.com/photos/damienroue/2875259386/
photo by Damien Rouéflickr.com/people/damienroue
WHO USES AN IPHONE
IN BED?
efficient interactions
EXAMPLE: WEBJAM 8
PHOTO BROWSING
AJAXData URLsCSS Sprites
Asset BundlingCache 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
416px
320px
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
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Example</title></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> <div class="time-stamp">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>
<h2><a href="link">The Other Side</a></h2>
<ul> <li><a href="link">Finally a suit to be worn in the shower</a></li> <li><a href="link">Smelly know-it-alls the ultimate irritation</a></li> <li><a href="link">Sorry man’s ass thrown in jail</a></li> <li><a href="link">Ike survivors in the lion’s den</a></li> <li><a href="link">Woman finds python in Dutch hotel toilet</a></li> </ul>
</body></html>
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Example</title></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> <div class="time-stamp">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>
<h2><a href="link">The Other Side</a></h2>
<ul> <li><a href="link">Finally a suit to be worn in the shower</a></li> <li><a href="link">Smelly know-it-alls the ultimate irritation</a></li> <li><a href="link">Sorry man’s ass thrown in jail</a></li> <li><a href="link">Ike survivors in the lion’s den</a></li> <li><a href="link">Woman finds python in Dutch hotel toilet</a></li> </ul>
</body></html>
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> <div class="time-stamp">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>
<h2><a href="link">The Other Side</a></h2>
<ul> <li><a href="link">Finally a suit to be worn in the shower</a></li> <li><a href="link">Smelly know-it-alls the ultimate irritation</a></li> <li><a href="link">Sorry man’s ass thrown in jail</a></li> <li><a href="link">Ike survivors in the lion’s den</a></li> <li><a href="link">Woman finds python in Dutch hotel toilet</a></li> </ul>
</body></html>
qÉñí
qÉñí
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
html { -webkit-text-size-adjust: none;
}
</style></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> <div class="time-stamp">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>
<h2><a href="link">The Other Side</a></h2>
-- code continues below --
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
html { -webkit-text-size-adjust: none;
}
body { font: 16px/1.3 Helvetica; }
</style></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> <div class="time-stamp">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Éñí
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; 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Éñí
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; 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Éñí
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; 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Éñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
h2 { 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 --
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; }
</style></head><body>
<h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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Éñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; background: url("sprites.png") no-repeat 100% -5px; }
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; background: url("sprites.png") no-repeat 100% -5px; }
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; background: url("sprites.png") 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("sprites.png") no-repeat 100% -105px; }
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; background: url("sprites.png") 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("sprites.png") no-repeat 100% -105px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
qÉñí
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Example</title> <style type="text/css">
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; border-bottom: 2px solid #000; padding: 5px 0; margin-top:-.3em; }
p:first-of-type { font-weight:bold; }
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; background: url("sprites.png") 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 10px; background: url("sprites.png") no-repeat 100% -105px, url("sprites.png") repeat-x 0 100%; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
some stats on usage
ãKåÉïëKÅçãK~ìä~ìåÅÜÉÇ=åçî=MT
ãKåÉïëKÅçãK~ìä~ìåÅÜÉÇ=åçî=MT
áéÜçåÉKåÉïëKÅçãK~ìä~ìåÅÜÉÇ=àìäó=MU
ïÉÉâÇ~óë ïÉÉâÉåÇë
mfÛëãKåÉïëKÅçãK~ì
ïÉÉâÇ~óë ïÉÉâÉåÇë
mfÛëáéÜçåÉKåÉïëKÅçãK~ì
the end.
Questions?