Developing for iPhone

developing
for the iPhone
tim lucas & pete ottery

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.

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

developing
for Mobile 2.0

photo by Esti Alvarez
ﬂickr.com/people/esti

COOKIES

iphone.news.com.au

-> link to www.news.com.au

/home.mobile

-> /?no-mobile-redirect=true

/webjam8.mobile

-> /webjam8

/webjam8

-> /webjam8.mobile

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

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

HOW MANY KITTENS DO WE NEED TO

SACRIFICE? photo by fenlandsnapper
ﬂickr.com/people/32834218@N00

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

EXAMPLE: WEBJAM 8
PHOTO BROWSING

AJAX
Data URLs
CSS Sprites
Asset Bundling
Cache Headers
YSlow

Part 1
Different interaction models.
Design for phones & iphones.

Part 2
Getting started.
Code examples.

thumbs/fingers
=
about 50 x 50px

“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.”

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

<html>
<head>
<meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=noquot;>
</head>
<body>




qÉñí



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

<html>
<head>
<style type=quot;text/cssquot;>

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

</style>
</head>
<body>


qÉñí




-- code continues below --

<html>
<head>

html {
}

body {
font: 16px/1.3 Helvetica;
}

</style>
</head>
<body>
qÉñí






<html>
<head>

html {
}

body {
}

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>



<html>
<head>

html {
}

body {
}

h1 {
font-size:1.6em;
}

.time-stamp {
color:#666;
qÉñí
padding: 5px 0;
margin-top:-.3em;
}

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

</style>
</head>
<body>



body {
}

h1 {
font-size:1.6em;
}

.time-stamp {
color:#666;
padding: 5px 0;
margin-top:-.3em;
}

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

qÉñí

</style>
</head>
<body>


body {
}

h1 {
font-size:1.6em;
}

.time-stamp {
color:#666;
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>


body {
}

h1 {
font-size:1.6em;
}

.time-stamp {
color:#666;
padding: 5px 0;
margin-top:-.3em;
}

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

h2 {
qÉñí
font-size:1.2em;
-webkit-border-radius: 5px;
padding: 3px 6px;
margin: 1em 0 .4em;
-webkit-box-shadow: 0 5px 0 #ccc;
}

</style>
</head>
<body>


h2 {
font-size:1.2em;
padding: 3px 6px;
margin: 1em 0 .4em;
}

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;
padding: 3px 6px;
margin: 1em 0 .4em;
}

a {
color:#000;
font-weight:bold;
display:block;
}

h2 a {
color:#fff;

} qÉñí
background: url(quot;sprites.pngquot;) no-repeat 100% -5px;

h2 {
font-size:1.2em;
padding: 3px 6px;
margin: 1em 0 .4em;
}

a {
color:#000;
font-weight:bold;
display:block;
}

h2 a {
color:#fff;

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

color:#000;
font-weight:bold;
display:block;
}

h2 a {
color:#fff;
}

ul {
margin:0;
padding:0;
}

li {

qÉñí
margin:0;
padding:0;
}

li a {
padding: 12px 30px 12px 0;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

color:#000;
font-weight:bold;
display:block;
}

h2 a {
color:#fff;
}

ul {
margin:0;
padding:0;
}

li {

qÉñí
margin:0;
padding:0;
}

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

ãKåÉïëKÅçãK~ì
ä~ìåÅÜÉÇ=åçî=MT

ãKåÉïëKÅçãK~ì áéÜçåÉKåÉïëKÅçãK~ì
ä~ìåÅÜÉÇ=åçî=MT ä~ìåÅÜÉÇ=àìäó=MU

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

ïÉÉâÇ~óë ïÉÉâÉåÇë

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

ïÉÉâÇ~óë ïÉÉâÉåÇë

Developing for iPhone

Recommended

Recommended

More Related Content

Similar to Developing for iPhone

Similar to Developing for iPhone (20)

More from Tim Lucas

More from Tim Lucas (11)

Recently uploaded

Recently uploaded (20)

Developing for iPhone