Post on 28-Jan-2015
description
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0: Design and Develop for the iPhone and Beyondby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
or
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
How the iPhone Will Forever Change the Mobile Spaceby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
or
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Why I gave up on crappy Mobile User Experiences and fell in love with the iPhoneby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
but
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
these designs are
98%impractical
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
because of...
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Handsets!
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Content Adaptation!
SSR Reformat Stylesheets Mobile Specific
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0: Design and Develop for the iPhone and Beyondby Brian FlingWeb 2.0 Expo, San Francisco, April 22, 2008
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.• Has worked directly with all Tier 1 carriers in North
America and most of Tier 2.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.• 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.• 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, one of the largest communities of
mobile designers.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.• 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, one of the largest communities of
mobile designers.• Co-author of the dotMobi Mobile Web Developers Guide.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who is Brian?• Mobile Designer since 2000.• Worked for the first MVNO in North America.• 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, one of the largest communities of
mobile designers.• Co-author of the dotMobi Mobile Web Developers Guide.• Co-creator of Leaflets for the iPhone.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?• How many have created a mobile website or
mobile web application?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?• How many have created a mobile website or
mobile web application?• How many have created a mobile application
(J2ME, BREW, Flash Lite, or other)?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?• How many have created a mobile website or
mobile web application?• How many have created a mobile application
(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?• How many have created a mobile website or
mobile web application?• How many have created a mobile application
(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?• How many own an iPod Touch?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who am I talking to?• How many are web designers or developers?• How many are new to mobile or the mobile web?• How many have created a mobile website or
mobile web application?• How many have created a mobile application
(J2ME, BREW, Flash Lite, or other)?• How many own an iPhone?• How many own an iPod Touch?• How many are just trying to figure out how to
make a buck in mobile?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What is Web 2.0?
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web 2.0 is many things
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Though mostly jargon.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Jargon Bucket
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon is dangerous when used as the solution.
Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
All this technology is great, but how does this address the
needs of real people?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
My Dad
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
“Find a need and fill it.”
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Balancing Goals
Busin
ess G
oals
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Balancing Goals
User Goals
Busin
ess G
oals
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Balancing Goals
User Goals
Busin
ess G
oals Technical Goals
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Balancing Goals
User Goals
Busin
ess G
oals Technical Goals
SweetSpot
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Start with a goal and REVERSE ENGINEER IT.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
But mostly Web 2.0 is a way to describe an evolution.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Web 1.0Proprietary
Walled GardensFirst to market
Brand-centered
Web 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Phrases & Jargon
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 1.0
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Mobile 1.0The first two generations of browsers and hardware used to view the web on mobile devices. Design and development for these devices was highly di!cult due to the constraints of the technology.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
But the mobile ecosystem is today is far cry from the web
as we know it.
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Top Network Operators
Rank Company Primary Markets Network Subscribers*
1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil
2 VodafoneEurope, Australia, New Zealand,
Africa
GSM, GPRS, EDGE, UMTS, HSDPA 206 mil
3 Telefonica Europe, Latin AmericaGSM, GPRS, EDGE,
UMTS, HSDPA 154.8 mil
4 China Unicom China GSM, GPRS, CDMA 153.1 mil
5 America Movil Mexico, Latin AmericaGSM, GPRS, EDGE,
UMTS, CDMA 137.2 mil
6 T-Mobile Europe, USAGSM, GPRS, EDGE,
UMTS, HSDPA 111.8 mil
7 MTS RussiaGSM, GPRS, EDGE,
UMTS 74.67 mil
8 Orange Europe, Netherlands, AfricaGSM, GPRS, EDGE,
UMTS, HSDPA 73.2 mil
9 Telenor Netherlands, Eastern EuropeGSM, GPRS, EDGE,
UMTS 68 mil
10 AT&T USAGSM, GPRS, EDGE,
UMTS, HSDPA 63.7 mil
* Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
ARPUAverage Revenue Per UserA term used to describe the financial value of a program, application or service.
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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.O!cially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Other Network Technologies• CDMA & EVDO• iDEN & WiDEN• WiMAX
Worldwide 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 © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Many Flavors of Handsets
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Comparing Mobile Devices
Feature PhonesPhone, Web, SMS
Smart PhonesApplications
Other
Copyright © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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 MobileWindows 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 © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Operating Systems
Symbian
Symbian OS is a proprietary operating system, designed for mobile
devices, with associated libraries, user interface frameworks and
reference implementations of common tools.
Windows Mobile 6Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API
Palm OSUsed by Palm’s TREO line of mobile phones, though gradually being replaced by Windows Mobile.
LinuxIncreasingly used in mobile phones. Motorola announced the next RAZR will use Linux as its Operating System.
OS X Used by Apple’s iPhone.
Copyright © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Application Frameworks
JavaApplications written in the Java ME framework can often be deployed
across the majority of Java-based devices.
BREWApplications written in the BREW framework can often be deployed across the majority of BREW-based devices.
Flash LiteApplications written using the Flash Lite 2.0 and Action Script 2.0 frameworks can run using the Flash Lite Player.
Windows Mobile 6Applications written using the Win32 API can be deployed across the majority of Windows Mobile-based devices.
WebWeb Applications can be deployed across the majority of devices that support the WAP 2.0 specifications and run using a mobile web browser.
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Why Mobile?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
...just how big is the Mobile Web?
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
20 Million
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
20 Million
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
20 Million
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
European Union (495m)
20 Million
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
European Union (495m)
China (1.3 billion)
20 Million
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of Today
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of Today
Mobile Users (2.9b)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of Today
Mobile Users (2.9b)
Mobile Web Access (1.3b)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of TodaySources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research
Mobile Users (2.9b)
Mobile Web Access (1.3b)
Desktop Web Access (1.1b)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of Tomorrow
Mobile Web Subscribersby 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web of Tomorrow
Mobile Web Subscribersby 2010
Source: Informa Telecoms & Media 2006
Copyright © 2008 Brian Fling. 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 TWO YEARS.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile has the potential to reach anybody through
ANY MEDIUM.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MassMedia7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Tomi Ahonen3G Strategy Consultant
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema4.Radio
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema4.Radio5. Television
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema4.Radio5. Television6.The Internet
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema4.Radio5. Television6.The Internet7.Mobile
7 th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits1. First truly personal mass media
e.g. We don’t share our phones with our spouses.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits1. First truly personal mass media
e.g. We don’t share our phones with our spouses.
2. First always-on mass mediaInformation is always available 24/7, even when idle.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits1. First truly personal mass media
e.g. We don’t share our phones with our spouses.
2. First always-on mass mediaInformation is always available 24/7, even when idle.
3. First always-carried mass media7 out of 10 people sleep with their phone within reach.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits1. First truly personal mass media
e.g. We don’t share our phones with our spouses.
2. First always-on mass mediaInformation is always available 24/7, even when idle.
3. First always-carried mass media7 out of 10 people sleep with their phone within reach.
4. Only mass media with a built in payment channelUniversal click to buy. Twice as many people have phones than credit cards.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits1. First truly personal mass media
e.g. We don’t share our phones with our spouses.
2. First always-on mass mediaInformation is always available 24/7, even when idle.
3. First always-carried mass media7 out of 10 people sleep with their phone within reach.
4. Only mass media with a built in payment channelUniversal click to buy. Twice as many people have phones than credit cards.
5. O!ers point of thoughtAbility to create or consume content whenever the mood strikes.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile is the only mass media that can do EVERYTHING the
previous six can do.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
LBSLocation-based ServicesThe ability for a mobile device to provide information that is relevant to it’s physical location via a Global Positioning System (GPS).
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Triangulation
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Prepare for a trulyCONTEXTUAL WEB.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The 3 C’s of the Mobile Web• Cost
If you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The 3 C’s of the Mobile Web• Cost
If 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The 3 C’s of the Mobile Web• Cost
If 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.Considered together with the surroundings or circumstances.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of
distribution.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of
distribution.• Create solutions based on goals.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of
distribution.• Create solutions based on goals.• Balance the constraints of the technology.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of
distribution.• Create solutions based on goals.• Balance the constraints of the technology.• Remember physical context.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Designing for Context• Address the inherent benefits of the media.• Look at your content in multiple facets of
distribution.• Create solutions based on goals.• Balance the constraints of the technology.• Remember physical context.• Adapt content for multiple contexts.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Adapt forMULTIPLE CONTEXTS
Copyright © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Handsets!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
98%impractical
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Adapt forMULTIPLE CONTEXTS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Adapt to di!erent MEDIUMS.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mass Media
1. Printing Press2.Recordings3. Cinema4.Radio5. Television6.The Internet7.Mobile
7 th
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile is the only mass media that can do EVERYTHING the
previous six can do.
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
the mythical“Future-Phone”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Change occurs because there is a gap between what is and what should be.
— Craig McCaw
“
”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
We are at the precipice of the next generation of
THE WEB.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The iPhone is the shape of things to come.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Evolution
1980
Basic Phones
Feature Phones
Smart Phones
iPhone
1990 2000 2010
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0
Copyright © 2008 Brian Fling. 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.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Web 1.0Proprietary
Walled GardensFirst to market
Brand-centered
Web 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
• #1 Mobile 2.0 = The web• The mobile web browser is the next killer app• Mobile Web Applications are the future• AJAX is the next frontier• Rich Interactions kill battery life• The Mobile User Experience Sucks• Mobile Widgets are the next big thing• The Carrier is the new “C” word• We are creators not consumers
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile 1.0Proprietary
Walled GardensFirst to market
Brand-centered
Mobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
We are at the precipice of the next generation of
THE WEB.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Two companies in particular are making that happen...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
but lets not forget...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
The iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Confession
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
The iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
From many perspectives the iPhone is not revolutionary.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
But it is creating a revolution none-the-less.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The iPhone is the shape of things to come.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
6. Location awareness
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
6. Location awareness7. Resetting bandwidth
expectations
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
6. Location awareness7. Resetting bandwidth
expectations8. Portable device
convergence
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
6. Location awareness7. Resetting bandwidth
expectations8. Portable device
convergence 9. Web & mobile
standards
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone Strengths1. Smart phone for the
masses2. Flat-rate data plan3. Device sold and
supported outside the carrier
4. No subsidization5. Updatable software
(4 updates in 9 months)
6. Location awareness7. Resetting bandwidth
expectations8. Portable device
convergence 9. Web & mobile
standards10.Impact on developer
communities
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone sales reached 4M in the first 90 days, means around 2.5M in the last quarter, reaching almost 20% of the market share. Probably the Fastest ramp-up of any consumer electronics device known to mankind.
— Chetan Sharma
“
”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Apple estimates 10 million iPhones sold by the end of
2008.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
70%complete
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
1457 Mobile Web Apps!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
131 new mobile web apps in the last 14 days!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Over 600 new mobile web apps in the last 60 days!
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The iPhone is shifting perceptions of what mobile
technology can do.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
And people are eating it up!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
In fact...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
I believe that the iPhone will be so influential I’m putting
my livelihood to the test.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
When we talk about iPhone, we’re really talking about
WEBKIT.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Nokia N95
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Android
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Look Familiar?
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPod Touch
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
The iPod touch is an
“entirely new type of
iPod,” one that Apple
sees moving the iPod
beyond its roots as a
mere media player,
becoming “the first
mainstream Wi-Fi mobile
platform.
—Peter Oppenheimer, Apple CFO
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Over 22 million iPods sold in Q1 of 2008. Over 140 million iPods sold in less
than six years.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App oriPhone App?
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone Software Roadmap
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone Software Roadmap
iPhone Software Development Kit
Get the tools you need to
build your own iPhone
applications.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone Software Roadmap
iPhone Software Development Kit
Get the tools you need to
build your own iPhone
applications.
Downloaded 100,000 times in 4 days
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone Software Roadmap
iPhone Software Development Kit
Get the tools you need to
build your own iPhone
applications.
iPhone Enterprise Beta Program
Test pre-release iPhone
software with enterprise
features in your workplace.
Downloaded 100,000 times in 4 days
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone Dev Center
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Types of iPhone Applications
Productivity Utility Immersive
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Types of iPhone Applications
Productivity Utility Immersive
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Types of iPhone Applications
Productivity Utility Immersive
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Types of iPhone Applications
Productivity Utility Immersive
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
But are mobile applications a good idea?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone App
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web Standards
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and update
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devices
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the Desktop
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc
Loads Wicked Fast
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc
Loads Wicked FastNeed to know Objective-C
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc
Loads Wicked FastNeed to know Objective-CWorks only with iPhone and iPod Touch
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web App iPhone AppUses Web StandardsEasy to deploy and updateSupport all Mobile 2.0 devicesCan have a Web App in two weeks or less.Web Apps can be added to the DesktopMust have an Internet connection
Takes advantage of iPhone features:e.g. Camera, Photos, Address Book, Accelerometer, etc
Loads Wicked FastNeed to know Objective-CWorks only with iPhone and iPod TouchMust deploy over Apple’s iPhone store (or deck)
Copyright © 2008 Brian Fling. 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.Origins: Hypercard development
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Top-Deck = Increased ViewsLower Deck = Oblivion
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Building a great mobile user experience is hard.
Go easy on yourself bystarting simple.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Build Web Apps first.iPhone Apps second.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Build Web Apps first.iPhone Apps second.
(if at all)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WebKitWeb Apps
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features• Supports all standard flavors of
XHTML
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features• Supports all standard flavors of
XHTML• Supports CSS 1, 2 and a good deal
of CSS 3
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features• Supports all standard flavors of
XHTML• Supports CSS 1, 2 and a good deal
of CSS 3• Javascript (including Ajax)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile WebKit Features• Supports all standard flavors of
XHTML• Supports CSS 1, 2 and a good deal
of CSS 3• Javascript (including Ajax)• This means complex layouts,
styling and interaction...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Plus WebKit can display full websites. As in, the real web.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WTF?
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Speed Reality
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
EDGE
EDGE
200 kbps
Max Speed Actual Average
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
EDGE
EDGE
200 kbps
125 kbps
Max Speed Actual Average
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Wi-Fi via Broadband
WiFi
54 mbps
Max Speed Actual Average
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Wi-Fi via Broadband
WiFi
54 mbps
4 mbps
Max Speed Actual Average
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
EDGE vs. Wi-Fi
Actual Average
WiFi
EDGE
4.00 mbps
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
EDGE vs. Wi-Fi
Actual Average
WiFi
EDGE
4.00 mbps
0.13 mbps
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
32x slower!
EDGE vs. Wi-Fi
Actual Average
WiFi
EDGE
4.00 mbps
0.13 mbps
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
A 300kb file on EDGE vs. Wi-Fi
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
While the iPhone has Wi-Fi, we cannot rely on it.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
It isn’t about...
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
It’s about...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using the tools, know-how and resources to be able to
cost e!ectively build for the mobile context.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
The iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile websites have never been so easy to create and look good in the process.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone apps that grow on you.
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Why Create Leaflets?
We wanted to showcase
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Why Create Leaflets?
We wanted to showcase
...the merger of Web 2.0 and Mobile 2.0
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Why Create Leaflets?
We wanted to showcase
...the merger of Web 2.0 and Mobile 2.0
...the use of web standards in mobile
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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
(Blog Post Why we made Leaflets)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Quick Demo
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
The Home Screen
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Feeds
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Feeds
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Newsvine
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
App List
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Upcoming
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Flickr
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
del.icio.us
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Tour de France
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
New York Times
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SimpleXHTML & CSS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SimpleXHTML & CSS
(and Web Standard too!)
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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>
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
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;
}
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Controls CSS
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Newsvine Leaflet CSS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
CSS 3 Baby!
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
+ 3 Kilobytes
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
+ 320 bytes
+ 3 Kilobytes
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
+ 320 bytes
+ 3 Kilobytes
-webkit-border-radius: 10px;+
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
+ 320 bytes
+ 3 Kilobytes
-webkit-border-radius: 10px;+
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Using CSS3
+ 320 bytes
+ 3 Kilobytes
-webkit-border-radius: 10px;+
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Conditional CSS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
• To specify a stylesheet for everything else:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
• To specify a stylesheet for everything else:<link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet">
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
• To specify a stylesheet for everything else:<link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet">
• Do not use:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Using Media Queries• Calling an iPhone stylesheet:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
• To specify a stylesheet for everything else:<link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet">
• Do not use:<link media="handheld" href="mobile.css" type="text/css" rel="stylesheet">
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Simple Device Detection
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Device Detection• Use a simple Javascript redirect WebKit
browsers:<script type="text/javascript" charset="utf-8">
if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) { window.location.replace('/path/to/site/'); }</script>
• Or you can use other methods of Device Detection:
Server RedirectsWURFL (http://wurfl.sourceforge.net/)
PHP (http://www.andymoore.info/php-to-detect-mobile-phones/)
URLs (e.g. m.domain.co.uk, domain.co.uk/m, domain.mobi)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Technical Limitations
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Limitations Imposed• 10MB download limit
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Design Shortcuts
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design• iUI by Joe Hewitt
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Kits for iPhone Design• iUI by Joe Hewitt• Google Web Toolkit (GWT)
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
We Suggest Finding Your Own Design Path
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Compression is Your Friend
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Save Space• Use ob_start("ob_gzhandler") for PHP content
Copyright © 2008 Brian Fling. 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 © 2008 Brian Fling. 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 e"cient and
then remove unnecessary brackets and semi-colons
Copyright © 2008 Brian Fling. 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 e"cient and
then remove unnecessary brackets and semi-colons
• Compress images or use CSS where possible
Copyright © 2008 Brian Fling. 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 e"cient 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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Conclusions
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “Must-Have iPhone App”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “Must-Have iPhone App”• 105,000 hits the first week to website
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Successful Experiment• Leaflets entire application was built between
WWDC and the iPhone launch (3 weeks)• TechCrunch called it a “Must-Have iPhone App”• 105,000 hits the first week to website• 12,000 unique app users the first week• 7,000 recurring app users per week• Average 22 pages view per visit• Virtually no drop o! in tra"c since first month!
Copyright © 2008 Brian Fling. 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 or browser.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.• Design for context.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.
Copyright © 2008 Brian Fling. 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 or browser.
• Standards. Standards. Standards.• Design for context.• Optimize for the bandwidth.• Test. And then test some more.• Javascript is crucial to the user experience.• CSS3 is ideal for mobile development.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
When we talk about iPhone, we’re really talking about
WEBKIT.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Some Resources
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
iPhone for Web Developers
http://developer.apple.com/iphone/
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Design
http://mobiledesign.org
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Designing the Mobile User Experience
http://www.littlespringsdesign.com
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Global Authoring Practices
http://www.passani.it/gap/
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
XHTML Mobile Profile Tutorial
http://www.developershome.com/wap/xhtmlmp/
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
Mobile Web Design Book
http://mobilewebbook.com
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
.mobi Mobile Ready Report
http://mr.dev.mobi
Copyri
ght
© 2
00
8 B
rian F
ling. A
ll t
radem
ark
s a
nd c
opyri
ghts
rem
ain
the p
ropert
y o
f th
eir
respecti
ve o
wners
.
.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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
This presentation will be available at:
http://flingmedia.com/presentations/
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web Design World—ChicagoMay 5-7
Monotype Event—LondonJune 10
Handsets World—BerlinJune 11
Mobile Web 2.0 Summit—LondonJune 12
Web Design World—SeattleJuly 21-23
More to come...
2008Workshops
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The EndBrian Flingbrian@flingmedia.com
tel. +1 206 201-1875mob. +1 206 351-6060
website: flingmedia.comblog: flinglog.com