Mobile Monday Austin: How the iPhone will forever change the Mobile Space

Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

How the iPhone Will Forever Change the Mobile Spaceby Brian FlingMobile Monday Austin

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.Web 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Web 2.0Standards

Web Services

Web as a Platform

User-centered


Jargon Alert

Mobile 2.0The convergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location-based services to enhance information and services found on the web.


10 Things I Learned at Mobile 2.0 2006


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word


10 Things I Learned at Mobile 2.0 2006• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word• We are creators not consumers

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.Mobile 1.0Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0Standards

Web Services

Web as a Platform

User-centered


We are at the precipice of the next generation of

THE WEB.


Two companies in particular are making that happen...


Will it happen? Or is it hype?


Change occurs because there is a gap between what is and what should be.

— Craig McCaw

“

”

Copyright © 2008 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

the mythical“Future-Phone”

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The iPhone


A Confession

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The iPhone


From many perspectives the iPhone is not revolutionary.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Mobile Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010


But it is creating a revolution none-the-less.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Events

TV

Billboard

Radio

Live

Website

Auditory

KinestheticVisu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

Email

Send to Friend

WAP Site

Notify

Buy

WAP SiteWAP Site

Send to Friend

Join

Buy

NotifyNotify

Send to Friend

Post WAP Site

MMS

Send to Friend

Notify

Send to Friend

Join

Discuss

Send to Friend

Notify

Download

DownloadNotify

Vote

Join

Vote

Notify

Buy

Send to Friend

Notify


The iPhone is the shape of things to come.


The iPhone is the first mobile DEVICE worthy of being

labeled “Mobile 2.0”


iPhone Strengths


iPhone Strengths1. Smart phone for the

masses



masses2. Flat-rate data plan



masses2. Flat-rate data plan3. Device sold and

supported outside the carrier





4. No subsidization





4. No subsidization5. Updatable software






6. Location awareness






6. Location awareness7. Resetting bandwidth

expectations







expectations8. Portable device

convergence








convergence 9. Web & mobile

standards








convergence 9. Web & mobile

standards10. Impact on developer

communities


iPhone sales reached 4M in the first 90 days, means around 2.5M in the last quarter, reaching almost 20% of the market share. Probably the Fastest ramp-up of any consumer electronics device known to mankind.

— Chetan Sharma

“

”

http://www.chetansharma.com/blog/2008/01/15/macworld-update/




Apple estimates 10 million iPhones sold by the end of

2008.


70%complete

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

1147 Mobile Web Apps


Over 300 new mobile web apps in the last month alone.


The iPhone is shifting perceptions of what mobile

technology can do.


When we talk about iPhone, we’re really talking about

WEBKIT.

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Nokia N95

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Android

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Look Familiar?

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

iPod Touch

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

The iPod touch is an “entirely new type of iPod,” one that Apple sees moving the iPod beyond its roots as a mere media player, becoming “the first mainstream Wi-Fi mobile platform.

—Peter Oppenheimer, Apple CFO

Cop

yrig

ht ©

200

8 Br

ian

Flin

g. A

ll tr

adem

arks

and

cop

yrig

hts

rem

ain

the

prop

erty

of t

heir

resp

ectiv

e ow

ners

.

Over 22 million iPods sold in Q1 of 2008. Over 140 million iPods

sold in less than six years.


Mobile WebKit Features


Mobile WebKit Features• Supports all standard flavors of

XHTML



XHTML• Supports CSS 1, 2 and a good deal of

CSS 3




CSS 3• Javascript (including Ajax)




CSS 3• Javascript (including Ajax)• This means complex layouts, styling

and interaction...

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

iPhone apps that grow on you.

Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Why Create Leaflets?

(Blog Post Why we made Leaflets)

http://www.getleaflets.com/blog/why_we_made_leaflets.php


Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices...designing for the iPhone




Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.


