SXSW Mobile

134
Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Everything you always wanted to know about the mobile web _ _ But were afraid to ask * *

Transcript of SXSW Mobile

Page 1: SXSW Mobile

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

Everything you

always wanted

to know about the

mobile web __ But were afraid to ask*

*

Page 2: SXSW Mobile

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

Follow Alonghttp://www.blueflavor.com/sxsw2007/

Page 3: SXSW Mobile

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

Who am I?

Page 4: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

Page 5: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

Page 6: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

* Have worked directly with all Tier 1 carriers in North America and most of Tier 2.

Page 7: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

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

Page 8: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

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

* Run mobiledesign.org, the largest network of mobile designers.

Page 9: SXSW Mobile

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

Who am I?* Co-founder & Principal of Blue Flavor.

* Mobile Designer since 2000.

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

* Run mobiledesign.org, the largest network of mobile designers.

* Author of dotMobi Developers Guide.

Page 10: SXSW Mobile

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

Part 1

Why the Mobile Web?

Page 11: SXSW Mobile

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

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.

Page 12: SXSW Mobile

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

Just how big is the

Mobile Web?

Page 13: SXSW Mobile

Copy

right

© 2

007

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.

The Size of Texas

Page 14: SXSW Mobile

Copy

right

© 2

007

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.

The Size of Texas

20,000,000

Page 15: SXSW Mobile

Copy

right

© 2

007

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.

The Population of the Earth

Page 16: SXSW Mobile

Copy

right

© 2

007

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.

The Population of the Earth

Page 17: SXSW Mobile

Copy

right

© 2

007

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.

The Population of the Earth

Page 18: SXSW Mobile

Copy

right

© 2

007

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.

The Population of the Earth

Population of The United States

Page 19: SXSW Mobile

Copy

right

© 2

007

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.

The Population of the Earth

Population of The United States

Population of China

Page 20: SXSW Mobile

Copy

right

© 2

007

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 of Today

Page 21: SXSW Mobile

Copy

right

© 2

007

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 of Today

Mobile Subscribers

Page 22: SXSW Mobile

Copy

right

© 2

007

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 of Today

Mobile Subscribers

Global Mobile Web Access

Page 23: SXSW Mobile

Copy

right

© 2

007

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 of Today

Global Internet Users

Mobile Subscribers

Global Mobile Web Access

Page 24: SXSW Mobile

Copy

right

© 2

007

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 of Tomorrow

Page 25: SXSW Mobile

Copy

right

© 2

007

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 of Tomorrow

Mobile Web Subscribersby 2010

Page 26: SXSW Mobile

Copy

right

© 2

007

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 of Tomorrow

Mobile Web Subscribersby 2010

Page 27: SXSW Mobile

Copy

right

© 2

007

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.

How many users are there?

Page 28: SXSW Mobile

Copy

right

© 2

007

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.

How many users are there?

Mobile Web Users

Page 29: SXSW Mobile

Copy

right

© 2

007

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.

How many users are there?

Mobile Web Users

Global Internet Users

Page 30: SXSW Mobile

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

Mobile will revolutionize the way we gather and

interact with information in the next three years.

Page 31: SXSW Mobile

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

Mobile has the potential to reach anybody through

any medium.

Page 32: SXSW Mobile

Copy

right

© 2

007

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.

Page 33: SXSW Mobile

Copy

right

© 2

007

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

Page 34: SXSW Mobile

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

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

Page 35: SXSW Mobile

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

Prepare for a trulycontextual web.

Page 36: SXSW Mobile

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

We are at the precipice of the next generation of

the web.

Page 37: SXSW Mobile

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

Part 2

Creating a

Mobile Web Strategy

Page 38: SXSW Mobile

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

“Find a need and fill it.”

Page 39: SXSW Mobile

Copy

right

© 2

007

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.

Balancing Goals

User Goals

Busin

ess G

oals

Technical Goals

SweetSpot

Page 40: SXSW Mobile

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

The 3C’s of the Mobile Web

Page 41: SXSW Mobile

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

The 3C’s of the Mobile Web

* CostIf you don't develop your mobile website responsibly, the user could get

stuck with a big bill in order to view your content.

Page 42: SXSW Mobile

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

The 3C’s of the Mobile Web

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

Page 43: SXSW Mobile

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

The 3C’s of the Mobile Web

