Upload
brian-fling
View
6.794
Download
1
Tags:
Embed Size (px)
Citation preview
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Web 2.0
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
1. #1 Mobile 2.0 = The web
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
But can it happen?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A Confession
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
From many perspectives the iPhone is not
revolutionary.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
But it is creating a revolution none-the-less.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
375,000sold per month
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The iPhone is the first mobile device worthy of
being labeled“Mobile 2.0”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
6. Location awareness
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
6. Location awareness
7. Bandwidth expectations
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
6. Location awareness
7. Bandwidth expectations
8. Portable device convergence
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
6. Location awareness
7. Bandwidth expectations
8. Portable device convergence
9. Web & Mobile Standards
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone Uniqueness1. Smart phone for the masses
2. Flat rate data
3. Device sold and supported outside the carrier
4. No Subsidization
5. Updateable Software
6. Location awareness
7. Bandwidth expectations
8. Portable device convergence
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)
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
-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
-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.
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.
A Successful Experiment
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.
A Successful Experiment
The entire application was built between WWDC
and the iPhone launch (3 weeks)
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.
A Successful Experiment
The entire application was built between WWDC
and the iPhone launch (3 weeks)
TechCrunch—“Must-Have iPhone App”
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.
A Successful Experiment
The entire application was built between WWDC
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
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
The entire application was built between WWDC
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
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
The entire application was built between WWDC
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
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
Standards. Standards. Standards.
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
Standards. Standards. Standards.
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
Standards. Standards. Standards.
Design for context.
Optimize for the bandwidth.
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
Standards. Standards. Standards.
Design for context.
Optimize for the bandwidth.
Test. And then test some more.
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.
Leaflets TakeawaysWhile we designed it for the iPhone, Leaflets
could work on any “Mobile 2.0” device.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Being Backwards Compatible
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The iPhone is the first of many Mobile 2.0 Devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Thanks/Questions/Contact
Brian FlingCo-founder & Director of Strategy, Blue Flavor
tel. +1 206 545-0210mob. +1 206 351-6060
www.blueflavor.com