web directions north: the mobile web landscape

Copyright © 2008 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

The Mobile Web LandscapeIn Canada and Beyond

Brian Fling, Principal & Director of Strategy


introduction


Follow Alonghttp://blueflavor.com/wdn08

http://blueflavor.com/webbuilder2.0

http://blueflavor.com/webbuilder2.0


Who is Brian?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

* Has worked directly with all Tier 1 carriers in North

America and most of Tier 2.

* Helped brands like Rolling Stone, Napster & ESPN with

mobile web strategy & design.

* Runs mobiledesign.org, the largest network of mobile

designers.

* Author of dotMobi Developers Guide.

* Co-creator of Leaflets for the iPhone.


Phrases & Jargon


Jargon Alert

MobilePortable personal communication devices able to connect voice calls or data requests wirelessly.

Not to be confused with “cellular” or “cell.”


Jargon Alert

Mobile WebThe collective term for websites designed for viewing on a mobile device. Websites are published and accessed via the Internet just like a regular desktop website.


...just how big is the Mobile Web?

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Population of the EarthSource: Wikipedia

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


Canada (33m)

20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


England (50m)

Canada (33m)

20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


England (50m)

United States of America (303m)

Canada (33m)

20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


England (50m)


European Union (495m)

Canada (33m)

20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


England (50m)


European Union (495m)

China (1.3 billion)

Canada (33m)

20 Million

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Web of Today

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Web of Today

Mobile Users (2.9b)

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Web of Today

Mobile Users (2.9b)

Mobile Web Access (1.3b)

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

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

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Web of Tomorrow

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


Mobile Web Subscribersby 2010

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


Mobile Web Subscribersby 2010

Source: Informa Telecoms & Media 2006


Mobile will revolutionize the way we gather and

interact with information in the next two years.


Mobile will revolutionize the way we gather and

interact with information in the next two years.

( Maybe 5 in Canada)

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Events

TV

Billboard

Radio

Live

Website

Auditory

KinestheticVisu

al

Word of Mouth

Print Ad

Mobile Device

IVR

SMS

IVR

SMS

WAP

SMS

QR Code

SMS

QR Code

SMS

SMSMMS

SMS

WAP

SMS

SMS

Bluetooth

Notify

WAP

WAP

MMS

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


Mobile has the potential to reach anybody through

any medium.


Jargon Alert

LBSLocation-based Services

The ability for a mobile device to provide information that is relevant to it’s physical location via a Global Positioning System (GPS).

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Triangulation


Prepare for a trulycontextual 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.


Designing for Context* Address the inherent benefits of the media.

* Look at your content in multiple facets of

distribution.

* Create solutions based on goals.

* Balance the constraints of the technology.

* Remember physical context.

* Adapt content for multiple contexts.


Adapt formultiple contexts


My Dad


“Find a need and fill it.”

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Balancing Goals

User Goals

Busin

ess Goa

ls Technical GoalsSweetSpot


The 3Cs of the Mobile Web* Cost

If you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content.

* ContentIssues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices.

* ContextWhat does your website add to the users mobility? How do you add value to the their physical context? What is the context in which they will use your site? On a bus or train?


Jargon Alert

One WebThe principle of making the same information and services to users regardless of the device used.

This is a very misunderstood, misused and commonly debated concept.


MassMedia7th


Tomi Ahonen3G Strategy Consultant


Mass Media1. Printing Press

7th



2. Recordings

7th



2. Recordings

3. Cinema

7th



2. Recordings

3. Cinema

4. Radio

7th



2. Recordings

3. Cinema

4. Radio

5. Television

7th



2. Recordings

3. Cinema

4. Radio

5. Television

6. The Internet

7th



2. Recordings

3. Cinema

4. Radio

5. Television

6. The Internet

7. Mobile

7th


5 unique benefits1. First truly personal mass media

e.g. We don’t share our phones with our spouses.

2. First always-on mass mediaInformation is always available 24/7, even when idle.

3. First always-carried mass media7 out of 10 people sleep with their phone within reach.

4. Only mass media with a built in payment channelUniversal click to buy. Twice as many people have phones than credit cards.

5. Offers point of thoughtAbility to create or consume content whenever the mood strikes.


Mobile is the only mass media that can do

everything the previous six can do.


We are at the precipice of the next generation of

the web.


Two companies in particular are making

that happen...


And lets not forget...


What is the deal with the Canadian Wireless industry?


Canada’s Slow Growth* Canada has relatively inexpensive fixed line

telecommunications.

* 67% of all Canadian home have at least one mobile

phone.

* Growth is only 9% per year.

