Mobile 2.0

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


WILLKOMMEN! BIENVENUE!WELCOME!

BENVENUTO! BIENVENIDO!


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.


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?


WHY MOBILE IS UTTERLY HORRIBLE

AND WHY YOU SHOULD RUN AWAY

Part One


A Brief

HISTORY of MOBILE


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.


Perceptions haven’t much changed since.


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


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.


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


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


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


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


Change occurs because there is a gap between what is and what should be.

— Craig McCaw

“

”


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.


The Touch EraGPRS, HSPDA, EVDO, Wi-FiA focus on haptic interfacesAccelerometersGPS/Location-basedSubscriber-centered designRich interfacesA media platform“It’s about the web”


Gartner’sPREDICTIONS

for 2009


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”


These are not predictions.It’s happening.


The

MOBILE ECOSYSTEM


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.


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)


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


Operators

Networks

Handsets

Platforms

Operating Systems


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.


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


Jargon Alert

ARPUAverage Revenue Per UserA term used to describe the financial value of a program, application or service.


Operators

Networks

Handsets

Platforms

Operating Systems


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.


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

http://en.wikipedia.org/wiki/Technology

http://en.wikipedia.org/wiki/Mobile_phone








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.


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Handsets

A mobile handset or “mobile phone” is a long-range, portable electronic device used for mobile communication.


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


Operators

Networks

Handsets

Platforms

Operating Systems


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

http://en.wikipedia.org/wiki/Application_programming_interface

http://en.wikipedia.org/wiki/Java_platform

http://en.wikipedia.org/wiki/Java_platform

http://en.wikipedia.org/wiki/Java_%28programming_language%29

http://en.wikipedia.org/wiki/Java_%28programming_language%29

http://en.wikipedia.org/wiki/Application_Programming_Interface

http://en.wikipedia.org/wiki/Application_Programming_Interface

http://en.wikipedia.org/wiki/Software

http://en.wikipedia.org/wiki/Software

http://en.wikipedia.org/wiki/Cell_phone

http://en.wikipedia.org/wiki/Cell_phone

http://en.wikipedia.org/wiki/Portable_digital_assistant

http://en.wikipedia.org/wiki/Portable_digital_assistant

http://en.wikipedia.org/wiki/Set-top_box

http://en.wikipedia.org/wiki/Set-top_box

http://en.wikipedia.org/wiki/Qualcomm

http://en.wikipedia.org/wiki/Qualcomm

http://en.wikipedia.org/wiki/Telephone




http://en.wikipedia.org/wiki/GSM

http://en.wikipedia.org/wiki/GSM

http://en.wikipedia.org/wiki/GPRS

http://en.wikipedia.org/wiki/GPRS

http://en.wikipedia.org/wiki/UMTS

http://en.wikipedia.org/wiki/UMTS

http://en.wikipedia.org/wiki/CDMA

http://en.wikipedia.org/wiki/CDMA

http://en.wikipedia.org/wiki/Operating_system


http://en.wikipedia.org/wiki/Microsoft


http://en.wikipedia.org/wiki/Windows_API




Operators

Networks

Handsets

Platforms

Operating Systems


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.


http://en.wikipedia.org/wiki/Proprietary_software

http://en.wikipedia.org/wiki/Proprietary_software



http://en.wikipedia.org/wiki/Library_%28computer_science%29

http://en.wikipedia.org/wiki/Library_%28computer_science%29

http://en.wikipedia.org/wiki/User_interface

http://en.wikipedia.org/wiki/User_interface









Operators

Networks

Handsets

Platforms

Operating Systems


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.


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.


Operators

Networks

Handsets

Platforms

Operating Systems


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.


The epitomy of Mobile 1.0, and probably the most prolific device.

THE RAZR


The epitomy of Mobile 1.0, and probably the most prolific device.Also, the perfect example of handset madness™ to the extreme!

THE RAZR



THE RAZR

V3: Openwave 6.2.3.2



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109

V3m/V9m: Teleca-Obigo 4.0



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109


V3x: Openwave 6.2.3.1.c.1.112



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109