We wanted to showcase...the merger of Web 2.0 and Mobile 2.0...the use of web standards in mobile...designing for the mobile context...mobile web best practices...designing for the iPhone...rapid and iterative development




Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

The Home Screen

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Feeds

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Newsvine

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

New York Times

Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Home Icon XHTML

<div id="apps"> <ul> <li id="navSearch"><a href="search/">Search</a></li> <li id="navRSS"><a href="feeds/">Feeds</a></li> <li id="navNewsvine"><a href="newsvine">Newsvine</a></li> <li id="navLinks"><a href="applist/">App List</a></li> <li id="navEvents"><a href="upcoming/">Upcoming</a></li> <li id="navFlickr"><a href="flickr/">Flickr</a></li> <li id="navDelicious"><a href="delicious/">del.icio.us</a></li> <li id="navBaseball"><a href="scores/">Baseball</a></li> <li id="navNYT"><a href="nyt/">NY Times</a></li> <?php if ($_user): ?> <li id="navSettings"><a href="user/settings.php">Settings</a></li> <?php endif; ?> </ul> <div id="loading_status"><img id="loader" src="/media/images/loader.gif" border="0" alt="" /><span id="ltext">Loading icons...</span></div></div>

Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Home Icon CSS

#apps li { float: left; width: 56px; height: 56px; border: 1px hidden #666; -webkit-border-radius: 10px; text-align: center; background: #666 url(/media/images/button_glare.png) no-repeat; -webkit-box-shadow: 0px 1px 3px black; margin: 7px 10px 20px;}

#apps li a { text-decoration: none; color: #999; display: block; padding-top: 60px; font-weight: bold; font-size: 0.8em;}

li#navNewsvine { background: url(/media/images/button_glare.png) no-repeat, url(/media/images/home_newsvine_low.png) no-repeat; background-color: #005422;}

Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Newsvine Leaflet CSS

Copy

right

© 2

008

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Controls CSS

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 3 Kilobytes

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

Copy

right

© 2

007

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+


A Successful Experiment


A Successful Experiment• The entire application was built between WWDC

and the iPhone launch (3 weeks)



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week• Average 22 pages view per visit



and the iPhone launch (3 weeks)• TechCrunch—“Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week• Average 22 pages view per visit• Virtually no drop off since first month!


Leaflets Takeaways


Leaflets Takeaways• While we designed it for the iPhone, Leaflets could

work on any “Mobile 2.0” device or browser.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.



work on any “Mobile 2.0” device or browser.• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.• CSS3 is ideal for mobile development.


Some Resources

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

iPhone for Web Developers

http://developer.apple.com/iphone/



Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Designing the Mobile User Experience

http://www.littlespringsdesign.com/

http://www.littlespringsdesign.com

http://www.littlespringsdesign.com

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Global Authoring Practices

http://www.passani.it/gap/



Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

XHTML Mobile Profile Tutorial

http://www.developershome.com/wap/xhtmlmp/



Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Design Book

http://mobilewebbook.com/

http://mobilewebbook.com

http://mobilewebbook.com

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.mobi Mobile Ready Report

http://mr.dev.mobi

http://mr.dev.mobi

http://mr.dev.mobi

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.mobi Developers Guide

http://dev.mobi

Mobile Web Developers GuidePart I: Creating Simple Mobile Sites

BRIAN FLINGwith Ronan Cremin, Jo Rabin and D. Keith Robinson

http://dev.mobi

http://dev.mobi

Copyright © 2008 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Over the Air—LondonApril 4-5

Web 2.0 Expo—San FranciscoApril 23-24

Web Design World—ChicagoMay 5-7

Web Design World—SeattleJuly 21-23

More to come...

2008Workshops


The End

Brian [email protected]

tel. +1 206 201-1875mob. +1 206 351-6060

mailto:[email protected]?subject=

mailto:[email protected]?subject=

Mobile Monday Austin: How the iPhone will forever change the Mobile Space

Business

Transcript of Mobile Monday Austin: How the iPhone will forever change the Mobile Space