* Based on past and present growth rates, it could take

Canada 5 more years to reach the market penetration of

other countries.

* Canadian policy restricts foreign (namely US-based)

interests.

* Industry Canada has been remarkably slow and

laborious in auctioning off wireless spectrum.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

All About the Spectrum


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

— Craig McCaw

“

”


Unless something happens, the Canadian Wireless

market will continue to be behind the rest of the world.


why is this important?


Mobile is not the Web


Understanding and patience of the Mobile Ecosystem is

one of the most crucial skills of the Mobile Web.


Operators

Networks

Handsets

Platforms

Operating Systems

Application Frameworks

Applications

Services

The mobile ecosystem has many layers. Each with their own complexities and obstacles.

Layers of Mobile


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

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Top Network Operators

Rank Company Primary Markets Network Subscribers*

1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil

2 VodafoneEurope, Australia, New Zealand,

Africa

GSM, GPRS, EDGE,

UMTS, HSDPA206 mil

3 Telefonica Europe, Latin AmericaGSM, GPRS, EDGE,

UMTS, HSDPA154.8 mil

4 China Unicom China GSM, GPRS, CDMA 153.1 mil

5 America Movil Mexico, Latin AmericaGSM, GPRS, EDGE,

UMTS, CDMA137.2 mil

6 T-Mobile Europe, USAGSM, GPRS, EDGE,

UMTS, HSDPA111.8 mil

7 MTS RussiaGSM, GPRS, EDGE,

UMTS74.67 mil

8 Orange Europe, Netherlands, AfricaGSM, GPRS, EDGE,

UMTS, HSDPA73.2 mil

9 Telenor Netherlands, Eastern EuropeGSM, GPRS, EDGE,

UMTS68 mil

10 AT&T USAGSM, GPRS, EDGE,

UMTS, HSDPA63.7 mil

* Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Canadian Operators

Rank Company Primary Markets Network Subscribers*

1 Roger Wireless Canada GSM, GPRS, EDGE, UMTS, HSDPA 7,155,200

2 Bell Mobility Canada CDMA, CDMA2000 1x, EVDO 6,021,000

3 TELUS Mobility Canada CDMA, CDMA2000 1x, EVDO 5,406,500

* Proportionate subscribers in millions as of June 2007


Jargon Alert

MVNOMobile Virtual Network Operator

A branded wireless provider that does not own or operate a wireless network.


Jargon Alert

ARPUAverage Revenue Per User

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

Officially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

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 Technologies* CDMA & EVDO

* iDEN & WiDEN

* WiMAXWorldwide Interoperability for Microwave Access, is a telecommunications technology aimed at providing wireless data over long distances in a variety of ways, from point-to-point links to full mobile cellular type access. WiMAX allows a user, for example, to browse the Internet on a laptop computer without physically connecting the laptop to a router or switch port via an ethernet port.


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.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Many Flavors of Handsets

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Comparing Mobile Devices

Feature PhonesPhone, Web, SMS

Smart PhonesApplications

Other


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Platforms

The core mobile development platform in which all software is written.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Platforms

Licensed

Java ME

Java ME (previously known as Java 2 Platform, Micro Edition or J2ME) is a specification of a subset of the Java platform aimed at providing a certified collection of Java APIs for the development of software for small, resource-constrained devices such as cell phones, PDAs and set-top boxes.

BREWBREW is an application development platform created by Qualcomm for mobile phones. It is air-interface independent, i.e. it can support GSM/GPRS, UMTS, and CDMA

Windows MobileWindows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API

Proprietary

Palm C/C++ based

RIM’s BlackBerry Java-based

Danger’s Hiptop Java-based

Apple’s iPhone Objective-C

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 Systems

Operating systems are common in Smart Phones, but rare in Feature phones.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Operating Systems

Symbian

Symbian OS is a proprietary operating system, designed for mobile devices, with

associated libraries, user interface frameworks and reference implementations of

common tools.

Windows Mobile 6Windows Mobile is a compact operating system combined with a suite of basic applications for mobile devices based on the Microsoft Win32 API

Palm OSUsed by Palm’s TREO line of mobile phones, though gradually being replaced by Windows Mobile.

LinuxIncreasingly used in mobile phones. Motorola announced the next RAZR will use Linux as its Operating System.

OS X Used by Apple’s iPhone.


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


A software framework that is used to implement the standard structure of an application for a specific operating system.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.


JavaApplications written in the Java ME framework can often be deployed across the

majority of Java-based devices.

BREWApplications written in the BREW framework can often be deployed across the majority of BREW-based devices.