V3x: Openwave 6.2.3.1.c.1.112

V3m: Openwave 6.2.3.1.c.1.115



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109


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)



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109


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)



THE RAZR


V3c/i/r: Openwave 6.2.3.4.c.1.109


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


Operators

Networks

Handsets

Platforms

Operating Systems


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.


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.


Why theMOBILE WEB?


Size, Depth, Breadth


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.


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.


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.



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.




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.




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

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 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 Subscribers by2010

Source: Informa Telecoms & Media 2006

50%of the planet!


The mobile web is the most cost-e!ective way to reach

HALF THE PLANET.


We are at the precipice of the next generation of

THE WEB.


BUT...


MOBILE WEB of Today


MARKUP


Largely relies on table-based designs, though no one admits it.


STYLESHEETS


Limited CSS support.


Virtually no “cascade.”


JAVASCRIPT


No Javascript.


Use of “WEB STANDARDS”


Web Standards techniques and principles don’t apply.


BUT...


WHY MOBILE IS GOING TO CHANGE

EVERYTHING WE KNOW TO BE TRUE

Part Two


6 Months Ago...


MOBILE as a

MEDIUM


Tomi Ahonen3G Strategy Consultant


MASSMEDIA7th


Printing Press

MASSMEDIA7th


Printing PressRecordings

MASSMEDIA7th


Printing PressRecordingsCinema

MASSMEDIA7th


Printing PressRecordingsCinemaRadio

MASSMEDIA7th


Printing PressRecordingsCinemaRadioTelevision

MASSMEDIA7th


Printing PressRecordingsCinemaRadioTelevisionThe Internet

MASSMEDIA7th


Printing PressRecordingsCinemaRadioTelevisionThe InternetMobile

MASSMEDIA7th


Benefit #1

FIRST TRULY PERSONAL MASS

MEDIA


Benefit #2

FIRST ALWAYS ON MASS MEDIA


Benefit #3

FIRST ALWAYS CARRIED MASS

MEDIA


Benefit #4

ONLY MASS MEDIA WITH A BUILT IN

PAYMENT


Benefit #5

POINT OF THOUGHT


Mobile is the only mass media that can do EVERYTHING the

previous six can do.


PLUS


Mobile has the potential to reach anybody through

ANY MEDIUM.


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


Prepare for a trulyCONTEXTUAL WEB.


Mobile will REVOLUTIONIZE the way we gather and interact

with information in the NEXT TWO YEARS.


DESIGNING for CONTEXT


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


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.


Tip #1ADDRESS THE

INHERENT BENEFITS OF THE MEDIA.


MASSMEDIA7th


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


Tip #2LOOK AT YOUR CONTENT IN MULTIPLE FACETS OF

DISTRIBUTION.


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

Email

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


Tip #3CREATE SOLUTIONS

BASED ON GOALS.


My Dad


Find a need & fill it.


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


Start with a goal and REVERSE ENGINEER IT.


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.


1990


Who are they?What are they doing?

Where are they?


Tip #6ADAPT CONTENT

FOR MULTIPLE CONTEXTS.


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.


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.


Adapt forMULTIPLE CONTEXTS


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

Email

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


THE FUTURE IS HERE.Part Three


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.


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.


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


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


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


Change occurs because there is a gap between what is and what should be.

— Craig McCaw

“

”


the mythical“Future-Phone”


We are at the precipice of the next generation of

THE WEB.


Two companies in particular are making that happen...


but lets not forget...

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 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.

2,680 Mobile Web Apps!


500 new mobile web apps in the last 2 months!


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.

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.


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.


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.


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.


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.


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.


Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009

TheiPhone

iPhone3G

iPhoneClones


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.


Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009

TheiPhone

iPhone3G

iPhoneClones


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.


Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009

TheiPhone

iPhone3G

iPhoneClones


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!


1,000 new apps in oneweek!


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.


When we talk about iPhone, we’re really talking about

WEBKIT


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...


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.


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.


2 million

?iPod Touch iPhone


Over 140 million iPods sold in less than six years.


