web directions south 2007: mobile design and development workshop

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

Mobile Web Design & Developmenteverything you need to know about creating sites for the mobile web from start to finish

Brian Fling, Principal & Director of Strategy, Blue Flavor


introduction


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.


Agenda09:00 Part One—The Mobile Ecosystem

Understanding the mobile technology and landscape.

10:30 Morning Tea

11:00 Part Two—Designing for ContextDesigning for how people use information outside the web browser.

12:30 Lunch

1:30 Part Three—Mobile Web DevelopmentWhat you need to know to develop for mobile devices.

3:00 Afternoon Tea

3:30 Part Four—Mobile 2.0The future of mobile in the post iPhone age.

5:00 End


Lecture Format


Questions & Discussion


Breaks


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.


Part 1

the mobile ecosystem


Understanding and patience of the Mobile Ecosystem is

one of the most crucial skills of the Mobile Web.


Mobile is not the Web


Some Obstacles of MobileHundred of devices

Dozens of mobile web browsers

Operator controlled

Limited input or output

Limited guidelines or resources

“No Standards”

People don’t “get it”

The list goes on....


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.

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.

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

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.

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.

Network Generations

3G 2.5G 2G1G

•Over time cellular networks have evolved

•Unfortunately unlike other technology, Mobile moves slowly, but why?

•Physical Infrastructure

•Subsidization & Consumer 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.

1st Generation

3G 2.5G 2G1G

•Portable!Fits in a Briefcase

•Voice calls only

•Costs more per call than a pay phone

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.

2nd Generation

3G 2.5G 2G1G

•GSM, CDMA, TDMA, iDEN

•Less power needed,much smaller

•Better voice quality

•Added SMS

•Still just a phone

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.

The 2G/3G Transition

3G 2.5G 2G1G

•GPRS, HSCSD, WiDEN

•Data-capable devices

•Addition of Mobile Web

•Camera phones & MMS

•Mass adoption as airtime rates lower

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.

3rd Generation

3G 2.5G 2G1G

•W-CDMA, HSDPA, EVDO

•In the early stages today

•“Broadband” Speeds

•Add-on features like LBS and media players

•Slow uptake


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

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.

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


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







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.

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.

Many Flavors of Handsets

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.

Comparing Mobile Devices

PDAs

Smart Phones

Feature PhonesPhone, Web, SMS

Applications

Keyboard, Stylus


Operators

Networks

Handsets

Platforms

Operating Systems


Applications

Services

Layers of Mobile

Platforms

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

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

RIM’s BlackBerry Java-based

Danger’s Hiptop Java-based

Apple’s iPhone Objective-C

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


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



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.

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

SymbianSymbian OS is a proprietary 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. Motorola announced the next RAZR will use Linux as its Operating System.

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

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.


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

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

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.


A word on standards.


in short:Never dismiss the

complexities of mobile. They exist for a reason.


Questions?


BreakReturn by 11:00 AM


Part 2

designing for context


Part A

Just how big is the Mobile Web?

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 Australia

20,000,000

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

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

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

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


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

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


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


Prepare for a trulycontextual web.


We are at the precipice of the next generation of

the web.


Part B

Thinking in Context


What to make Mobile?


First ask, “Why should this be

Mobile.”


Next ask,“What need do I serve by

being Mobile?”


“Find a need and fill it.”

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


Start with a goal and reverse engineer it.


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?


Lose anything that doesn’t support the goals.


Part C

Mobile Information Architecture

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


Information Architecture

* Your IA will be the foundation of your product. Think long-term, not what it is, but what will it become. The more

complex the IA, the actions and effort is required from the user.

* Keep it simple. Remember your goals. Find the tasks that maps to goals.

* Good trigger labels are crucial in mobile. They should be short, descriptive and meet user expectations.

Never be clever.


5 Tips for Mobile IA

* 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

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


Remember:Goals, Cost, Content &

Context


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

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

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.

Case Study

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.

Revised Rolling Stone IA

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.

Rolling Stone Clickstream


Part D

Mobile Web Design

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

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

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


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

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

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 Vertically

Header

Footer

Content

Navigation

Navigation

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.

Flavor Matrix

Design Type Design Tool Delivery Complexity MSPs

J2ME

BREW

WML

XHTML-MP

Flash Lite

Rich Photoshop Any Very Many

Rich Photoshop Carrier Very Few

Text HTML Web Simple All

Web CSS Web Simple All

Rich Flash TBD Semi Few

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.

Case Study


Mobile Design Tips

* Be creativeDevices have reached a point where you can be as creative as you want to be.

* Remember the goalsPut systems in place to regularly check against the goals.

* PrototypeCreate quick examples of the design and interaction.

* Test early and oftenGet opinions of others. Talking to one person is better than none.

* Keep it simpleRemember if it doesn’t solve a problem or fill a need, lose it.


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

need for design.


Questions?


LunchReturn by 1:30 PM


Part 3

mobile web development


Jargon Alert

WAPWireless Application Protocol

An open international standard for applications

that use wireless communication, for example

Internet access from a mobile phone.


Part A

Understanding Mobile Web Standards


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.

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>

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.

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

}


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


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.


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.