Flash LiteApplications written using the Flash Lite 2.0 and Action Script 2.0 frameworks can run using the Flash Lite Player.

Windows Mobile 6Applications written using the Win32 API can be deployed across the majority of Windows Mobile-based devices.

WebWeb Applications can be deployed across the majority of devices that support the WAP 2.0 specifications and run using a mobile web browser.


Operators

Networks

Handsets

Platforms

Operating Systems


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.


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.


Never underestimate the complexities of mobile.

they exist for a reason.


Understanding Mobile Web Standards


With a few exceptions you already know how to

code for mobile today.


Jargon Alert

XHTML-MPExtensible HyperText Markup Language: Mobile Profile

A subset of XHTML Basic and HTML. Used as a primary markup language for the WAP 2.0 protocol.


XHTML-MP* XHTML Basic and XHTML-MP are virtually indistinguishable

* XHTML-MP is the predominant language for the mobile web.

* It’s possible to use standard tools to create mobile web pages.

* Since XHTML-MP is similar to XHTML, the transition to the

mobile web need not be complicated to developers.

* XHTML-MP is the default industry-supported language for

mobile web development.

* Unless a mobile service provider requires providing WML to

support older devices, XHTML-MP is the only needed

language in mobile web design.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

<? xml version=”1.0” encoding=”UTF-8” ?>

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”

“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Hello World!</title>

<meta http-equiv=”content-type” content=”application/vnd.

wap.xhtml+xml” />

</head>

<body>

<div id=”intro”>

<h1>Hello World!</h1>

</div>

<div id=”content”>

<p>This is a simple XHTML-MP Page</p>

</div>

</body>

</html>

Example XHTML-MP

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Hello World!</title>

<meta http-equiv="content-type" content="application/vnd.wap.xhtml+xml"/>

</head>

<body>

<div id="intro">

<h1>Hello World!</h1>

</div>

<div id="content">

<p>This is a simple XHTML-MP Page</p>

</div>

</body>

</html>

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

http://www.wapforum.org/DTD/xhtml-mobile10.dtd




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


If you know XHTML.you know xhtml-mp.


Wireless CSS* Wireless CSS supports most CSS attributes,

but not all of them.

* More advanced styling techniques won’t likely

work across multiple mobile browsers.

* The best advice is to keep your CSS as simple

as possible.

* Try to use document styles versus stylesheets.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Example Wireless CSS

body {

! border-top: 10px solid #439213;

! font: 10px Arial, Helvetica, sans-serif;

! vertical-align: top;

! padding: 0 8px;

! margin: 0px;

}

p {

! margin: 10px 0;

}

a {

! color: #439213;

}

img {

! vertical-align: middle;

}

body {

border-top: 10px solid #439213;

font: 10px Arial, Helvetica, sans-serif;

padding: 0 8px;

margin: 0px;

}

p {

margin: 10px 0;

}

a {

color: #439213;

}

img {

vertical-align: middle;

}


Keep your code and styles simple and you will do fine on most mobile browsers.


BUT...


Just avoid the Cascade part.


BUT...


The Device Detection Problem* Simple Device Detection

Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it.

* Advanced Device DetectionProgrammatically render the best possible mobile specific site to the requesting device.

* Mobile StylesheetsCode XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet to mobile devices.

* No device detectionRely on an alternate domain or subdirectory forcing the user to manually enter or navigate to the mobile specific site.


BUT...


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


BUT...


Supporting Devices & Browsers* There are over 500 devices being sold each

year.

* There are over 50 mobile browsers to contend

with.

* Crowding stems from mobile service provider

provisioning.

* Mobile service provider linked sites must

support all provisioned devices and browsers.

* Dealing with each Mobile Service Provider can

be a full time job.


The reality is that a good mobile web strategy is only for those with lots of cash.


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

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile 2.0 Event

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.Mobile 1.0Proprietary

Walled GardensFirst to market

Brand-centered

Mobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered


CSS & JavaScript


the mythical“Future-Phone”

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Evolution

1980

Basic Phones

Feature Phones

Smart Phones

iPhone

1990 2000 2010

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

The iPhone


A Confession...


The iPhone is the shape of things to come.


The iPhone is the first mobile device worthy of

being labeled “Mobile 2.0”


iPhone Strengths1. Smart phone for the masses

2. Flat-rate data plan

3. Device sold and supported outside the carrier

4. No subsidization

5. Updatable software

6. Location awareness

7. Bandwidth expectations

8. Portable device convergence

9. Web & mobile standards

10. Impact on web communities

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

784 Mobile Web Apps!


