Post on 17-Aug-2014
description
transcript
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Design & Develop for the iPhone and Beyond
by Brian Fling
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WILLKOMMEN! BIENVENUE!WELCOME!
BENVENUTO! BIENVENIDO!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WHO AM I?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-creator of Leaflets for the iPhone.Author of the dotMobi Mobile Web Developers Guide.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WHO ARE YOU?How many of you are developers?How many of you are designers?How many of you are entrepreneurs?How many of you have created a mobile site for any mobile platform?How many of you own an iPhone (2.5G or 3G)?How many have created iPhone-specific sites?How many of you shouldn’t be here because you’re actually chefs?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WHY MOBILE IS UTTERLY HORRIBLE
AND WHY YOU SHOULD RUN AWAY
Part One
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Brief
HISTORY of MOBILE
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
IN THE BEGINNING...
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Perceptions haven’t much changed since.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
It is up to us to change how people use mobile technology
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
1990 2000 201019801970
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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Portable! Fits in a BriefcaseSparse cellular networkVoice calls onlyCosts more per call than a pay phone
Brick Era
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
Candy Bar Era
1990 2000 201019801970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Candybar EraGSM, CDMA, TDMA, iDENMore cellular towersLess power needed,much smallerBetter voice qualityAdded SMSStill just a phone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
1990 2000 201019801970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Feature Phone EraGPRS, HSCSD, WiDENData-capable devicesAddition of Mobile WebCamera phones & MMSMass adoption as airtime rates lower
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
1990 2000 201019801970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Smart Phone EraGPRS, HSDPA, WI-FIThe Mobile Platform becomes keyEmail a primary driver in salesA push for Push NotificationsVery “gadgety”
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
Touch Era
1990 2000 201019801970
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.
the mythical“Future-Phone”
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
The iPhone is the shape of things to come.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Touch EraGPRS, HSPDA, EVDO, Wi-FiA focus on haptic interfacesAccelerometersGPS/Location-basedSubscriber-centered designRich interfacesA media platform“It’s about the web”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Gartner’sPREDICTIONS
for 2009
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Gartner’s Predictions1. Established Vendors Consolidate and New
Players Join the Fray2. Device Vendors Build Out Ecosystems3. Device Makers Remove Complexity for
Users4. Mobile Devices Become Lifestyle Statements5. High-End Device Platforms Become “Field-
Refreshable”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
These are not predictions.It’s happening.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The
MOBILE ECOSYSTEM
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.
IT IS ROUGH...We have to deal with a lot of junk!ARPU, depending on application goalsOperators (Vodafone, T-Mobile, AT&T, et al)
Di!erent languages (Java, C++, BREW)
Poor support for web standards (CSS, XHTML, JS)
The “Deck”Handsets (about a bajillion of them)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The mobile ecosystem has many layers. Each with their own complexities and obstacles.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
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.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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 © 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.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Other Network TechnologiesCDMA & EVDOiDEN & WiDENWiMAXWorldwide 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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Handsets!
© C
opyr
ight
200
8 G
arre
tt M
urra
y <in
fo@
garr
ettm
urra
y.net
>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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
PlatformsThe core mobile development platform in which all software is written.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Platforms
Licensed
Java MEJava ME (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
BlackBerry Java-based
Danger’s Hiptop Java-based
Apple’s iPhone Objective-C
Open Source
Android Java-based
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 SystemsOperating systems are common in Smart Phones, but rare in Feature phones.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Operating Systems
SymbianSymbian OS is a open-source 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. The new RAZR uses Linux as its Operating System.
OS X Used by Apple’s iPhone and iPod Touch.
Android Used by Android Phones and can be customized by Operators.
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 FrameworksA software framework that is used to implement the standard structure of an application for a specific operating system.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Application Frameworks
Java Applications 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.
Cocoa Touch Applications written using the iPhone version of the Cocoa can be deployed on iPhone’s and iPod Touches.
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 © 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
ApplicationsMobile 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.
The epitomy of Mobile 1.0, and probably the most prolific device.
THE RAZR
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
V3x: Openwave 6.2.3.1.c.1.112
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
V3x: Openwave 6.2.3.1.c.1.112
V3m: Openwave 6.2.3.1.c.1.115
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
V3x: Openwave 6.2.3.1.c.1.112
V3m: Openwave 6.2.3.1.c.1.115
V3xxi: Opera 8.0 (96.80.53R)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
V3x: Openwave 6.2.3.1.c.1.112
V3m: Openwave 6.2.3.1.c.1.115
V3xxi: Opera 8.0 (96.80.53R)
V8: Opera 8.5 (08.B7.23R)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!
THE RAZR
V3: Openwave 6.2.3.2
V3c/i/r: Openwave 6.2.3.4.c.1.109
V3m/V9m: Teleca-Obigo 4.0
V3x: Openwave 6.2.3.1.c.1.112
V3m: Openwave 6.2.3.1.c.1.115
V3xxi: Opera 8.0 (96.80.53R)
V8: Opera 8.5 (08.B7.23R)
This isn’t even HALF OF THE MODELS!
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Phot
o co
pyrig
ht J
erem
y Pl
emon
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.
All of these layers must be passed through before you get
to the content.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Why theMOBILE WEB?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Size, Depth, Breadth
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
why theMOBILE
WEB?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
20 Million
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
20 Million
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
20 Million
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
European Union (495m)
20 Million
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Population of the EarthSource: Wikipedia
United Kingdom (50m)
United States of America (303m)
European Union (495m)
China (1.3 billion)
20 Million
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Today
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Today
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Today
Mobile Users (2.9b)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Today
Mobile Users (2.9b)
Mobile Web Access (1.3b)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Tomorrow
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Tomorrow
Mobile Web Subscribers by2010
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Web of Tomorrow
Mobile Web Subscribers by2010
Source: Informa Telecoms & Media 2006
50%of the planet!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The mobile web is the most cost-e!ective way to reach
HALF THE PLANET.
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.
BUT...
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.
MOBILE WEB of Today
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MARKUP
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Largely relies on table-based designs, though no one admits it.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
STYLESHEETS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Limited CSS support.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Virtually no “cascade.”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
JAVASCRIPT
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
No Javascript.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Use of “WEB STANDARDS”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web Standards techniques and principles don’t apply.
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.
WHY MOBILE IS GOING TO CHANGE
EVERYTHING WE KNOW TO BE TRUE
Part Two
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
6 Months Ago...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MOBILE as a
MEDIUM
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.
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordings
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordingsCinema
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordingsCinemaRadio
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordingsCinemaRadioTelevision
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordingsCinemaRadioTelevisionThe Internet
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing PressRecordingsCinemaRadioTelevisionThe InternetMobile
MASSMEDIA7th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Benefit #1
FIRST TRULY PERSONAL MASS
MEDIA
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Benefit #2
FIRST ALWAYS ON MASS MEDIA
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Benefit #3
FIRST ALWAYS CARRIED MASS
MEDIA
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Benefit #4
ONLY MASS MEDIA WITH A BUILT IN
PAYMENT
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Benefit #5
POINT OF THOUGHT
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.
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.
PLUS
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.
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).
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
GPS
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
TRIANGULATIONGPS
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.
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.
DESIGNING for CONTEXT
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Cost Content ContextIf you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.
Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
What 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?
The 3 C’s of the Mobile Web
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Cost Content ContextIf you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.
Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
What 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?
The 3 C’s of the Mobile Web
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Cost Content ContextIf you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.
Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.
What 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?
The 3 C’s of the Mobile Web
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.
Tip #1ADDRESS THE
INHERENT BENEFITS OF THE MEDIA.
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.
5 unique benefitsFirst truly personal mass mediae.g. We don’t share our phones with our spouses
First always-on mass mediaInformation is always available 24/7, even when idle
First always-carried mass media7 out of 10 people sleep with their phones within reach
Only mass media with a built-in payment channelUniversal click-to-buy—twice as many people have phones than credit cards
O!ers point of thoughtAbility to create of consume content whenever the mood strikes
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Tip #2LOOK AT YOUR CONTENT IN MULTIPLE FACETS OF
DISTRIBUTION.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
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.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
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.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
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.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
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.
Tip #3CREATE SOLUTIONS
BASED ON GOALS.
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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Find a need & fill it.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Tip #4BALANCE THE
CONSTRAINTS OF THE TECHNOLOGY.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Balancing Goals
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Balancing Goals
Busin
ess G
oals
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Balancing Goals
User Goals
Busin
ess G
oals
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Balancing Goals
User Goals
Busin
ess G
oals Technical Goals
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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.
Tip #5REMEMBER
PHYSICAL CONTEXT.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
1990
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Who are they?What are they doing?
Where are they?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Tip #6ADAPT CONTENT
FOR MULTIPLE 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.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
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.
THE FUTURE IS HERE.Part Three
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MOBILE 2.0
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Web 1.0Proprietary
Walled GardensFirst to market
Brand-centered
Web 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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 webThe mobile web browser is the next killer appMobile Web Applications are the futureAJAX is the next frontierRich Interactions kill battery lifeThe Mobile User Experience SucksMobile Widgets are the next big thingThe Carrier is the new “C” wordWe are creators not consumers
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 webThe mobile web browser is the next killer appMobile Web Applications are the futureAJAX is the next frontierRich Interactions kill battery lifeThe Mobile User Experience SucksMobile Widgets are the next big thingThe Carrier is the new “C” wordWe are creators not consumers
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.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolutions
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Hot Trends
sensoringbiometrics
transactionslifestreaming
recommendationimage recognitionaugmented reality
mobile connected gameslocation-based social media
retail proximity media consumption
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 1.0Proprietary
Walled GardensFirst to market
Brand-centered
Mobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
Touch Era
1990 2000 201019801970
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.
the mythical“Future-Phone”
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.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A Confession
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
2,680 Mobile Web Apps!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
500 new mobile web apps in the last 2 months!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Over 1,000 new mobile web apps in the last 6 months!
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhoneClones
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhoneClones
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhoneClones
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G1
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G1
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Other
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Other
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Other
“D-Day”
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Other
“D-Day”
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Mobile 2.0 Market Penetration Forecast
Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009
TheiPhone
iPhone3G
iPhoneClones
The G12nd GenAndroid
Other
“D-Day”
10%
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
The App Store
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
10 Million Downloads and Counting!
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
over 4,000 Native Apps Available Today!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
1,000 new apps in oneweek!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
getleaflets.com
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
the iPhone is the shape of things to come.
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.
webkit featuresSupports all standard flavors of XHTMLSupports CSS 1, 2 and a good deal of CSS 3Javascript, including AJAX and advanced scriptingReplaceable fontsThis means complex layouts, styling and interaction...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
limitations10MB download limitJavascript execution time limit of 5 seconds for each top-level itemNo FlashNo JavaNo mouse-over, hover, tooltip mouse eventsNo file downloads or uploads!Slower processor, so intensive scripting can be laggy or choppy
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Nokia N95
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Android
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Look Familiar?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
The G1
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
iPod Touch
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
iPod Touch iPhone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
22 million**cumulative iPods
iPod Touch iPhone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
22 million**cumulative iPods
2 million
iPod Touch iPhone
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
22 million**cumulative iPods
2 million
?iPod Touch iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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.
CONTEXT is KEYIT REALLY IS. I SWEAR. YOU’LL THANK ME
LATER, HOPEFULLY.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
TIMING is EVERYTHING
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Speed Reality
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
EDGE
0 50 100 150 200
EDGE
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
EDGE
0 50 100 150 200
EDGE
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
EDGE
0 50 100 150 200
EDGE
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
3G (HSDPA)
0 3.75 7.50 11.25 15.00
3G
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
3G (HSDPA)
0 3.75 7.50 11.25 15.00
3G
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
3G (HSDPA)
0 3.75 7.50 11.25 15.00
3G
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Wi-Fi via Broadband
0 15 30 45 60
WI-FI
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Wi-Fi via Broadband
0 15 30 45 60
WI-FI
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Wi-Fi via Broadband
0 15 30 45 60
WI-FI
Max Speed Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
25% as fast
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
0 1.25 2.50 3.75 5.00
WI-FI
3G
EDGE
Speeds, compared
3% as fast
Actual Average
25% as fast
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
A 300kb file: EDGE, 3G & Wi-Fi
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Even though we have Wi-Fi, we can’t always rely on it.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Screen Reality
Phot
o co
pyrig
ht P
eter
Dea
n
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
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
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Desktop-sized Nytimes.com
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
iPhone-sized nytimes.com
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
iPhone-sized nytimes.com
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
nytimes.com on Android phone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Context!
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
What’s important here?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
What’s important here?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
What’s important here?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
What’s important here?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
What’s important here?
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
mobile nytimes.com
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
getleaflets.com
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
WHY MAKE LEAFLETS?We wanted to showcase the merger of Web 2.0 with Mobile 2.0The use of web standards and semantics in mobileDesigning for the mobile contextMobile web best practicesDesigning specifically for the iPhone/iPod TouchRapid and iterative development
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEMO
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
NOTE:These are only screenshots. To view Leaflets in all its useful glory, visit getleaflets.com on
your iPhone/iPod Touch.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen• Simple, iPhone-esque
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen• Simple, iPhone-esque
• Loading indicator for images in case of slow network
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen• Simple, iPhone-esque
• Loading indicator for images in case of slow network
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen• Simple, iPhone-esque
• Loading indicator for images in case of slow network
• Users know how to use it right away because it uses metaphors they’re used to
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Search
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Search• Send users to mobile
versions of search results where possible
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Search• Send users to mobile
versions of search results where possible
• Give users as many search options in one screen without having to reload
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Search• Send users to mobile
versions of search results where possible
• Give users as many search options in one screen without having to reload
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Search• Send users to mobile
versions of search results where possible
• Give users as many search options in one screen without having to reload
• More than just simple search (dictionary, shopping, et cetera)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
• Subscribe, unsubscribe, but don’t bother with read status
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
• Subscribe, unsubscribe, but don’t bother with read status
• Allow users to change from two-column to single-column for readability
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
• Subscribe, unsubscribe, but don’t bother with read status
• Allow users to change from two-column to single-column for readability
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
• Subscribe, unsubscribe, but don’t bother with read status
• Allow users to change from two-column to single-column for readability
• Read full articles, link to websites
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Feeds• Simple feed reader (the
first for the iPhone, BTW)
• Subscribe, unsubscribe, but don’t bother with read status
• Allow users to change from two-column to single-column for readability
• Read full articles, link to websites
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Newsvine
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Newsvine• Most of the Newsvine
content but it loads much faster
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Newsvine• Most of the Newsvine
content but it loads much faster
• Works much like Feeds, allows for single column view, full text reading, et cetera
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
• Users can mark apps as “favorites” to access them easily in the future
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
• Users can mark apps as “favorites” to access them easily in the future
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
• Users can mark apps as “favorites” to access them easily in the future
• Users can rate apps and comment on them
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
• Users can mark apps as “favorites” to access them easily in the future
• Users can rate apps and comment on them
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
App List• Our version of “the deck,”
collecting neat iPhone sites we liked
• Users can mark apps as “favorites” to access them easily in the future
• Users can rate apps and comment on them
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Upcoming
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Upcoming• View your Upcoming
events, including all details
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Upcoming• View your Upcoming
events, including all details
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Upcoming• View your Upcoming
events, including all details
• View your friends’ events as well
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Upcoming• View your Upcoming
events, including all details
• View your friends’ events as well
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Flickr
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Flickr• See your latest comments,
your latest photos and your friends’ latest photos
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Flickr• See your latest comments,
your latest photos and your friends’ latest photos
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Flickr• See your latest comments,
your latest photos and your friends’ latest photos
• Much faster than the full site, but provides a much nicer experience than the default mobile Flickr site
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Flickr• See your latest comments,
your latest photos and your friends’ latest photos
• Much faster than the full site, but provides a much nicer experience than the default mobile Flickr site
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
• Shows scores for the day’s finished games
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
• Shows scores for the day’s finished games
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
• Shows scores for the day’s finished games
• Shows upcoming games
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
• Shows scores for the day’s finished games
• Shows upcoming games
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Baseball• Nearly real-time updates
for scores, base positions, batters
• Shows scores for the day’s finished games
• Shows upcoming games• Also provides baseball
news
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
New York Times
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
New York Times• All the same content, less
than a tenth of the loading time of nytimes.com
• Styled to look more like NY Times’ own site
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SUCCESSFUL EXPERIMENTEntire application built between WWDC and the iPhone launch (~3 weeks)TechCrunch called it a “must-have iPhone app”105,000 hits the first week12,000 unique users the first week7,000 recurring users per weekAverage of 22 pages viewed per visitVirtually no drop o! in tra"c in the last year
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
TAKEAWAYSWhile we designed it for the iPhone, Leaflets could work on any capable mobile browserStandards, standards, standardsDesign for contextOptimize for bandwidthTest, then test some moreJavascript is crucial to the user experienceCSS3 is ideal for mobile development
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
HOW TO BUILD A COOL MOBILE APP IN LESS THAN A WEEK
Part Four
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
HTML, CSS & JSTHE CAUSE OF AND SOLUTION TO
ALL OF LIFE’S PROBLEMS
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Screen• Simple, iPhone-esque
• Loading indicator for images in case of slow network
• Users know how to use it right away because it uses metaphors they’re used to
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Home Icon CSS
#apps li {
float: left;
width: 56px;
height: 56px;
border: 1px hidden #666;
text-align: center;
margin: 7px 10px 20px;
background: #666 url(/media/images/button_glare.png) no-repeat;
-webkit-box-shadow: 0px 1px 3px black;
-webkit-border-radius: 10px;
}
#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;
}
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Layer your CSS where possible to save
bandwidth.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
controls.css
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
newsvine.css
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.+ 3 Kilobytes
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
+ 320 bytes
+ 3 Kilobytes
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
+ 320 bytes
+ 3 Kilobytes
-webkit-border-radius: 10px;+
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
+ 320 bytes
+ 3 Kilobytes
-webkit-border-radius: 10px;+
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Build your own mini-framework.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Nav Bar
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Nav Bar Buttons
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Nav Bar Buttons Inputs
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Nav Bar Buttons Inputs Photos
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
HeadlinesImage Handling
Lists
Nav Bar Buttons Inputs Photos ULs for News
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS, stacked
Core layoutBase TypographyLinks and colors
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS, stacked
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Your CSS, stacked
Core layoutBase TypographyLinks and colors
NavigationCommon buttons
Form controls
ButtonsPhotos ULs for News
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Only use what you need.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SAVE SPACEUse ob_start("ob_gzhandler") for PHP contentRemove whitespace from HTML and CSSRefactor Javascript code to be more e"cient and then remove unnecessary brackets and semi-colonsCompress images or use CSS where possibleCache data on the server for fastest possible server-side load times
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
CSSTRANSFORMS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
CSSTRANSFORMS
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Simple Code
<div id="card" class="card" onclick="flip(event)">
<div id="front" class="front face">
<p>♠ ♦<br> ♣ ♥</p> </div>
<div id="back" class="back face">
<p>♦ ♠<br> ♥ ♣</p> </div>
</div>
Step 1:
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Simple Code
function flip (event)
{
var element = event.currentTarget;
/* Toggle the setting of the classname attribute */
element.className = (element.className == 'card') ? ¬
'card flipped' : 'card';
}
Step 2:
<div id="card" class="card" onclick="flip(event)">
<div id="front" class="front face">
<p>♠ ♦<br> ♣ ♥</p> </div>
<div id="back" class="back face">
<p>♦ ♠<br> ♥ ♣</p> </div>
</div>
Step 1:
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Simple Code
.card.flipped
{
-webkit-transform: rotateY(180deg);
}
Step 3:
function flip (event)
{
var element = event.currentTarget;
/* Toggle the setting of the classname attribute */
element.className = (element.className == 'card') ? ¬
'card flipped' : 'card';
}
Step 2:
<div id="card" class="card" onclick="flip(event)">
<div id="front" class="front face">
<p>♠ ♦<br> ♣ ♥</p> </div>
<div id="back" class="back face">
<p>♦ ♠<br> ♥ ♣</p> </div>
</div>
Step 1:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEMOS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
JAVASCRIPT PROBLEMS (AND SOLUTIONS?)
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Potential Chokeville
function gradient(id, start, end, ms)
{
var speed = Math.round(ms/100);
var timer = 0;
if (start > end)
{
for (i = start; i >= end; i--)
{
setTimeout("set_opacity(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
else
{
for (i = start; i <= end; i++)
{
setTimeout("set_opacity(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
}
function set_opacity(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity/100);
}
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Potential Smoothness
#fader {
-webkit-transition: opacity 1s ease-out;
}
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
OBJECTIVELY SPEAKINGSproutCoreIn use by Apple, used primarily for non-mobile web applications, utilizes Ruby; available at sproutcore.com
Cappuccino (aka Objective-J)Developed by 280north, attempts to recreate Objective-C (namely Cocoa) in Javascript; available at cappuccino.org
Fundamentally di!erent ways to build web applicationsCloser to native application buildingPossibility of porting applications to the desktop
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Cappuccino Example
import <Foundation/CPObject.j>
import <Foundation/CPURLRequest.j>
import <Foundation/CPJSONPConnection.j>
import <AppKit/CPSlider.j>
import <AppKit/CPToolbar.j>
import <AppKit/CPToolbarItem.j>
import <AppKit/CPCollectionView.j>
var SliderToolbarItemIdentifier = "SliderToolbarItemIdentifier",
AddToolbarItemIdentifier = "AddToolbarItemIdentifier",
RemoveToolbarItemIdentifier = "RemoveToolbarItemIdentifier";
@implementation AppController : CPObject
{
CPURLConnection tagConnection;
CPString lastIdentifier;
CPDictionary photosets;
CPWindow theWindow;
CPCollectionView listCollectionView;
CPCollectionView photosCollectionView;
}
- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
....
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MULTI-TOUCHTWO FINGER SWIPES, THREE FINGER
SALUTES, SHAKING FISTS...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EXPOSEDiPhone OS 2.0+ exposes several multi-touch events to JavascriptUtilize native-like behavior in your appsCombined with CSS Transforms you can make powerful animations and interactions with a small amount of code
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEMOS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EASY APPSGET TO WORK ALREADY, WILL YOU? WE
NEED GROCERIES!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
THE QUICKEST WAYSUse RSSNearly all sites provide RSS feeds for their primary data and you can grab it, skin it and use it
Re-style your existing site to simplifySend iPhone users an iPhone-specific stylesheet that hides unnecessary content and restyles your site to fit the iPhone aesthetic
Build a bare-bones version of your current siteStart fresh and only focus on contextually-relevant sections of your site
Use DashcodeFor very simple sites, you might be able to whip up a quickie
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
RSS is great!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
THE BENEFITSVery easy to cacheThe feeds are text and have publish dates so you can quickly check them only when necessary
You’ve probably already got the RSS feeds readyNearly all publishing platforms create RSS automatically and it’s usually trivial to create additional feeds
Easy to grab updatesVery easy to re-style since it’s XMLYou’ve got a bunch of typed data ready to be wrangled
Gives the impression of a full suite of dataWith only the NY Times RSS feed, you can create an app
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Magpie RSS
<?php
define('MAGPIE_CACHE_DIR', 'rss_cache');
require_once('magpierss/rss_fetch.inc');
$rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬
rss/nyt/HomePage.xml');
?>
Step 1:
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Magpie RSS
<?php
define('MAGPIE_CACHE_DIR', 'rss_cache');
require_once('magpierss/rss_fetch.inc');
$rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬
rss/nyt/HomePage.xml');
?>
Step 1:
<?php foreach ($rss->items as $item): ?>
<h2><?= $item['title']; ?></h2>
<span><?= $item['description']; ?></span>
<?php endforeach; ?>
Step 2:
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MAGPIE RULES!Automatically caches contentYou can tweak how long content is cached for, where, all that good stu!
Easy to installDrag two folders into your app and include a file
Does all the work for youGive it a URL and that’s pretty much it
Free!Zero cost to get it up and running, zero maintenance cost other than hosting
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SECRET:We use Magpie for a majority of Leaflets.
It’s the core technology.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
SECRET:You can too. Just send me some money when
you’re filthy rich.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iUIAND OTHERS LIKE IT...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
FEATURESiPhone interface look and feel in a web appNative-looking controls, backgrounds, layout
Simple to implementIn some cases, doesn’t require much more than adding the kit to your project and changing a few lines of code
Handles orientation changesCan handle o!-site links as well, with the same animations and feelLow overhead
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DISADVANTAGESMost iUI sites tend to look the sameIf you’ve seen one, you’ve seen them all
Potential usability issuesWhile iUI makes an e!ort not to break things, depending on implementation the experience can su!er
Should your app look like it was made by Apple?Especially when iUI uses the most generic parts of the iPhone interface...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MOBILE WEB APPS vs.
N AT I V E A P P S
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.
When to make a Native App?If you want to charge for it.If you want to create a game.If you want to use location.If you want to use the camera.If you want to use the accelerometer.If you want to access the filesystem.If you user is likely to be o#ine.
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 featuresLoads 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.
But...
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Phone Gap
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEMO
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
GETTING USERSto your
IPHONE SITE
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEVICE DETECTION
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Device DetectionThe method of routing mobile devices to appropriate mobile specfic sites using the mobile browsers user agent string.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Routing MethodsEducate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or m.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 © 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.
Publish only one mobile specific site, designed for the
lowest supported browser, routing all mobile browsers to
it.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Advanced Device Detection
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Route to the best possible mobile specific site based on
the user agent of the requesting device.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
At this point we are basically talking about Adaptation.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Stylesheets
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Code XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet
to mobile devices.
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Example Mobile Stylesheet
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Example Mobile Stylesheet
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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>
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
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 © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
No Device Detection
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Rely on an alternate domain or subdirectory forcing the user to manually enter or
navigate to the mobile specific site.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DEVICE DETECTIONWe used a simple Javascript redirect:if (navigator.userAgent.match(/iPhone/i))
{
window.location.replace('http://app.getleaflets.com');
}
Or you can use other methods of detection:PHP (http://andymoore.info/php-to-detect-mobile-phones)URLs (e.g. m.site.com, site.com/m, site.mobi)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Device Detection Dilemma in Mobile 2.0
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
USING MEDIA QUERIESCalling 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"...
At least, not for the iPhone—it doesn’t support handheld stylesheets.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
OTHER STUFFSTHINGS TO CONSIDER, PONDER OR
IGNORE.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What about Ads?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
AD NETWORKSHouse adsLink from one section to another to drive tra"c to content a user might not realize they want (especially content relevant... what if a user sees a movie listing and then you can give them more content about the movie?)
Google AdSenseAdMobJumpTapGreystripeAppLoop
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Can you justify the costs of Mobile?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DON’T LIMITIt might be hard to justify an iPhone-only app for your site, but that doesn’t mean you can’t create a mobile site that looks nice and works wellMake an e!ort to write standards-based code that will be backwards compatibleIf you’re going to target other browsers, avoid CSS 3 and Javascript where possibleXHTML-MP and Mobile CSS are very modern and very powerful, don’t rule them out
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EXAMPLES
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
RESOURCES
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
http://mobiforge.com
Mobile Web Developers GuidePart I: Creating Simple Mobile Sites
BRIAN FLINGwith Ronan Cremin, Jo Rabin and D. Keith Robinson
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
http://mobiledesign.org
Co
pyr
igh
t ©
20
08
Bri
an F
ling
. All
trad
em
arks
an
d c
op
yrig
hts
re
mai
n t
he
pro
pe
rty
of
the
ir r
esp
ect
ive
ow
ne
rs.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
DANKE! MERCI!
THANK YOU! GRAZIE!
GRACIAS!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Q&AIf I don’t know the answer, I’ll lie.
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
twitter: twitter.com/fling