Web Builder 2.0 Workshop: iPhone Design and Development Workshop
-
Upload
brian-fling -
Category
Technology
-
view
110 -
download
0
description
Transcript of Web Builder 2.0 Workshop: iPhone Design and Development Workshop
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone and Mobile Development SummitBrian Fling, Principal & Director of Strategy
Garrett Murray, Senior Developer
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
introduction
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Has worked directly with all Tier 1 carriers in North America and most of Tier 2.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Has worked directly with all Tier 1 carriers in North America and most of Tier 2.
* Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Has worked directly with all Tier 1 carriers in North America and most of Tier 2.
* Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design.
* Runs mobiledesign.org, the largest network of mobile designers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Has worked directly with all Tier 1 carriers in North America and most of Tier 2.
* Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design.
* Runs mobiledesign.org, the largest network of mobile designers.
* Author of dotMobi Developers Guide.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?* Co-founder & Principal of Blue Flavor.
* Mobile Designer since 2000.
* Has worked directly with all Tier 1 carriers in North America and most of Tier 2.
* Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design.
* Runs mobiledesign.org, the largest network of mobile designers.
* Author of dotMobi Developers Guide.
* Co-creator of Leaflets for the iPhone.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
* Web Developer since 1998.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
* Web Developer since 1998.
* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
* Web Developer since 1998.
* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.
* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
* Web Developer since 1998.
* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.
* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.
* Host of Maniacal Rage Podcast & TV.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Who is Garrett?* Senior Developer at Blue Flavor.
* Web Developer since 1998.
* Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme.
* Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog.
* Host of Maniacal Rage Podcast & TV.
* Co-creator of Leaflets for the iPhone.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
a play in two acts
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.
Act IToday’s Mobile Reality
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act IToday’s Mobile Reality
Act IIThe Future and You
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agenda09:00 Act I, Part One—The Mobile Ecosystem
Understanding the mobile technology and landscape.
10:45 BREAK
11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.
12:30 LUNCH
1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.
3:00 INTERMISSION
3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.
4:30 BREAK
4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Lecture Format
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Follow Alonghttp://blueflavor.com/webbuilder2.0
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Questions & Discussion
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Breaks
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Phrases & Jargon
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
MobilePortable personal communication devices able to
connect voice calls or data requests wirelessly.
Not to be confused with “cellular” or “cell.”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Mobile WebThe collective term for websites designed for
viewing on a mobile device. Websites are published
and accessed via the Internet just like a regular
desktop website.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
...just how big is the Mobile Web?
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.
Population of the Earth
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.
Population of the EarthSource: Wikipedia
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.
Population of the EarthSource: Wikipedia
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.
Population of the EarthSource: Wikipedia
England
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.
Population of the EarthSource: Wikipedia
England
United States of America
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.
Population of the EarthSource: Wikipedia
England
United States of America
European Union
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.
Population of the EarthSource: Wikipedia
England
United States of America
European Union
China
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 Web of Today
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 Web of Today
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 Web of Today
Mobile Subscribers
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 Web of Today
Mobile Subscribers
Mobile Web Access
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 Web of TodaySources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research
Mobile Subscribers
Mobile Web Access
Desktop Web Access
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 Web of Tomorrow
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 Web of Tomorrow
Mobile Web Subscribersby 2010
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 Web of Tomorrow
Mobile Web Subscribersby 2010
Source: Informa Telecoms & Media 2006
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile will revolutionize the way we gather and
interact with information in the next three years.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile has the potential to reach anybody through
any medium.
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.
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.
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
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
LBSLocation-based Services
The ability for a mobile device to provide
information that is relevant to it’s physical location
via a Global Positioning System (GPS).
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Prepare for a trulycontextual web.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
We are at the precipice of the next generation of
the web.
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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The iPhone is the shape of things to come.
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
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 Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
But we can’t start at the end.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act I
today’s mobile reality
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act I, Part 1
the mobile ecosystem
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Understanding and patience of the Mobile Ecosystem is
one of the most crucial skills of the Mobile Web.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile is not the Web
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Limited input or output
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Limited input or output
Limited guidelines or resources
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Limited input or output
Limited guidelines or resources
“No Standards”
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Limited input or output
Limited guidelines or resources
“No Standards”
People don’t “get it”
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Hundred of devices
Dozens of mobile web browsers
Operator controlled
Limited input or output
Limited guidelines or resources
“No Standards”
People don’t “get it”
The list goes on....
Some Obstacles of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
The mobile ecosystem has many layers. Each with their own complexities and obstacles.
Layers of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Operators
A mobile network operator (MNO) also known as...
• a wireless service provider
• a wireless carrier• a mobile phone operator
• a cellular company...is a telephone company that provides services for mobile phone subscribers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Mobile Service ProviderA broad term to describe the mobile network provider
that provides subscribers wireless access to voice and
data services.
Also known as a mobile network operator, or MNO in the telecommunications industry, though
usually referred to as carriers in North America and operators elsewhere in the world.
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.
Top Network Operators
Rank Company Primary Markets Network Subscribers*
1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil
2 Vodafone Europe, Australia, New Zealand, Africa
GSM, GPRS, EDGE, UMTS, HSDPA
206 mil
3 Telefonica Europe, Latin America GSM, GPRS, EDGE, UMTS, HSDPA
154.8 mil
4 China Unicom China GSM, GPRS, CDMA 153.1 mil
5 America Movil Mexico, Latin America GSM, GPRS, EDGE, UMTS, CDMA
137.2 mil
6 T-Mobile Europe, USA GSM, GPRS, EDGE, UMTS, HSDPA
111.8 mil
7 MTS Russia GSM, GPRS, EDGE, UMTS
74.67 mil
8 Orange Europe, Netherlands, Africa GSM, GPRS, EDGE, UMTS, HSDPA
73.2 mil
9 Telenor Netherlands, Eastern Europe GSM, GPRS, EDGE, UMTS
68 mil
10 AT&T USA GSM, GPRS, EDGE, UMTS, HSDPA
63.7 mil
* Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
MVNOMobile Virtual Network Operator
A branded wireless provider that does not own or
operate a wireless network.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
ARPUAverage Revenue Per User
A term used to describe the financial value of a
program, application or service.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Networks
Mobile networks communicate through electromagnetic radio waves with a cell site base station, the antennas of which are usually mounted on a tower, pole or building.They are often referred to by their generation and/or standard.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
G as in 2G, 2.5G and 3G.
The generations of mobile networks.
Officially there are only 1G, 2G & 3G, but several
midpoints have been defined as 2.5G, 2.75G, etc.
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.
Network Generations
3G 2.5G 2G1G
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.
Network Generations
3G 2.5G 2G1G
• Over time cellular networks have evolved
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.
Network Generations
3G 2.5G 2G1G
• Over time cellular networks have evolved
• Unfortunately unlike other technology, Mobile moves slowly, but why?
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.
Network Generations
3G 2.5G 2G1G
• Over time cellular networks have evolved
• Unfortunately unlike other technology, Mobile moves slowly, but why?
• Physical Infrastructure
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.
Network Generations
3G 2.5G 2G1G
• Over time cellular networks have evolved
• Unfortunately unlike other technology, Mobile moves slowly, but why?
• Physical Infrastructure
• Subsidization & Consumer Adoption
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.
1st Generation
3G 2.5G 2G1G
• Portable!Fits in a Briefcase
• Voice calls only
• Costs more per call than a pay phone
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.
2nd Generation
3G 2.5G 2G1G
• GSM, CDMA, TDMA, iDEN
• Less power needed,much smaller
• Better voice quality
• Added SMS
• Still just a phone
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.
The 2G/3G Transition
3G 2.5G 2G1G
• GPRS, HSCSD, WiDEN
• Data-capable devices
• Addition of Mobile Web
• Camera phones & MMS
• Mass adoption as airtime rates lower
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.
3rd Generation
3G 2.5G 2G1G
• W-CDMA, HSDPA, EVDO
• In the early stages today
• “Broadband” Speeds
• Add-on features like LBS and media players
• Slow uptake
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
LBSLocation-based Services
The ability for a mobile device to provide
information that is relevant to it’s physical location
via a Global Positioning System (GPS).
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.
GSM Mobile Networks
2G Second generation of mobile phone standards and technology Speeds
GSM Global System for Mobile communications 12.2 kbits/s
GPRS General Packet Radio Service max 60 kbits/s
EDGE Enhanced Data rates for GSM Evolution 59.2 kbits/s
HSCSD High-Speed Circuit-Switched Data 57.6 kbits/s
3G Third generation of mobile phone standards and technology Speeds
W-CDMA Wideband Code Division Multiple Access 14.4 Mbits/s
UMTS Universal Mobile Telecommunications System 3.6 Mbits/s
UMTS-TDD Time Division Duplexing 16 Mbits/s
TD-CDMA Time Divided Code Division Multiple Access 16 Mbits/s
HSPA High-Speed Packet Access 14.4 Mbits/s
HSDPA High-Speed Downlink Packet Access 14.4 Mbits/s
HSUPA High-Speed Uplink Packet Access 5.76 Mbit/s
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Other Network Technologies
* CDMA & EVDO
* iDEN & WiDEN
* WiMAXWorldwide Interoperability for Microwave Access, is a
telecommunications technology aimed at providing wireless data over
long distances in a variety of ways, from point-to-point links to full mobile
cellular type access. WiMAX allows a user, for example, to browse the
Internet on a laptop computer without physically connecting the laptop to
a router or switch port via an ethernet port.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Handsets
A mobile handset or “mobile phone” is a long-range, portable electronic device used for mobile communication.
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.
Many Flavors of Handsets
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.
Comparing Mobile Devices
Feature PhonesPhone, Web, SMS
Smart PhonesApplications
iPhone
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Platforms
The core mobile development platform in which all software is written.
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 Platforms
Licensed
Java ME
Java ME (previously known as Java 2 Platform, Micro Edition or J2ME) is a specification of a subset of the Java platform aimed at providing a certified collection of Java APIs for the development of software for small, resource-constrained devices such as cell phones, PDAs and set-top boxes.
BREWBREW is an application development platform created by Qualcomm for mobile phones. It is air-interface independent, i.e. it can support GSM/GPRS, UMTS, and CDMA
Windows Mobile Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API
Proprietary
Palm C/C++ based
RIM’s BlackBerry Java-based
Danger’s Hiptop Java-based
Apple’s iPhone Objective-C
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Operating Systems
Operating systems are common in Smart Phones, but rare in Feature phones.
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 Operating Systems
SymbianSymbian OS is a proprietary operating system, designed for mobile devices, with associated libraries, user interface frameworks and reference implementations of common tools.
Windows Mobile 6 Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API
Palm OS Used by Palm’s TREO line of mobile phones, though gradually being replaced by Windows Mobile.
Linux Increasingly used in mobile phones. Motorola announced the next RAZR will use Linux as its Operating System.
OS X Used by Apple’s iPhone.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Application Frameworks
A software framework that is used to implement the standard structure of an application for a specific operating system.
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.
Application Frameworks
JavaApplications written in the Java ME framework can often be deployed across the majority of Java-based devices.
BREW Applications written in the BREW framework can often be deployed across the majority of BREW-based devices.
Flash Lite Applications written using the Flash Lite 2.0 and Action Script 2.0 frameworks can run using the Flash Lite Player.
Windows Mobile 6 Applications written using the Win32 API can be deployed across the majority of Windows Mobile-based devices.
Web Web Applications can be deployed across the majority of devices that support the WAP 2.0 specifications and run using a mobile web browser.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Applications
Mobile applications often are designed to serve a particular function or purpose.Example applications may include Games, Web Browser, Camera or Media Player.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
ServicesNetwork-based services are often available at the Application, Framework, or OS level to enhance the relevance of information.Example services may include The Internet, Messaging or Location.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A word on standards
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
in short:Never dismiss the
complexities of mobile. They exist for a reason.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Questions?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
BreakReturn by 11:00 AM
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act I, Part 2
designing for context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agenda09:00 Act I, Part One—The Mobile Ecosystem
Understanding the mobile technology and landscape.
10:45 BREAK
11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.
12:30 LUNCH
1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.
3:00 INTERMISSION
3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.
4:30 BREAK
4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Thinking in Context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
What to make Mobile?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
First ask, “Why should this be
Mobile?”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Next ask,“What need do I serve by
being Mobile?”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
“Find a need and fill it.”
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.
Balancing Goals
User Goals
Busin
ess G
oals
Technical Goals
SweetSpot
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Start with a goal and reverse engineer it.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3Cs of the Mobile Web
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3Cs of the Mobile Web
* CostIf you don't develop your mobile website responsibly, the user could get
stuck with a big bill in order to view your content.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3Cs of the Mobile Web
* CostIf you don't develop your mobile website responsibly, the user could get
stuck with a big bill in order to view your content.
* ContentIssues like navigation, image sizes, page weight and scripts all need to be
considered when thinking about your website on mobile devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The 3Cs of the Mobile Web
* CostIf you don't develop your mobile website responsibly, the user could get
stuck with a big bill in order to view your content.
* ContentIssues like navigation, image sizes, page weight and scripts all need to be
considered when thinking about your website on mobile devices.
* ContextWhat does your website add to the users mobility? How do you add value
to the their physical context? What is the context in which they will use
your site? On a bus or train?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Lose anything that doesn’t support the goals.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Information Architecture
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 Bad Mobile IA
Home About Us
Company Overview
Home Suite
License Management
Services
Support Request
News
Sales Offices
Executives
Standard Suite
Product Services
Intranet Login
Events
Contact Form
Press Releases
Pro Suite
Installation Support Services
Office Hours
Org Chart
Whitepapers
Consulting Services
Contact
Products
Services
Support
News &
Events
Blog
Contact
Press Releases
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Information Architecture
* Your IA will be the foundation of your product. Think long-term, not what it is, but what will it become. The more
complex the IA, the actions and effort is required from the user.
* Keep it simple. Remember your goals. Find the tasks that maps to goals.
* Good trigger labels are crucial in mobile. They should be short, descriptive and meet user expectations.
Never be clever.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
5 Tips for Mobile IA
* Limit categories to 5
* Limit links to 10
* No more than 5 levels deep
* At least one content item per category
* Prioritize links by activity or popularity
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 Good Mobile IA
Home
About Us
Contact Us
News & Events
Products & Services
Support
Locations
Blog
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Remember:Goals, Cost, Content &
Context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
ClickstreamUsed to refer to the series of clicks, or path, the user
takes to reach a destination in an informational
space. Often used to describe user behavior gathered
from server logs, but also can be used in early
planning, as in “creating the optimal clickstream.”
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.
Designing Clickstreams
Home
Latest Blog Posts
Navigation
Latest News
Footer
Products &
Services
Product & Services
Overviews
Support
Footer
Navigation
News & Events
News Items
Events
Footer
Navigation
Contact
Locations
Contact Form
Phone Numbers
Primary Address
Footer
Navigation
Main Phone
Main AddressBlog
Recent Posts
Footer
Navigation
About Us
Company Overview
Executive Overview
Footer
Navigation
Content Area
Link to Page
Page
Legend
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.
Case Study
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.
Revised Rolling Stone IA
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.
Revised Rolling Stone IA
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.
Rolling Stone Clickstream
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Web Design
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.
Flavors of Mobile Design
More Compatible Richer 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.
Effort versus Reward
DeviceUI App
UI
GatewayDesign
ContentDesign
Time to complete task Goal
Effort
Reward
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.
Multiple Screens Sizes
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.
Multiple Screens Sizes
128 pixels
160 p
ixels
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.
Multiple Screens Sizes
176 pixels
220 p
ixels
128 pixels
160 p
ixels
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.
Multiple Screens Sizes
320 pixels
240 p
ixels
176 pixels
220 p
ixels
128 pixels
160 p
ixels
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.
Multiple Screens Sizes
240 pixels
320 p
ixels
320 pixels
240 p
ixels
176 pixels
220 p
ixels
128 pixels
160 p
ixels
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.
Multiple Screens Sizes
320 pixels
320 p
ixels
240 pixels
320 p
ixels
320 pixels
240 p
ixels
176 pixels
220 p
ixels
128 pixels
160 p
ixels
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.
Multiple Screens Sizes
320 pixels
320 p
ixels
240 pixels
320 p
ixels
320 pixels
240 p
ixels
176 pixels
220 p
ixels
128 pixels
160 p
ixels
Recommended Max Size
200 x 250 pixels
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.
Directional Orientation
PrimaryDirectionalOrientation
Select Previous Link or Scroll Up
Select Next Link or Scroll Down
Forward or Page Down
Back or Page Up
1
2
3 4
1
2
3
4
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 Vertically
Header
Footer
Content
Navigation
Navigation
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.
Flavor Matrix
Design Type Design Tool Delivery Complexity MSPs
J2ME
BREW
WML
XHTML-MP
Flash Lite
XHTML
Rich Photoshop Any Very Many
Rich Photoshop Carrier Very Few
Text HTML Web Simple All
Web CSS Web Simple All
Rich Flash TBD Semi Few
Rich CSS Web Simple All
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.
Case Study
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
* Be creativeDevices have reached a point where you can be as creative as you want to be.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
* Be creativeDevices have reached a point where you can be as creative as you want to be.
* Remember the goalsPut systems in place to regularly check against the goals.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
* Be creativeDevices have reached a point where you can be as creative as you want to be.
* Remember the goalsPut systems in place to regularly check against the goals.
* PrototypeCreate quick examples of the design and interaction.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
* Be creativeDevices have reached a point where you can be as creative as you want to be.
* Remember the goalsPut systems in place to regularly check against the goals.
* PrototypeCreate quick examples of the design and interaction.
* Test early and oftenGet opinions of others. Talking to one person is better than none.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Design Tips
* Be creativeDevices have reached a point where you can be as creative as you want to be.
* Remember the goalsPut systems in place to regularly check against the goals.
* PrototypeCreate quick examples of the design and interaction.
* Test early and oftenGet opinions of others. Talking to one person is better than none.
* Keep it simpleRemember if it doesn’t solve a problem or fill a need, lose it.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The canvas might not be as robust, but there is still a
need for design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Questions?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
LunchReturn by 1:30 PM
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act I, Part 3
mobile web development
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agenda09:00 Act I, Part One—The Mobile Ecosystem
Understanding the mobile technology and landscape.
10:45 BREAK
11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.
12:30 LUNCH
1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.
3:00 INTERMISSION
3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.
4:30 BREAK
4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
WAPWireless Application Protocol
An open international standard for applications
that use wireless communication, for example
Internet access from a mobile phone.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part A
Understanding Mobile Web Standards
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
XHTML-MPExtensible HyperText Markup Language:
Mobile Profile
A subset of XHTML Basic and HTML. Used as a
primary markup language for the WAP 2.0 protocol.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
* XHTML-MP is the predominant language for the mobile web.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
* XHTML-MP is the predominant language for the mobile web.
* It’s possible to use standard tools to create mobile web pages.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
* XHTML-MP is the predominant language for the mobile web.
* It’s possible to use standard tools to create mobile web pages.
* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
* XHTML-MP is the predominant language for the mobile web.
* It’s possible to use standard tools to create mobile web pages.
* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.
* XHTML-MP is the default industry-supported language for mobile web development.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable
* XHTML-MP is the predominant language for the mobile web.
* It’s possible to use standard tools to create mobile web pages.
* Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.
* XHTML-MP is the default industry-supported language for mobile web development.
* Unless a mobile service provider requires providing WML to support older devices, XHTML-MP is the only needed language in mobile web design.
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.
<? xml version=”1.0” encoding=”UTF-8” ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”
“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Hello World!</title>
<meta http-equiv=”content-type” content=”application/vnd.
wap.xhtml+xml” />
</head>
<body>
<div id=”intro”>
<h1>Hello World!</h1>
</div>
<div id=”content”>
<p>This is a simple XHTML-MP Page</p>
</div>
</body>
</html>
Example XHTML-MP
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World!</title> <meta http-equiv="content-type" content="application/vnd.wap.xhtml+xml"/> </head> <body> <div id="intro"> <h1>Hello World!</h1> </div> <div id="content"> <p>This is a simple XHTML-MP Page</p> </div> </body> </html>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
If you know XHTML.you know xhtml-mp.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
* Wireless CSS supports most CSS attributes, but not all of them.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
* Wireless CSS supports most CSS attributes, but not all of them.
* More advanced styling techniques won’t likely work across multiple mobile browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
* Wireless CSS supports most CSS attributes, but not all of them.
* More advanced styling techniques won’t likely work across multiple mobile browsers.
* The best advice is to keep your CSS as simple as possible.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Wireless CSS
* Wireless CSS supports most CSS attributes, but not all of them.
* More advanced styling techniques won’t likely work across multiple mobile browsers.
* The best advice is to keep your CSS as simple as possible.
* Try to use document styles versus stylesheets.
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.
Example Wireless CSS
body {
border-top: 10px solid #439213;
font: 10px Arial, Helvetica, sans-serif;
vertical-align: top;
padding: 0 8px;
margin: 0px;
}
p {
margin: 10px 0;
}
a {
color: #439213;
}
img {
vertical-align: middle;
}
body { border-top: 10px solid #439213; font: 10px Arial, Helvetica, sans-serif; padding: 0 8px; margin: 0px;}
p { margin: 10px 0;}
a { color: #439213;}
img { vertical-align: middle;}
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Keep your code and styles simple and you will do fine on most mobile browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
W3C Initiatives
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
W3C Initiatives
* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best
practices to developers, publishers and mobile service providers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
W3C Initiatives
* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best
practices to developers, publishers and mobile service providers.
* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to
indicate that the mobile web site adheres to the Best Practices
recommendations.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
W3C Initiatives
* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best
practices to developers, publishers and mobile service providers.
* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to
indicate that the mobile web site adheres to the Best Practices
recommendations.
* Device DescriptionGoal: To create a method of profiling and identifying device capabilities to
ease adaptation.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
One WebThe principle of making the same information and
services to users regardless of the device used.
This is a very misunderstood, misused and
commonly debated concept.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Caveat
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of the Mobile Web
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
WAP 2.0 content is supposed to be available in both WML
and XHTML-MP versions.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
WMLWireless Markup Language
An XML language used to specify content and user
interface for WAP devices.
Often referred as WAP 1.0
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
* Heavy use of tabled layouts
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
* Heavy use of tabled layouts
* Use of tables to control simple presentation
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
* Heavy use of tabled layouts
* Use of tables to control simple presentation
* Really, really bad code
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
* Heavy use of tabled layouts
* Use of tables to control simple presentation
* Really, really bad code
* A lot of problematic and hard to fix bugs
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Dark Side of Mobile
* No Cascading Stylesheets
* Heavy use of tabled layouts
* Use of tables to control simple presentation
* Really, really bad code
* A lot of problematic and hard to fix bugs
* Insane test cycles
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part B
Getting started with XHTML-MP
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
With a few exceptions you already know how to
code for mobile today.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Correct Encoding & Doctype
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Correct Encoding & Doctype
* Character EncodingEnsuring the use of the correct character encoding and doctype makes
sure that the page renders as expected.
<?xml version=”1.0” encoding=”UTF-8” ?>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Correct Encoding & Doctype
* Character EncodingEnsuring the use of the correct character encoding and doctype makes
sure that the page renders as expected.
<?xml version=”1.0” encoding=”UTF-8” ?>
* XHTML-MP DoctypeThe document type (doctype) tells the browser how the page needs to
render, including the rules and how strictly to follow these rules.
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code* All elements should be closed, e.g. <br />.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code* All elements should be closed, e.g. <br />.
* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code* All elements should be closed, e.g. <br />.
* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>
* All elements must be closed in the reverse order.<em><strong>Example Text</strong></em>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code* All elements should be closed, e.g. <br />.
* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>
* All elements must be closed in the reverse order.<em><strong>Example Text</strong></em>
* The alt attribute should be used for all images.<img src=”image.png” alt=”Image Description” />
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code (con’t)
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code (con’t)
* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code (con’t)
* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>
* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code (con’t)
* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>
* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>
* All attributes should appear within quotes.<hr noshade=”true”/>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Well-formed Code (con’t)
* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>
* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>
* All attributes should appear within quotes.<hr noshade=”true”/>
* All elements and attributes should use lowercase.<p class=”sm”>Example Text <span>is nice</span></p>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Avoid Tables for Layout
* Layout tables become a big problem when viewed in multiple mobile browsers.<body>
<div id=”header”> <!-- Header placeholder --> </div>
<div id=”content”> <!-- Content placeholder -->
</div> <div id=”footer”> <!-- Footer placeholder -->
</div></body>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Place Navigation in the Content Body
* Given the vertical orientation of the mobile page, we show only navigation that’s relevant to the page.<div id=”content”>
<ol>
<li><a href=”news.html”>News</a><li>
<li><a href=”products.html”>Our Products</a></li>
<li><a href=”customers.html”>Our Customers</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ol>
</div>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use accesskeys in the Primary Navigation
* The primary navigation should include an assigned accesskey that corresponds to a numbered keypad whenever possible.
<li><a href=”news.html” accesskey=”1”>News</a></li>
<li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>
<li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Ordered Lists for Navigation
* Using ordered lists for navigation rather than unordered lists will indicate to the use the associated accesskey.<ol> <li><a href=”news.html” accesskey=”1”>News</a></li>
<li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>
<li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li> </ol>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Document Styles, Not External Styles
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Document Styles, Not External Styles
* Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Use Document Styles, Not External Styles
* Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet.
* When using external stylesheets the user may experience a brief “flash” of unstyled text before the stylesheet has a chance to load. Instead, insert styles into the <head> of a document.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Linking Phone Numbers
* One of the benefits of the mobile web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls.
<a href=”tel:+012065450210”>+1 206 545-0210</a>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Forms can be Tricky
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Forms can be Tricky
* Entering data into a mobile web site is often a difficult and time-consuming process.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Forms can be Tricky
* Entering data into a mobile web site is often a difficult and time-consuming process.
* To avoid wasting the user’s time and causing frustration, use few or no forms.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Forms can be Tricky
* Entering data into a mobile web site is often a difficult and time-consuming process.
* To avoid wasting the user’s time and causing frustration, use few or no forms.
* However, when using forms, keep the needed information as little as possible.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Part C
Mobile Publishing
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Let’s back up for a minute.
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 Web Options
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 Web Options
SSR
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 Web Options
SSR Reformat
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 Web Options
SSR Reformat Stylesheets
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 Web Options
SSR Reformat Stylesheets Mobile Specific
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.
Context vs. Content
Mobile Specific Site
Stylesheets
Reformat
SSR
Complex
SimpleSlower Faster
Value
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.
Context vs. Content
Mobile Specific Site
Stylesheets
Reformat
SSR
Complex
SimpleSlower Faster
Value
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Stylesheets
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.
Example Mobile Stylesheet
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.
Example Mobile Stylesheet
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 2.0 Code
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
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 2.0 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Mobile 2.0</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="assets/styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="assets/styles/mobile.css" rel="stylesheet" type="text/css" media="handheld" /></head> <body><div id="container"> <div id="header"> <h1>Mobile 2.0 Conference</h1> <div id="loc">San Francisco, November 6, 2006</div> <div id="spons">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href="#speakers" accesskey="1">Speakers</a></li> <li><a href="#schedule" accesskey="2">Schedule</a></li> <li><a href="#location" accesskey="3">Location</a></li> <li><a href="#register" accesskey="4">Register</a></li> </ol> </div> <div id="promo"><a href="#register" title="Register Now, Only $45"></a></div> <div id="content"> <div id="speakers"> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id="speakers2"> <ul>
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Specific Sites
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
COVERED!
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A word on content management
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.
* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the
requesting device.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.
* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the
requesting device.
* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media
type attribute to render a mobile stylesheet to mobile devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Problem
* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported
browser, routing all mobile browsers to it.
* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the
requesting device.
* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media
type attribute to render a mobile stylesheet to mobile devices.
* No device detectionRely on an alternate domain or subdirectory forcing the user to manually
enter or navigate to the mobile specific site.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
AdaptationThe process of dynamically optimizing content to the
restrictions of the requesting device.
The adaptation model relies on the mobile device’s user
agent profile to tell the server to deliver markup or images
based on the browser, screen size and device capabilities.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
* WURFL http://wurfl.sourceforge.net/
A XML configuration file which contains information about device
capabilities and features for a variety of mobile devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
* WURFL http://wurfl.sourceforge.net/
A XML configuration file which contains information about device
capabilities and features for a variety of mobile devices.
* WALL http://wurfl.sourceforge.net/java/wall.php
An abstraction library that adapts content to the target device.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
* WURFL http://wurfl.sourceforge.net/
A XML configuration file which contains information about device
capabilities and features for a variety of mobile devices.
* WALL http://wurfl.sourceforge.net/java/wall.php
An abstraction library that adapts content to the target device.
* PHP http://www.andymoore.info/php-to-detect-mobile-phones/
PHP script that detects and redirects mobile browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
* WURFL http://wurfl.sourceforge.net/
A XML configuration file which contains information about device
capabilities and features for a variety of mobile devices.
* WALL http://wurfl.sourceforge.net/java/wall.php
An abstraction library that adapts content to the target device.
* PHP http://www.andymoore.info/php-to-detect-mobile-phones/
PHP script that detects and redirects mobile browsers.
* “Reverse” Device DetectionUse Javascript to detect desktop browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Device Detection Solutions
* WURFL http://wurfl.sourceforge.net/
A XML configuration file which contains information about device
capabilities and features for a variety of mobile devices.
* WALL http://wurfl.sourceforge.net/java/wall.php
An abstraction library that adapts content to the target device.
* PHP http://www.andymoore.info/php-to-detect-mobile-phones/
PHP script that detects and redirects mobile browsers.
* “Reverse” Device DetectionUse Javascript to detect desktop browsers.
* StylesheetsUse the stylesheet media type to detect mobile browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Publishing Your Mobile Site
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.
* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.
* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.
* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.
* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.
* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
DIY Publishing Methods
* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.
* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.
* Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Publishing through Operators
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
DeckRefers to the web presence maintained by a carrier.
When you access the web from a mobile device, the
first page you see is often referred to as the carrier
deck. But is commonly used to refer to all mobile web
sites.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Top-Deck = Increased ViewsLower Deck = Oblivion
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Deck PlacementThe term used to describe where a third-party
vendor WAP site, or application will appear on the
Carrier Deck. Default order on content on most
Carrier Decks is determined by sales. New items
often have temporary “Top-Deck Placement”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile Service Providers often require you to support
all their devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
If you can convince the operator that you can boost
ARPU, you will find an important ally.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
ARPUAverage Revenue Per User
A term used to describe the financial value of a
program, application or service.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Unless you have the experience and resources
very bad idea.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
* Crowding stems from mobile service provider provisioning.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
* Crowding stems from mobile service provider provisioning.
* Mobile service provider linked sites must support all provisioned devices and browsers.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
* Crowding stems from mobile service provider provisioning.
* Mobile service provider linked sites must support all provisioned devices and browsers.
* Adopts standards has been around for much longer in mobile.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Supporting Devices & Browsers
* Over 500 devices being sold each year.
* Over 50 mobile browsers to contend with.
* Crowding stems from mobile service provider provisioning.
* Mobile service provider linked sites must support all provisioned devices and browsers.
* Adopts standards has been around for much longer in mobile.
* Older or poorly designed devices don’t require support.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
* Desktop TestingTesting from a normal desktop browser is a great way to start.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
* Desktop TestingTesting from a normal desktop browser is a great way to start.
* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
* Desktop TestingTesting from a normal desktop browser is a great way to start.
* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.
* EmulatorsAllows for desktop verification without loading on to a device.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
* Desktop TestingTesting from a normal desktop browser is a great way to start.
* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.
* EmulatorsAllows for desktop verification without loading on to a device.
* Device TestingTest as many as you can, but focus on five good mainstream devices.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Testing
* Desktop TestingTesting from a normal desktop browser is a great way to start.
* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.
* EmulatorsAllows for desktop verification without loading on to a device.
* Device TestingTest as many as you can, but focus on five good mainstream devices.
* Usability TestingTest early and often with as many users as you can.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Focus on Five.
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.
DeviceAnywhere
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The Mobile-Specific Debate
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Questions?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
BreakReturn by 3:15 PM
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act II
the future and you
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agenda09:00 Act I, Part One—The Mobile Ecosystem
Understanding the mobile technology and landscape.
10:45 BREAK
11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.
12:30 LUNCH
1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.
3:00 INTERMISSION
3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.
4:30 BREAK
4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Act II, Part 1
mobile 2.0
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Recap on Context
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile has the potential to reach anybody through
any medium.
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.
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.
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
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Prepare for a trulycontextual web.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile will revolutionize the way we gather and
interact with information in the next three years.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
We are at the precipice of the next generation of
the web.
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.
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.
Two very big problems
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
CSS & JavaScript
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.
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.
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
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 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 plan
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 plan
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 plan
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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable 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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable 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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable 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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable 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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable 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 plan
3. Device sold and supported outside the carrier
4. No subsidization
5. Updatable software
6. Location awareness
7. Bandwidth expectations
8. Portable device convergence
9. Web & mobile standards
10. Impact on web communities
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.
scale
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
1.12 millionsold in q3 2007
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
27%of smart phones in US
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
3%of all phones in US
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Only the Beginning
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Apple estimates 10 million units sold by the end of
2008.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
When we talk about iPhone, we’re really talking about
WebKit.
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.
iPod Touch
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.
Nokia N95
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.
Google Android
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.
Look Familiar?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone is Not Alone
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone is Not Alone
* iPod Touch uses an identical version of Mobile Safari.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone is Not Alone
* iPod Touch uses an identical version of Mobile Safari.
* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone is Not Alone
* iPod Touch uses an identical version of Mobile Safari.
* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).
* Google’s Android SDK uses WebKit.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
iPhone is Not Alone
* iPod Touch uses an identical version of Mobile Safari.
* Nokia has been using a WebKit derivative in their S60 phones since 2006. Other models also include it (N95, et cetera).
* Google’s Android SDK uses WebKit.
* Mac OS X and Windows also have Safari.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features
* Supports all standard flavors of (X)HTML
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features
* Supports all standard flavors of (X)HTML
* Supports CSS 1, 2 and a good deal of 3
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features
* Supports all standard flavors of (X)HTML
* Supports CSS 1, 2 and a good deal of 3
* Javascript (including Ajax)
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features
* Supports all standard flavors of (X)HTML
* Supports CSS 1, 2 and a good deal of 3
* Javascript (including Ajax)
* This means complex layouts, styling and interaction...
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
WebKit can display full websites. As in, the real web.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
but:There’s a Speed Reality!
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.
EDGE
EDGE
Max Speed Actual Average
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.
EDGE
EDGE
200 kbps
Max Speed Actual Average
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.
EDGE
EDGE
200 kbps
125 kbps
Max Speed Actual Average
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.
WiFi via Broadband
WiFi
Max Speed Actual Average
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.
WiFi via Broadband
WiFi
54 mbps
Max Speed Actual Average
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.
WiFi via Broadband
WiFi
54 mbps
4 mbps
Max Speed Actual Average
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.
EDGE vs. WiFi
Actual Average
WiFi
EDGE
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.
EDGE vs. WiFi
Actual Average
WiFi
EDGE
4.00 mbps
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.
EDGE vs. WiFi
Actual Average
WiFi
EDGE
4.00 mbps
0.13 mbps
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.
32x slower!
EDGE vs. WiFi
Actual Average
WiFi
EDGE
4.00 mbps
0.13 mbps
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.
So then, Downloads...
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.
So then, Downloads...
300 kb
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.
So then, Downloads...
300 kb
WiFi: ~1 second
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.
So then, Downloads...
300 kb
WiFi: ~1 secondEDGE: 16 seconds
Bad example, but you get the drift.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
While we have WiFi, we cannot rely on it.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Finding the happy medium.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Questions?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
BreakReturn by 4:45 PM
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
But should you design for the iPhone?
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Yes. If you design to standards, future Mobile 2.0 devices
will love you.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
No. Know your users and what
devices they are likely to have.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
in short: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.
Act II, Part 2
iPhone Nitty-Gritty
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Agenda09:00 Act I, Part One—The Mobile Ecosystem
Understanding the mobile technology and landscape.
10:45 BREAK
11:00 Act I, Part Two—Designing for ContextDesigning for how people use information outside the web browser.
12:30 LUNCH
1:30 Act I, Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.
3:00 INTERMISSION
3:15 Act II, Part One—Mobile 2.0The future of mobile in the post-iPhone age.
4:30 BREAK
4:45 Act II, Part Two—iPhone Nitty-GrittyPractical examples for iPhone development and design.
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.
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: 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
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 Quick Demo
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.
Search
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.
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.
App List
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.
Upcoming
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.
Flickr
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.
del.icio.us
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.
Tour de France
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
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.
Baseball
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment
* The entire application was built between WWDC and the iPhone launch (3 weeks)
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment
* The entire application was built between WWDC and the iPhone launch (3 weeks)
* TechCrunch—“Must-Have iPhone App”
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.
* Standards. Standards. Standards.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While we designed it for the iPhone, Leaflets could work on any “Mobile 2.0” device.
* Standards. Standards. Standards.
* Design for context.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While 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.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Leaflets Takeaways
* While 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.
Technical Limits
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
* JavaScript execution time limit of 5 seconds for each top-level item
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
* JavaScript execution time limit of 5 seconds for each top-level item
* No Flash
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
* JavaScript execution time limit of 5 seconds for each top-level item
* No Flash
* No Java
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
* JavaScript execution time limit of 5 seconds for each top-level item
* No Flash
* No Java
* No mouse-over, hover, tooltip mouse events
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed
* 10MB download limit
* JavaScript execution time limit of 5 seconds for each top-level item
* No Flash
* No Java
* No mouse-over, hover, tooltip mouse events
* No file downloads or uploads!
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Design Shortcuts
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design
* iUI by Joe Hewitt
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design
* iUI by Joe Hewitt
* Google Web Toolkit (GWT)
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design
* iUI by Joe Hewitt
* Google Web Toolkit (GWT)
* Yahoo! User Interface Library (YUI)
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design
* iUI by Joe Hewitt
* Google Web Toolkit (GWT)
* Yahoo! User Interface Library (YUI)
* Many icon and interface design kits released
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
We Suggest Finding Your Own Design Path
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Compression is Your Friend
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
* Use ob_start("ob_gzhandler") for PHP content
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
* Use ob_start("ob_gzhandler") for PHP content
* Remove whitespace from HTML and CSS
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
* Use ob_start("ob_gzhandler") for PHP content
* Remove whitespace from HTML and CSS
* Refactor JavaScript code to be more efficient and then remove unnecessary brackets and semi-colons
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
* Use ob_start("ob_gzhandler") for PHP content
* Remove whitespace from HTML and CSS
* Refactor JavaScript code to be more efficient and then remove unnecessary brackets and semi-colons
* Compress images or use CSS where possible
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Save Space
* Use ob_start("ob_gzhandler") for PHP content
* Remove whitespace from HTML and CSS
* Refactor JavaScript code to be more efficient and then remove unnecessary brackets and semi-colons
* Compress images or use CSS where possible
* Cache data on the server for fastest possible loading times
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
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.
.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
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/
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/
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.
.mobi Mobile Ready Report
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.
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.
XHTML Mobile Profile Tutorial
http://www.developershome.com/wap/xhtmlmp/
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Exercise:BYO Mobile Idea
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
The End
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Brian FlingPrincipal & Director of [email protected]
tel. +1 206 545-0210mob. +1 206 351-6060
Garrett MurraySenior [email protected]
tel. +1 206 545-0210mob. +1 347 694-4045