Getting Started in the Mobile Web

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

Getting Started with the Mobile Web

Brian Fling Co-founder & Director of Strategy, Blue Flavor


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.


How big is the Mobile Web?

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

= 15,000,000 people

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Population of The United States

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Population of The United States

Population of China

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Global Internet Users

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective


Global Mobile Subscribers

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective


Global Mobile Subscribers

Global Mobile Web Access

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Some Perspective

by 2010


Mobile will revolutionize the way we gather and interact with information in the next

three years.


Mobile has the potential to reach anybody through any

medium.

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

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


But why will this be a revolution?

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

2005 2006 2007 2008 2009

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

3G

new services

adoption

2005 2006 2007 2008 2009


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.

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

3G2005 2006 2007 2008 2009

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

LBS3G2005 2006 2007 2008 2009


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

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

LBS3G2005 2006 2007 2008 2009

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

Mobile 2.0LBS3G2005 2006 2007 2008 2009


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.


Web 1.0 Web 2.0

Mobile 1.0 Mobile 2.0

StandardsWeb ServicesWeb as a PlatformUser-centered

StandardsWeb ServicesWeb as a PlatformUser-centered

Proprietary Walled GardensFirst to market

Brand-centered

Proprietary Walled GardensFirst to market

Brand-centered


Jargon Alert

Walled GardenA user experience designed to keep the user content while restricting access to content outside the approved boundaries.

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

LBS Mobile 2.03G2005 2006 2007 2008 2009

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Outlook

cost of data

network speeds

new services

adoption

4GLBS Mobile 2.03G2005 2006 2007 2008 2009


We are at the precipice of the next generation of the web.


Getting started with Mobile 2.0


Jargon Alert

XHTML-MPExtensible HyperText Markup Language: Mobile ProfileA subset of XHTML Basic and HTML. Used as a primary markup language for the WAP 2.0 protocol.


XHTML-MP = HTML


A brief word on Mobile Web Browsers

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Networks, Platforms & Devices

Subscribers 55.8m 53.0m 50.9m 22.7m

Network GSM CDMA CDMA GSM

Platform J2ME BREW® J2ME J2ME

Walled Garden Open Semi-Walled Walled Semi-Walled

WAP 2.0 Yes Yes Yes Yes

Devices 66 62 84 44


Mobile Devices• Many devices are

similar, the differences are in how they are provisioned to a carrier.

• Look only at mass market phones

• Do not design for smart phones or PDA’s PDAs

Smart Phones

Feature PhonesPhone, WAP, SMS

Applications

Keyboard, Stylus


Focus on 5

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

DeviceAnywhere


If you have well formed, basic XHTML, then your

content should be fine on most modern browsers.


One Web vs. The Mobile Web

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Options

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Options

SSR

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Options

SSR Reformat

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Options

SSR Reformat Stylesheets

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Web Options

SSR Reformat Stylesheets Mobile Specific

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Context vs. Content

Mobile Specific Site

Stylesheets

Reformat

SSR

Complex

SimpleSlower Faster

Value


• CostIf 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?

The 3 C’s of the Mobile Web





The 3 C’s of the Mobile Web• Cost

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


Mobile Stylesheets


Usually all you need is one line of code.<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />


Usually all you need is one line of code.<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

or for mobile specific<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/

xhtml-mobile10.dtd">

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




Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Example Mobile Stylesheet

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile 2.0 Code

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

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/TR/xhtml1/DTD/xhtml1-transitional.dtd




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


Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile 2.0 Code




You can have a mobile ready site in about an hour.


• Keep the information architecture simple and focused.

• Use a simple site drill-down architecture.

• Display only 5 categories per page.

• No more than 10 links per page.

• Always provide at least one content item with each category page.

• Try to prioritize by activity of popularity.

• The end of each page should have someplace for the user to go.

• Keep total file sizes, including images and styles, as small as possible.

• Use only well formed, valid web standard code.

• Code order matters, think semantically.

• Use ordered lists instead of unordered lists for navigation.

• Always use accesskeys.

Mobile Web Tips














Mobile Web Tips• Keep the information architecture simple and focused.


Resources to get you started

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.mobi Developers Guide

http://dev.mobi

http://dev.mobi

http://dev.mobi

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

.mobi Mobile Ready Report

http://mr.dev.mobi

http://mr.dev.mobi

http://mr.dev.mobi

Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Global Authoring Practices

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



Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

XHTML Mobile Profile Tutorial

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



Copy

right

© 2

006

Blue

Fla

vor.

All t

rade

mar

ks a

nd c

opyr

ight

s re

mai

n th

e pr

oper

ty o

f the

ir re

spec

tive

owne

rs.

Mobile Design

http://www.mobiledesign.org




Thank You


Brian FlingCo-founder & Director of Strategy, Blue [email protected]

mob. +1 206 351-6060

http://www.blueflavor.com/presentations/nextgenmobileweb.pdf

mailto:[email protected]

mailto:[email protected]



Getting Started in the Mobile Web

Technology

Transcript of Getting Started in the Mobile Web