Brian Fling (Blue Flavor)

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

How the iPhone Will

Change the Mobile Space

Brian Fling, Principal & Director of Strategy, Blue Flavor


Web 2.0


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.Web 1.0

Proprietary

Walled Gardens

First to market

Brand-centered

Web 2.0

Standards

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



1. #1 Mobile 2.0 = The web




2. The mobile web browser is the next killer app





3. Mobile web Applications are the future






4. AJAX is the next frontier







5. Javascript kills battery life








6. The Mobile User Experience Sucks









7. Mobile Widgets are the next big thing










8. The Carrier is the new “C” word











9. People abuse the Podium












10. We are creators not consumers

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.Mobile 1.0

Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0

Standards

Web Services

Web as a Platform

User-centered


But can it happen?


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 iPhone


A Confession





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 iPhone


From many perspectives the iPhone is not

revolutionary.


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


The iPhone is shifting perceptions of what

mobile technology can do.

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


375,000sold per month






































The iPhone is the first mobile device worthy of

being labeled“Mobile 2.0”


iPhone Uniqueness


iPhone Uniqueness1. Smart phone for the masses



2. Flat rate data



2. Flat rate data

3. Device sold and supported outside the carrier



2. Flat rate data


4. No Subsidization



2. Flat rate data


4. No Subsidization

5. Updateable Software



2. Flat rate data


4. No Subsidization


6. Location awareness



2. Flat rate data


4. No Subsidization



7. Bandwidth expectations



2. Flat rate data


4. No Subsidization




8. Portable device convergence



2. Flat rate data


4. No Subsidization





9. Web & Mobile Standards



2. Flat rate data


4. No Subsidization





9. Web & Mobile Standards

10. Impact on web communities

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.

(Made by the folks at Blue Flavor)

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.

Why Create Leaflets?

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

(Blog Post Why we made Leaflets)

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

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

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.

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

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

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


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.

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

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.

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

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.

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.

Newsvine Leaflet

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

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.

A Successful Experiment

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 entire application was built between WWDC

and the iPhone launch (3 weeks)

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.




TechCrunch—“Must-Have iPhone App”

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.





105,000 hits the first week to website

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.






12,000 unique app users the first week

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.







7,000 recurring app users per week

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.







7,000 recurring app users per week

Average 22 pages view per visit

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.

Leaflets Takeaways

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.

Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets

could work on any “Mobile 2.0” device.

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.



Standards. Standards. Standards.

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.




Design for context.

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.




Design for context.

Optimize for the bandwidth.

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.




Design for context.


Test. And then test some more.

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.




Design for context.



Javascript is crucial to the user experience.

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.




Design for context.



Javascript is crucial to the user experience.

CSS3 is ideal for mobile development.


Being Backwards Compatible


The iPhone is the first of many Mobile 2.0 Devices.


Thanks/Questions/Contact

Brian FlingCo-founder & Director of Strategy, Blue Flavor

[email protected]

tel. +1 206 545-0210mob. +1 206 351-6060

www.blueflavor.com

mailto:[email protected]

mailto:[email protected]

http://www.blueflavor.com

http://www.blueflavor.com

Brian Fling (Blue Flavor)

Business

mobile web browser

mobile web applications

mobile widgets

promise of mobile

convergence of mobile

respective owners

market web

mobile spacebrian fling