* 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?

Page 44: SXSW Mobile

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

Lose anything that doesn’t support the goals.

Page 45: SXSW Mobile

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

Part 3

Mobile Information

Architecture

Page 46: SXSW Mobile

Copy

right

© 2

007

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.

A Bad Mobile IA

Home About Us

Company Overview

Home Suite

License Management

Services

Support Request

News

Sales Offices

Executives

Standard Suite

Product Services

Intranet Login

Events

Contact Form

Press Releases

Pro Suite

Installation Support Services

Office Hours

Org Chart

Whitepapers

Consulting Services

Contact

Products

Services

Support

News &

Events

Blog

Contact

Press Releases

Page 47: SXSW Mobile

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

Keep it Simple

* Limit categories to 5

* Limit links to 10

* No more than 5 levels deep

* At least one content item per category

* Prioritize links by activity or popularity

Page 48: SXSW Mobile

Copy

right

© 2

007

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.

A Good Mobile IA

Home

About Us

Contact Us

News & Events

Products & Services

Support

Locations

Blog

Page 49: SXSW Mobile

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

Remember:Goals, Cost, Content &

Context

Page 50: SXSW Mobile

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

Jargon Alert

ClickstreamUsed to refer to the series of clicks, or path, the user

takes to reach a destination in an informational

space. Often used to describe user behavior gathered

from server logs, but also can be used in early

planning, as in “creating the optimal clickstream.”

Page 51: SXSW Mobile

Copy

right

© 2

007

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.

Designing Clickstreams

Home

Latest Blog Posts

Navigation

Latest News

Footer

Products &

Services

Product & Services

Overviews

Support

Footer

Navigation

News & Events

News Items

Events

Footer

Navigation

Contact

Locations

Contact Form

Phone Numbers

Primary Address

Footer

Navigation

Main Phone

Main AddressBlog

Recent Posts

Footer

Navigation

About Us

Company Overview

Executive Overview

Footer

Navigation

Content Area

Link to Page

Page

Legend

Page 52: SXSW Mobile

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

Jargon Alert

Mobile Service ProviderA broad term to describe the mobile network provider

that provides subscribers wireless access to voice and

data services.

Also known as a mobile network operator, or MNO in the telecommunications industry, though

usually referred to as carriers in North America and operators elsewhere in the world.

Page 53: SXSW Mobile

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

Part 4

Mobile Web Design

Page 54: SXSW Mobile

Copy

right

© 2

007

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.

Flavors of Mobile Design

More Compatible Richer Experience

Page 55: SXSW Mobile

Copy

right

© 2

007

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.

Flavors of Mobile Design

More Compatible Richer Experience

Page 56: SXSW Mobile

Copy

right

© 2

007

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.

Effort versus Reward

DeviceUI App

UI

GatewayDesign

ContentDesign

Time to complete task Goal

Effort

Reward

Page 57: SXSW Mobile

Copy

right

© 2

007

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.

Multiple Screens Sizes

Page 58: SXSW Mobile

Copy

right

© 2

007

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.

Multiple Screens Sizes

128 pixels

160 p

ixels

Page 59: SXSW Mobile

Copy

right

© 2

007

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.

Multiple Screens Sizes

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 60: SXSW Mobile

Copy

right

© 2

007

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.

Multiple Screens Sizes

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 61: SXSW Mobile

Copy

right

© 2

007

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.

Multiple Screens Sizes

240 pixels

320 p

ixels

320 pixels

240 p

ixels

176 pixels

220 p

ixels

128 pixels

160 p

ixels

Page 62: SXSW Mobile

Copy

right

© 2

007

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.

Multiple 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

Page 63: SXSW Mobile

Copy

right

© 2

007

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.

Multiple 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

Recommended Max Size

200 x 250 pixels

Page 64: SXSW Mobile

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

Comparing Mobile Devices

* Many devices are similar, but vary based on how they are provisioned.

* 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

Page 65: SXSW Mobile

Copy

right

© 2

007

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.

Directional Orientation

PrimaryDirectionalOrientation

Select Previous Link or Scroll Up

Select Next Link or Scroll Down

Forward or Page Down

Back or Page Up

1

2

3 4

1

2

3

4

Page 66: SXSW Mobile

Copy

right

© 2

007

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.

Design Horizontally

Header