iPhone sales reached 4M in the first 90 days, means around 2.5M in the last quarter, reaching almost 20% of the market share. Probably the Fastest ramp-up of any consumer electronics device known to mankind.

— Chetan Sharma

“

”

http://www.chetansharma.com/blog/2008/01/15/macworld-update/













Apple estimates 10 million iPhones sold by the end of

2008.


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

WebKit.

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

iPod Touch

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Nokia N95

Co

pyr

igh

t ©

20

07

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Android

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Look Familiar?


Mobile WebKit Features* Supports all standard flavors of XHTML

* Supports CSS 1, 2 and a good deal of 3

* Javascript (including Ajax)

* This means complex layouts, styling and

interaction...

Co

pyr

igh

t ©

20

06

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

iPhone apps that grow on you.

(Made by the folks at Blue Flavor)

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Why Create Leaflets?

We wanted to showcase

...the merger of Web 2.0 and Mobile 2.0

...the use of web standards in mobile

...designing for the mobile context

...mobile web best practices

...designing for the iPhone

...rapid and iterative development

(Blog Post Why we made Leaflets)

http://www.getleaflets.com/blog/why_we_made_leaflets.php

http://www.getleaflets.com/blog/why_we_made_leaflets.php

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

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

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Home Icon CSS

#apps li {

float: left;

width: 56px;

height: 56px;

border: 1px hidden #666;

-webkit-border-radius: 10px;

text-align: center;

background: #666 url(/media/images/button_glare.png) no-repeat;

-webkit-box-shadow: 0px 1px 3px black;

margin: 7px 10px 20px;

}

#apps li a {

text-decoration: none;

color: #999;

display: block;

padding-top: 60px;

font-weight: bold;

font-size: 0.8em;

}

li#navNewsvine {

background: url(/media/images/button_glare.png) no-repeat, url(/media/images/

home_newsvine_low.png) no-repeat;

background-color: #005422;

}

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Newsvine Leaflet CSS

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Controls CSS

Co

pyr

igh

t ©

20

07

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Using CSS3

+ 320 bytes

+ 3 Kilobytes

-webkit-border-radius: 10px;+


A Successful Experiment* The entire application was built between

WWDC and the iPhone launch (3 weeks)

* TechCrunch—“Must-Have iPhone App”

* 105,000 hits the first week to website

* 12,000 unique app users the first week

* 7,000 recurring app users per week

* Average 22 pages view per visit


Leaflets Takeaways* While we designed it for the iPhone, Leaflets

could work on any “Mobile 2.0” device or

browser.

* Standards. Standards. Standards.

* Design for context.

* Optimize for the bandwidth.

* Test. And then test some more.

* Javascript is crucial to the user experience.

* CSS3 is ideal for mobile development.


One more thing...


In Conclusion


Challenges in the mobile space exist for a reason.


You already know everything you need to

know about developing for Mobile 2.0.


Start and End with Web Standards.


It is okay to focus on a limited number of devices.


Adapt content for multiple contexts.


Find a need and fill it.


Resources

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Designing the Mobile User Experience

http://www.littlespringsdesign.com/

http://www.littlespringsdesign.com

http://www.littlespringsdesign.com

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Global Authoring Practices

http://www.passani.it/gap/



Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

iPhone for Web Developers

http://developer.apple.com/iphone/



Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

XHTML Mobile Profile Tutorial

http://www.developershome.com/wap/xhtmlmp/



Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

Mobile Web Design Book

http://mobilewebbook.com/

http://mobilewebbook.com

http://mobilewebbook.com

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

.mobi Mobile Ready Report

http://mr.dev.mobi

http://mr.dev.mobi

http://mr.dev.mobi

Co

pyr

igh

t ©

20

08

Blu

e F

lavo

r. A

ll tr

ade

mar

ks a

nd

co

pyr

igh

ts r

em

ain

th

e p

rop

ert

y o

f th

eir

res

pe

ctiv

e o

wn

ers

.

.mobi Developers Guide

http://dev.mobi

Mobile Web Developers GuidePart I: Creating Simple Mobile Sites

BRIAN FLINGwith Ronan Cremin, Jo Rabin and D. Keith Robinson

http://dev.mobi

http://dev.mobi


Web 2.0 Expo—San FranciscoApril 23-24, 2008

Web Design World—ChicagoMay 5-7, 2008

Web Design World—SeattleJuly 21-23, 2008More to come...

2008Workshops


The End


Brian FlingPrincipal & Director of Strategy

[email protected]

tel. +1 206 545-0210

mob. +1 206 351-6060

mailto:[email protected]

mailto:[email protected]