The Caveat


The Dark Side of the Mobile Web


WAP 2.0 content is supposed to be available in both WML

and XHTML-MP versions.


Jargon Alert

WMLWireless Markup Language

An XML language used to specify content and user

interface for WAP devices.

Often referred as WAP 1.0

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



The Dark Side of Mobile

* No Cascading Stylesheets

* Heavy use of tabled layouts

* Use of tables to control simple presentation

* Really, really bad code

* A lot of problematic and hard to fix bugs

* Insane test cycles


Part B

Getting started with XHTML-MP


With a few exceptions you already know how to

code for mobile today.


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






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


Use Well-formed Code (con’t)

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

Avoid Tables for Layout

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

<div id=”header”>  </div>

<div id=”content”> 

</div> <div id=”footer”> 

</div></body>


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>


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>


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>


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.


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:+012065450210”>+1 206 545-0210</a>


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.


Part C

Mobile Publishing


Let me back up for a minute.

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


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

Example Mobile Stylesheet

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


Mobile Specific Sites


COVERED!


A word on content management


The Device Detection Problem.


The Device Detection Problem

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


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.


Device Detection Solutions

* WURFL http://wurfl.sourceforge.net/

A XML configuration file which contains information about device

capabilities and features for a variety of mobile devices.

* WALL http://wurfl.sourceforge.net/java/wall.php

An abstraction library that adapts content to the target device.

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

PHP script that detects and redirects mobile browsers.

* “Reverse” Device DetectionUse Javascript to detect desktop browsers.

* Stylesheets

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

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

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

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


Publishing Your Mobile Site


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


Publishing through Operators


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.


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


Mobile Service Providers often require you to support

all their devices.


If you can convince the operator that you can boost

ARPU, you will find an important ally.


Jargon Alert

ARPUAverage Revenue Per User

A term used to describe the financial value of a

program, application or service.


Unless you have the experience and resources

very bad idea.


Supporting Devices


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.


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.


Focus on Five.

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


The Mobile Specific Debate


Questions?


BreakReturn by 3:30 PM


Part 4

mobile 2.0


Recap on Context


Mobile has the potential to reach anybody through

any medium.

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


Prepare for a trulycontextual web.


Mobile will revolutionize the way we gather and

interact with information in the next three years.


We are at the precipice of the next generation of

the web.

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

Proprietary

Walled Gardens

First to market

Brand-centered

Web 2.0

Standards

Web Services

Web as a Platform

User-centered


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.

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 1.0

Proprietary

Walled Gardens

First to market

Brand-centered

Mobile 2.0

Standards

Web Services

Web as a Platform

User-centered


Two very big problems


CSS & AJAX

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 iPhone

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 iPhone is the first mobile device worthy of being labeled

“Mobile 2.0”

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.

iPhone apps that grow on you.

(Made by the folks at Blue Flavor)

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.

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

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

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

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.

Search

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.

Feeds

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.

Newsvine

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.

App List

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.

Upcoming

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.

flickr

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.

del.icio.us

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.

Tour de France

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.

New York Times

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.

Baseball


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.

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

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

<!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>Leaflets</title> <meta name="viewport" content="maximum-scale=1.0,width=320,initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/media/css/home.css" media="all" rel="Stylesheet" type="text/css" /> <script src="/media/js/base.js" type="text/javascript"></script> </head><body class="home"> <div id="wrap"> <div id="touchbar"> <h1><a href="#">Leaflets</a></h1> <ul id="buttons"> <li id="appAbout" class="btn"><a href="about/">About</a></li> <li id="appSignin" class="btn"><a href="javascript:toggle ('signin')">Sign in</a></li> </ul> </div> <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> </ul> </div> </div>

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






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

#breadcrumb{ background:url(/media/images/header_btn.png) no-repeat right center; list-style-type:none; height:37px; top:4px; left:40px; position:absolute}li#home{ background:url(/media/images/home.png) no-repeat 18px 10px, url(/media/images/header_btn_home.png) no-repeat left center; overflow:hidden; width:35px; height:37px; padding-left:0; margin-left:-35px; text-indent:200px}li#home.full{ background:url(/media/images/home.png) no-repeat 16px 9px, url(/media/images/header_btn_home.png) no-repeat left center; height:35px; padding-left:35px; padding-right:22px; margin-left:-35px; text-indent:0}


But should you design for the iPhone?


Yes. If you design to Standards future Mobile 2.0 devices

will love you.


No. Know your users and what

devices they are likely to have.


in short:The iPhone is the first of many Mobile 2.0 Devices.


Questions?


Resources

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

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.

Mobile Web Design Book

http://mobilewebbook.com/

http://mobilewebbook.com

http://mobilewebbook.com

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.

Designing the Mobile User Experience

http://www.littlespringsdesign.com/

http://www.littlespringsdesign.com

http://www.littlespringsdesign.com

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.

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

iPhone for Web Developers

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



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/




Exercise:BYO Mobile Idea


The End


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

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

mailto:[email protected]

mailto:[email protected]

web directions south 2007: mobile design and development workshop

Business

blue flavorcopyright

respective owners

mobile web designdevelopment

principaldirector of

finishbrian fling