CONTEXT is KEYIT REALLY IS. I SWEAR. YOU’LL THANK ME

LATER, HOPEFULLY.


TIMING is EVERYTHING


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.

3G (HSDPA)

0 3.75 7.50 11.25 15.00

3G


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


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


Even though we have Wi-Fi, we can’t always rely on it.


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.

nytimes.com on Android phone


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.

mobile nytimes.com


getleaflets.com


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


DEMO


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.


• 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.



• 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.



• 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.



• 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.



• 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.




• 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.




• 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.



• 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.



• 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

• 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

• 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.



• 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.




• 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.




• 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


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


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


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.


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.



• 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;

}


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;+


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


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



Form controls


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



Form controls


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



Form controls


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



Form controls


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



Form controls


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


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



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



Form controls

ButtonsPhotos ULs for News


Only use what you need.


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


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:



<p>♠ ♦<br> ♣ ♥</p> </div>


<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:



<p>♠ ♦<br> ♣ ♥</p> </div>


<p>♦ ♠<br> ♥ ♣</p> </div>

</div>

Step 1:


DEMOS


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;

}


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

{

....


MULTI-TOUCHTWO FINGER SWIPES, THREE FINGER

SALUTES, SHAKING FISTS...


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


DEMOS


EASY APPSGET TO WORK ALREADY, WILL YOU? WE

NEED GROCERIES!


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


RSS is great!


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:

http://www.nytimes.com/services/xml/


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:




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


SECRET:We use Magpie for a majority of Leaflets.

It’s the core technology.


SECRET:You can too. Just send me some money when

you’re filthy rich.


iUIAND OTHERS LIKE IT...


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


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...


MOBILE WEB APPS vs.

N AT I V E A P P S


But are mobile applications a good idea?


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.


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)


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


Top-Deck = Increased ViewsLower Deck = Oblivion


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”

http://mobiledesign.org/articles/mobile_glossary.php#carrier_deck

http://mobiledesign.org/articles/mobile_glossary.php#wap

http://mobiledesign.org/articles/mobile_glossary.php#wap

http://mobiledesign.org/articles/mobile_glossary.php#carrier_deck


Building a great mobile user experience is hard.

Go easy on yourself bystarting simple.


Build Web Apps first.iPhone Apps second.


Build Web Apps first.iPhone Apps second.

(if at all)


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


DEMO


GETTING USERSto your

IPHONE SITE


DEVICE DETECTION


Jargon Alert

Device DetectionThe method of routing mobile devices to appropriate mobile specfic sites using the mobile browsers user agent string.


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.


Simple Device Detection


Publish only one mobile specific site, designed for the

lowest supported browser, routing all mobile browsers to

it.


Advanced Device Detection


Route to the best possible mobile specific site based on

the user agent of the requesting device.


At this point we are basically talking about Adaptation.


Mobile Stylesheets


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.

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>

http://www.w3.org/1999/xhtml

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd





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




<head>






</head>

<body>


<div id="header">




<ol>





</ol>

</div>


<div id="content">

<div id="speakers">

<h2>Speakers</h2>





<ul>


No Device Detection


Rely on an alternate domain or subdirectory forcing the user to manually enter or

navigate to the mobile specific site.


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)

http://andymoore.info/php-to-detect-mobile-phones

http://app.getleaflets.com

http://app.getleaflets.com

http://andymoore.info/php-to-detect-mobile-phones


The Device Detection Dilemma in Mobile 2.0


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.


OTHER STUFFSTHINGS TO CONSIDER, PONDER OR

IGNORE.


What about Ads?


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


Can you justify the costs of Mobile?


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


EXAMPLES


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.


DANKE! MERCI!

THANK YOU! GRAZIE!

GRACIAS!


Q&AIf I don’t know the answer, I’ll lie.


The EndBrian [email protected]

tel. +1 206 201-1875mob. +1 206 351-6060

website: flingmedia.comblog: flinglog.com

twitter: twitter.com/fling

mailto:[email protected]?subject=

mailto:[email protected]?subject=

Mobile 2.0

Technology

Transcript of Mobile 2.0