Mobile 2.0: Design & Develop for the iPhone and Beyond

Alex EvangΗλεκτρονική - Συσκευές

5 Απρ 2012 (πριν από 2 χρόνια και 5 μήνες)

761 εμφανίσεις

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...
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.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
1990
2000
2010
1980
1970
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
Briefcase
Sparse cellular network
Voice calls only
Costs more per call
than a pay phone
Brick Era
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
Candy Bar Era
1990
2000
2010
1980
1970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Candybar Era
GSM, CDMA, TDMA, iDEN
More cellular towers
Less power needed,
much smaller
Better voice quality
Added SMS
Still just a phone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
1990
2000
2010
1980
1970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Feature Phone Era
GPRS, HSCSD, WiDEN
Data-capable devices
Addition of Mobile Web
Camera phones & MMS
Mass adoption as airtime
rates lower
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
1990
2000
2010
1980
1970
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The Smart Phone Era
GPRS, HSDPA, WI-FI
The Mobile Platform
becomes key
Email a primary driver in
sales
A push for Push
Notifications
Very “gadgety”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
Touch Era
1990
2000
2010
1980
1970
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.
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 Era
GPRS, HSPDA, EVDO, Wi-Fi
A focus on haptic interfaces
Accelerometers
GPS/Location-based
Subscriber-centered design
Rich interfaces
A media platform
“It’s about the web”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Gartner’s
PREDICTIONS
for

2009
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Gartner’s Predictions
1.
Established Vendors Consolidate and New
Players Join the Fray
2.
Device Vendors Build Out Ecosystems
3.
Device Makers Remove Complexity for
Users
4.
Mobile Devices Become Lifestyle Statements
5.
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.0
The 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 goals
Operators