Footer

Content

Navigation

Navigation

Page 67: SXSW Mobile

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

The canvas might not be as robust, but there is still a

need for designers.

Page 68: SXSW Mobile

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

Part 5

Understanding

Mobile Web Standards

Page 69: SXSW Mobile

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

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.

Page 70: SXSW Mobile

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

XHTML-MP

Page 71: SXSW Mobile

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

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

Page 72: SXSW Mobile

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

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

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

Page 73: SXSW Mobile

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

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.

Page 74: SXSW Mobile

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

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.

Page 75: SXSW Mobile

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

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.

Page 76: SXSW Mobile

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

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.

Page 77: SXSW Mobile

Copy

right

© 2

007

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

Page 78: SXSW Mobile

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

If you know XHTML.You know XHML-MP.

Page 79: SXSW Mobile

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

Wireless CSS

Page 80: SXSW Mobile

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

Wireless CSS

* Wireless CSS supports most CSS attributes, but not all of them.

Page 81: SXSW Mobile

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

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.

Page 82: SXSW Mobile

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

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.

Page 83: SXSW Mobile

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

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 style

Page 84: SXSW Mobile

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

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

Page 85: SXSW Mobile

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

W3C Initiatives

Page 86: SXSW Mobile

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

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

Page 87: SXSW Mobile

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

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to

indicate that the mobile web site adheres to the Best Practices

recommendations.

Page 88: SXSW Mobile

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

W3C Initiatives

* Mobile Web Best PracticesGoal: To advocate a variety of coding principles and publishing best

practices to developers, publishers and mobile service providers.

* mobileOKGoal: To create machine-readable labels and a mobileOK trustmark to

indicate that the mobile web site adheres to the Best Practices

recommendations.

* Device DescriptionGoal: To create a method of profiling and identifying device capabilities to

ease adaptation.

Page 89: SXSW Mobile

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

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.

Page 90: SXSW Mobile

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

Part 6

Getting started with

XHTML-MP

Page 91: SXSW Mobile

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

With a few exceptions you already know how to

code for mobile today.

Page 92: SXSW Mobile

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

Correct Encoding & Doctype

* Character EncodingEnsuring the use of the correct character encoding and doctype makes

sure that the page renders as expected.

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

* XHTML-MP DoctypeThe document type (doctype) tells the browser how the page needs to

render, including the rules and how strictly to follow these rules.

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

Page 93: SXSW Mobile

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

Use Well-formed Code* All elements should be closed, e.g. <br />.

* All non-empty elements should be closed.<p>Example Text</p><p>Example Text</p>

* All elements must be closed in the reverse order.<em><strong>Example Text</strong></em>

* The alt attribute should be used for all images.<img src=”image.png” alt=”Image Description” />

* Text should appear within a block level element and not directly in the body.<body><p>Example Text</p></body>

* Inline elements should always nest with block level elements.<h2><em>Example Text</em></h2>

* All attributes should appear within quotes.<hr noshade=”true”/>

* All elements and attributes should use lowercase.<p class=”Sm”>Example Text<hr noshade=”true”/></p>

Page 94: SXSW Mobile

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

Avoid Tables for Layout

* Layout tables become a big problem when viewed in multiple mobile browsers.<body>

<div id=”header”>

<!-- Header placeholder -->

</div>

<div id=”content”>

<!-- Content placeholder -->

</div>

<div id=”footer”>

<!-- Footer placeholder -->

</div>

</body>

Page 95: SXSW Mobile

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

Place Navigation in the Content Body

* Given the vertical orientation of the mobile page, we show only navigation that’s relevant to the page.<div id=”content”>

<ol>

<li><a href=”news.html”>News</a><li>

<li><a href=”products.html”>Our Products</a></li>

<li><a href=”customers.html”>Our Customers</a></li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ol>

</div>

Page 96: SXSW Mobile

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

Use accesskeys in the Primary Navigation

* The primary navigation should include an assigned accesskey that corresponds to a numbered keypad whenever possible.

<li><a href=”news.html” accesskey=”1”>News</a></li>

<li><a href=”products.html” accesskey=”2”>Our Products</a></li>

<li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>

<li><a href=”about.html” accesskey=”4”>About Us</a></li>

<li><a href=”contact.html” accesskey=”5”>Contact Us</a></li>

