Post on 28-Jan-2015
description
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?