Developing for iPhone

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 ﬂickr.com/people/randomurl

Mobile Safari CSS3 Javascript

OLD SCHOOL MOBILE DEVELOPMENT

IT’S EASY TO BE DISTRACTED BY THE HYPE photo by Mark Cohen ﬂickr.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

OLIVER WEIDLICH

One Web, No Go.

iphone.news.com.au

.mobile pages

redirect users

HTTP Header: User-Agent

Only redirect /

photo by Esti Alvarez ﬂickr.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 ﬂickr.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 ﬂickr.com/people/32834218@N00

Back button

Bookmarking

URLs

phones w/o javascript

NEW GENERATION OF ACCESSIBILITY ISSUES? photo by Adrian Q ﬂickr.com/people/aquan

WWJKD? photo by Faruk Ateş ﬂickr.com/people/kuraﬁre

WHO USES AN IPHONE IN BED? photo by Damien Roué ﬂickr.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

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 \"-//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> 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=\"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\"> <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> 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=\"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>

<!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> 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=\"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> <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> 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=\"link\">The Other Side</a></h2> -- code continues below --

<!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> qÉñí <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Éñí

<!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; 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=\"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; 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Éñí

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(\"sprites.png\") 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(\"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; }

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 { qÉñí 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; }

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 { qÉñí 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~ì áéÜçåÉKåÉïëKÅçãK~ì ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU

mfÛë ãKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë

mfÛë áéÜçåÉKåÉïëKÅçãK~ì ïÉÉâÇ~óë ïÉÉâÉåÇë

the end. Questions?

Developing for iPhone

2 comments

Notes on slide 1

18 Favorites