Developing for iPhone

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

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

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

animations

subtlety

only 2 people allowed.

Use your existing tools

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

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>

http://www.w3.org/TR/REC-html40/strict.dtd


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>




</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>




</body></html>



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>



-- code continues below --



qÉñí



}

body { font: 16px/1.3 Helvetica; }






qÉñí

qÉñí



}


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; }


<h1>Kiwis carve up washed up mystery lump</h1>




qÉñí

qÉñí



}



p:first-of-type { font-weight:bold; }


<h1>Kiwis carve up washed up mystery lump</h1>



qÉñí

qÉñí



}





<h1>Kiwis carve up washed up mystery lump</h1> -- code continues below --

qÉñí



}




h2 { font-size:1.2em; background-color:#c10b0e; border: 1px solid #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; }



qÉñí


html { -webkit-text-size-adjust: none; }





a { text-decoration:none; color:#000; font-weight:bold; }

h2 a { color:#fff; text-shadow: -1px -1px 0 #800000; }

qÉñí







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









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









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









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?

Developing for iPhone

Technology

Transcript of Developing for iPhone