Page 97: SXSW Mobile

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

Use Ordered Lists for Navigation

* Using ordered lists for navigation rather than unordered lists will indicate to the use the associated accesskey.<ol>

<li><a href=”news.html” accesskey=”1”>News</a></li>

<li><a href=”products.html” accesskey=”2”>Our Products</a></li>

<li><a href=”customers.html” accesskey=”3”>Our Customers</a></li>

<li><a href=”about.html” accesskey=”4”>About Us</a></li>

<li><a href=”contact.html” accesskey=”5”>Contact Us</a></li>

</ol>

Page 98: SXSW Mobile

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

Use Document Styles, Not External Styles

* Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet.

* When using external stylesheets the user may experience a brief “flash” of unstyled text before the stylesheet has a chance to load. Instead, insert styles into the <head> of a document.

Page 99: SXSW Mobile

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

Linking Phone Numbers

* One of the benefits of the mobile web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls.<a href=”tel:+12065450210”>+1 206 545-0210</a>

Page 100: SXSW Mobile

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

Forms can be Tricky

* Entering data into a mobile web site is often a difficult and time-consuming process.

* To avoid wasting the user’s time and causing frustration, use few or no forms.

* However, when using forms, keep the needed information as little as possible.

Page 101: SXSW Mobile

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

Part 7

Mobile Publishing

Page 102: SXSW Mobile

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

Page 103: SXSW Mobile

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

Page 104: SXSW Mobile

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

Supporting Devices & Browsers

Page 105: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

Page 106: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

Page 107: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

* Over 50 mobile browsers to contend with.

* Crowding stems from mobile service provider provisioning.

Page 108: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

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

Page 109: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

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

* Adopts standards has been around for much longer in mobile.

Page 110: SXSW Mobile

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

Supporting Devices & Browsers

* Over 500 devices being sold each year.

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

* Adopts standards has been around for much longer in mobile.

* Older or poorly designed devices don’t require support.

Page 111: SXSW Mobile

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

Focus on Five.

Page 112: SXSW Mobile

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

Publishing Methods

Page 113: SXSW Mobile

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

Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

Page 114: SXSW Mobile

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

Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.

* Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.

Page 115: SXSW Mobile

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

Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.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.

Page 116: SXSW Mobile

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

Publishing Methods

* Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.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.

Page 117: SXSW Mobile

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

The Device Detection Dilemma

Page 118: SXSW Mobile

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

The Device Detection Dilemma

* Simple Device DetectionPublish only one mobile specific site, designed for the lowest supported

browser, routing all mobile browsers to it.

Page 119: SXSW Mobile

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

The Device Detection Dilemma

* Simple Device DetectionPublish 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.

Page 120: SXSW Mobile

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

The Device Detection Dilemma

* Simple Device DetectionPublish 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.

Page 121: SXSW Mobile

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

The Device Detection Dilemma

* Simple Device DetectionPublish 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.

Page 122: SXSW Mobile

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

Jargon Alert

AdaptationThe process of dynamically optimizing content to the

restrictions of the requesting device.

The adaptation model relies on the mobile device’s user

agent profile to tell the server to deliver markup or images

based on the browser, screen size and device capabilities.

Page 123: SXSW Mobile

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

Testing

Page 124: SXSW Mobile

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

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

Page 125: SXSW Mobile

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

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

Page 126: SXSW Mobile

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

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

Page 127: SXSW Mobile

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

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

* Device TestingTest as many as you can, but focus on five good mainstream devices.

Page 128: SXSW Mobile

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

Testing

* Desktop TestingTesting from a normal desktop browser is a great way to start.

* Browser ToolsBrowsers like Opera and Firefox have tools specific to mobile testing.

* EmulatorsAllows for desktop verification without loading on to a device.

* Device TestingTest as many as you can, but focus on five good mainstream devices.

* Usability TestingTest early and often with as many users as you can.

Page 129: SXSW Mobile

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

Resources

Page 130: SXSW Mobile

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

Mobile Web Developers GuidePart I: Creating Simple Mobile Sites

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

Page 131: SXSW Mobile

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

Page 132: SXSW Mobile

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

Page 133: SXSW Mobile

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

Thank you.

Page 134: SXSW Mobile

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

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

tel. +1 206 545-0210mob. +1 206 351-6060

http://www.blueflavor.com/sxsw2007/