(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 Provider
A 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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
ARPU
A
verage
R
evenue
P
er
U
ser
A 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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
GSM Mobile Networks
2G
Second generation of
mobile phone
standards and
technology
Speeds
GSM
Global System for Mobile communications
12.2 kbits/s
GPRS
General Packet Radio Service
max 60 kbits/s
EDGE
Enhanced Data rates for GSM Evolution
59.2 kbits/s
HSCSD
High-Speed Circuit-Switched Data
57.6 kbits/s
3G
Third generation of
mobile phone
standards and
technology
Speeds
W-CDMA
Wideband Code Division Multiple Access
14.4 Mbits/s
UMTS
Universal Mobile Telecommunications System
3.6 Mbits/s
UMTS-TDD
Time Division Duplexing
16 Mbits/s
TD-CDMA
Time Divided Code Division Multiple Access
16 Mbits/s
HSPA
High-Speed Packet Access
14.4 Mbits/s
HSDPA
High-Speed Downlink Packet Access
14.4 Mbits/s
HSUPA
High-Speed Uplink Packet Access
5.76 Mbit/s
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Other Network Technologies
CDMA & EVDO
iDEN & WiDEN
WiMAX
Worldwide Interoperability for Microwave Access, is a
telecommunications technology aimed at providing wireless data
over long distances in a variety of ways, from point-to-point links to
full mobile cellular type access. WiMAX allows a user, for example,
to browse the Internet on a laptop computer without physically
connecting the laptop to a router or switch port via an ethernet
port.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Handsets
A mobile handset or “mobile
phone” is a long-range,
portable electronic device
used for mobile
communication.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Handsets!
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Comparing Mobile Devices
Feature Phones
Phone, Web, SMS
Smart Phones
Applications
Other
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Operators
Networks
Handsets
Platforms
Operating Systems
Application Frameworks
Applications
Services
Layers of Mobile
Platforms
The core mobile development
platform in which all software
is written.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Platforms
Licensed
Java ME
Java 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
.
BREW
BREW 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 Systems
Operating systems are
common in Smart Phones, but
rare in Feature phones.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Operating Systems
Symbian
Symbian 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 Frameworks
A software framework that is
used to implement the
standard structure of an
application for a specific
operating system.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Applications
Mobile applications often are
designed to serve a particular
function or purpose.
Example applications may
include Games, Web Browser,
Camera or Media Player.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Photo copyright Jeremy Plemon
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
Services
Network-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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Why the
MOBILE 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 the
MOBILE
WEB
?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
20 Million
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
United Kingdom
(50m)
20 Million
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
United Kingdom
(50m)
United States of America
(303m)
20 Million
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
United Kingdom
(50m)
United States of America
(303m)
European Union
(495m)
20 Million
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Population of the Earth
Source: Wikipedia
United Kingdom
(50m)
United States of America
(303m)
European Union
(495m)
China
(1.3 billion)
20 Million
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.
Mobile Web of Today
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Mobile Users
(2.9b)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Mobile Users
(2.9b)
Mobile Web Access
(1.3b)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Today
Sources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research
Mobile Users
(2.9b)
Mobile Web Access
(1.3b)
Desktop Web Access
(1.1b)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Tomorrow
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Tomorrow
Mobile Web Subscribers by
2010
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Web of Tomorrow
Mobile Web Subscribers by
2010
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 Ahonen
3G Strategy Consultant
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
Cinema
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
Cinema
Radio
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
Cinema
Radio
Television
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
Cinema
Radio
Television
The Internet
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Printing Press
Recordings
Cinema
Radio
Television
The Internet
Mobile
MASS
MEDIA
7
th
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
LBS
L
ocation-
b
ased
S
ervices
The ability for a mobile device to provide
information that is relevant to it’s physical
location via a Global Positioning System
(GPS).
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
GPS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
TRIANGULATION
GPS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Prepare for a truly
CONTEXTUAL 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
Context
If 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
Context
If 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
Context
If 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
Context
The 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 #1
ADDRESS THE
INHERENT BENEFITS
OF THE MEDIA.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
MASS
MEDIA
7
th
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
5 unique benefits
First truly personal mass media
e.g. We don’t share our phones with our spouses
First always-on mass media
Information is always available 24/7, even when idle
First always-carried mass media
7 out of 10 people sleep with their phones within reach
Only mass media with a built-in payment
channel
Universal click-to-buy—twice as many people have phones than credit
cards
O
!
ers point of thought
Ability 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 #2
LOOK 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
Visual
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
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
Visual
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
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
Visual
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
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
Visual
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
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 #3
CREATE 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 #4
BALANCE THE
CONSTRAINTS OF
THE TECHNOLOGY.
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.
Balancing Goals
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Balancing Goals
Business Goals
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Balancing Goals
User Goals
Business Goals
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Balancing Goals
User Goals
Business Goals
Technical Goals
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Balancing Goals
User Goals
Business Goals
Technical Goals
Sweet
Spot
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 #5
REMEMBER
PHYSICAL CONTEXT.
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.
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 #6
ADAPT CONTENT
FOR MULTIPLE
CONTEXTS.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Adaptation
The 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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Adaptation
The 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
Adaptation
The 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 for
MULTIPLE CONTEXTS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visual
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
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
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.
Web 1.0
Proprietary
Walled Gardens
First to market
Brand-centered
Web 2.0
Standards
Web Services
Web as a Platform
User-centered
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
#1 Mobile 2.0 = The web
The mobile web browser is the next killer app
Mobile Web Applications are the future
AJAX is the next frontier
Rich Interactions kill battery life
The Mobile User Experience Sucks
Mobile Widgets are the next big thing
The Carrier is the new “C” word
We are creators not consumers
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Things I Learned at Mobile 2.0
#1 Mobile 2.0 = The web
The mobile web browser is the next killer app
Mobile Web Applications are the future
AJAX is the next frontier
Rich Interactions kill battery life
The Mobile User Experience Sucks
Mobile Widgets are the next big thing
The Carrier is the new “C” word
We are creators not consumers
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Jargon Alert
Mobile 2.0
The convergence of mobile services and web
services. The promise of Mobile 2.0 is to add
portability, ubiquitous connectivity and
location-based services to enhance
information and services found on the web.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolutions
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Hot Trends
sensoring
biometrics
transactions
lifestreaming
recommendation
image recognition
augmented reality
mobile connected games
location-based social media
retail proximity media consumption
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 1.0
Proprietary
Walled Gardens
First to market
Brand-centered
Mobile 2.0
Standards
Web Services
Web as a Platform
User-centered
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile Evolution
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
Touch Era
1990
2000
2010
1980
1970
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.
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.
A Confession
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
Clones
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
Clones
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
Clones
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Other
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Other
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Other
“D-Day”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Other
“D-Day”
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Mobile 2.0 Market Penetration Forecast
Q4 2007
Q1 2008
Q2 2008
Q3 2008
Q4 2008
Q1 2009
Q2 2009
Q3 2009
Q4 2009
The
iPhone
iPhone
3G
iPhone
Clones
The G1
2nd Gen
Android
Other
“D-Day”
10%
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The App Store
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
10 Million Downloads and Counting!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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 one
week!
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.
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 features
Supports all standard flavors of XHTML
Supports CSS 1, 2 and a good deal of CSS 3
Javascript, including AJAX and advanced
scripting
Replaceable fonts
This means complex layouts, styling and
interaction...
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
limitations
10MB download limit
Javascript execution time limit of 5 seconds
for each top-level item
No Flash
No Java
No mouse-over, hover, tooltip mouse events
No file downloads or uploads!
Slower processor, so intensive scripting can be
laggy or choppy
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Nokia N95
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Android
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Look Familiar?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
The G1
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPod Touch
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPod Touch
iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
22 million
*
*cumulative iPods
iPod Touch
iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
22 million
*
*cumulative iPods
2 million
iPod Touch
iPhone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
KEY
IT 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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EDGE
0
50
100
150
200
EDGE
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EDGE
0
50
100
150
200
EDGE
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
EDGE
0
50
100
150
200
EDGE
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
3G (HSDPA)
0
3.75
7.50
11.25
15.00
3G
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
3G (HSDPA)
0
3.75
7.50
11.25
15.00
3G
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
3G (HSDPA)
0
3.75
7.50
11.25
15.00
3G
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Wi-Fi via Broadband
0
15
30
45
60
WI-FI
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Wi-Fi via Broadband
0
15
30
45
60
WI-FI
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Wi-Fi via Broadband
0
15
30
45
60
WI-FI
Max Speed
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
Actual Average
25% as fast
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
0
1.25
2.50
3.75
5.00
WI-FI
3G
EDGE
Speeds, compared
3% as fast
Actual Average
25% as fast
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
A 300
kb
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
Photo copyright Peter Dean
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Screens Sizes!
320
pix
els
320
pix
els
240
pix
els
320
pix
els
320
pix
els
240
pix
els
176
pix
els
220
pix
els
128
pix
els
160
pix
els
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Desktop-sized Nytimes.com
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone-sized nytimes.com
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
iPhone-sized nytimes.com
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
nytimes.com on Android phone
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Context!
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What’s important here?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What’s important here?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What’s important here?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What’s important here?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
What’s important here?
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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.0
The use of web standards and semantics in
mobile
Designing for the mobile context
Mobile web best practices
Designing specifically for the iPhone/iPod
Touch
Rapid 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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Home Screen
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Home Screen

Simple, iPhone-esque
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Home Screen

Simple, iPhone-esque

Loading indicator for
images in case of slow
network
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Home Screen

Simple, iPhone-esque

Loading indicator for
images in case of slow
network
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Search
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Search

Send users to mobile
versions of search results
where possible
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Search

Send users to mobile
versions of search results
where possible

Give users as many
search options in one
screen without having to
reload
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Search

Send users to mobile
versions of search results
where possible

Give users as many
search options in one
screen without having to
reload
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Feeds
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Feeds

Simple feed reader (the
first for the iPhone, BTW)
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Feeds

Simple feed reader (the
first for the iPhone, BTW)

Subscribe, unsubscribe,
but don’t bother with read
status
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Newsvine
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Newsvine

Most of the Newsvine
content but it loads much
faster
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
App List
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
App List

Our version of “the deck,”
collecting neat iPhone
sites we liked
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Upcoming
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Upcoming

View your Upcoming
events, including all
details
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Upcoming

View your Upcoming
events, including all
details
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Upcoming

View your Upcoming
events, including all
details

View your friends’ events
as well
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Upcoming

View your Upcoming
events, including all
details

View your friends’ events
as well
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Flickr
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Flickr

See your latest comments,
your latest photos and
your friends’ latest photos
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Flickr

See your latest comments,
your latest photos and
your friends’ latest photos
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball

Nearly real-time updates
for scores, base positions,
batters
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball

Nearly real-time updates
for scores, base positions,
batters

Shows scores for the day’s
finished games
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball

Nearly real-time updates
for scores, base positions,
batters

Shows scores for the day’s
finished games
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball

Nearly real-time updates
for scores, base positions,
batters

Shows scores for the day’s
finished games

Shows upcoming games
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Baseball

Nearly real-time updates
for scores, base positions,
batters

Shows scores for the day’s
finished games

Shows upcoming games
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
New York Times
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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 EXPERIMENT
Entire application built between WWDC and the
iPhone launch (~3 weeks)
TechCrunch called it a “must-have iPhone app”
105,000 hits the first week
12,000 unique users the first week
7,000 recurring users per week
Average of 22 pages viewed per visit
Virtually 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.
TAKEAWAYS
While we designed it for the iPhone, Leaflets
could work on any capable mobile browser
Standards, standards, standards
Design for context
Optimize for bandwidth
Test, then test some more
Javascript is crucial to the user experience
CSS3 is ideal for mobile development
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
HOW TO BUILD A
COOL MOBILE APP IN
LESS THAN A WEEK
Part Four
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.
HTML
,
CSS
&
JS
THE CAUSE OF AND SOLUTION TO
ALL OF LIFE’S PROBLEMS
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
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
>
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Home Icon CSS
#apps

li
{

float
:

left
;

width
:

56
px
;

height
:

56
px
;

border
:

1
px

hidden

#666
;

text-align
:

center
;
margin
:

7
px
10
px
20
px
;

background
:

#666

url
(
/media/images/button_glare.png
)
no-repeat
;
-webkit-box-shadow
:

0
px
1
px
3
px

black
;
-webkit-
border
-radius
:

10
px
;
}
#apps

li

a
{

text-decoration
:

none
;

color
:

#999
;

display
:

block
;

padding-top
:

60
px
;

font-weight
:

bold
;

font-size
:

0.8
em
;
}
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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
controls.css
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
newsvine.css
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.
+
3 Kilobytes
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
+
320 bytes
+
3 Kilobytes
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
+
320 bytes
+
3 Kilobytes
-webkit-border-radius: 10px;
+
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
+
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.
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Nav Bar
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Nav Bar
Buttons
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Nav Bar
Buttons
Inputs
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Nav Bar
Buttons
Inputs
Photos
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Headlines
Image Handling
Lists
Nav Bar
Buttons
Inputs
Photos
ULs for News
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS, stacked
Core layout
Base Typography
Links and colors
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS, stacked
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
Your CSS, stacked
Core layout
Base Typography
Links and colors
Navigation
Common buttons
Form controls
Buttons
Photos
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 SPACE
Use
ob_start("ob_gzhandler")
for PHP content
Remove whitespace from HTML and CSS
Refactor Javascript code to be more e
"
cient
and then remove unnecessary brackets and
semi-colons
Compress images or use CSS where possible
Cache data on the server for fastest possible
server-side load times