Standards-Based
Mobile Web Development
Mobile Portland, March 2009
LearnTheMobileWeb.com 03/23/09
1

Agenda
Introduction

Why Study Mobile Web Development?

Mobile Web != Desktop Web

Standards-Based Approach to Mobile Web

Development
… with Healthy Skepticism of Mobility Standards

My Courses @ PCC

Mobile Web Development

Featurephones and Smartphones

Advanced Mobile Web Development

Deep Dive for Smartphone Browsers

HTML 4 and 5 + JavaScript + AJAX

LearnTheMobileWeb.com 03/23/09
2

Introducing Me
Gail Rahn Frederick

gail.frederick@gmail.com / 503-260-0910

Mobile Developer and Enthusiast for 6+ Years

Mobile Applications and Mobile Web Services on 6+

operators in 10+ countries in North America and Europe
MS in Computer Science from University of

Washington
Mobile Software Architect at Medio Systems

Mobile search and discovery for operators and publishers

Mobility Speaker at JavaOne 2009

Smartphone Behavior on a Featurephone Budget with Java

ME
LearnTheMobileWeb.com 03/23/09
3

Introducing You
Do you …

Own a Mobile Phone?

Own a Smartphone?

Surf the Web on your Phone?

Surf Primarily on your Phone?

Have you …

Published a Mobile Application?

Published a Mobile Web Site?

Earned Money as a Mobile Publisher?

Adapted Mobile Content Using a Device Database?

Had Mobile-Adapted Content Re-Formatted by a

Transcoder?
LearnTheMobileWeb.com 03/23/09
4

Why Study Mobile Web Development?
LearnTheMobileWeb.com 03/23/09
5

Why Study Mobile Web Development?
The Mobile Web is Totally New
Mobile Web != Desktop Web

New Best Practices and New Gotchas

Desktop Metaphors Simply Do Not Apply

The Mobile User is Totally New
Usage Patterns, Session Lengths and Navigation

Methods
The Mobile Browser is Totally New
Has Unique Benefits, Quirks and Workarounds

Best Cross-Platform Mobile Technology

Especially for Smartphones

Sorry, Java ME!

LearnTheMobileWeb.com 03/23/09
6

The Mobile Web is Totally New
New Markup and Scripting Languages

WML, XHTML-MP, Compact HTML, CSS-MP,

JavaScript-MP
Partial Implementations of Standards is OK

Flawed Implementations are OK, too 

Optimize for Network Bandwidth

Document Size Matters. Even for Smartphones.

The Mobile Web is the Wild, Wild West

Operators are Free to Block Trafic to Your Site

Transcoding Proxies Re-Format your Markup

Defensive Programming is Essential

LearnTheMobileWeb.com 03/23/09
7

The Mobile User is Totally New
Mobile Users fit into Three Behavioral Groups

According to Google Usability Professionals

Repetitive Now

Checking same data over and over: weather, stocks, scores,

news, etc.
Optimize information access using cookies

Bored Now

People with time on their hands – commuters, cafes, etc.

Casual web surfers

Urgent Now

Business locations, directions to airport, etc

Location-based search activity. Wants to find important data

fast.
Source: Google Presentation at NY Chapter of Usable Professionals Association, 2007

LearnTheMobileWeb.com 03/23/09
8

The Mobile Browser is Totally New
Renders Web Pages in WML and XHTML-MP

and sometimes HTML

Limited Functionality for Low Power Devices

Advanced Features Aect Battery Life

JavaScript and Timer-Based Refreshes

Improperly Formatted Web Pages have Drastic

Eects
Browser Hangs or Crashes

Phone OS Resets or Powers Down

LearnTheMobileWeb.com 03/23/09
9

Mobile Web
Usage Statistics
LearnTheMobileWeb.com 03/23/09
10

Prevalence of Mobile Phones
Common Object Years in Existence World Usage
Automobile 100 800 million
PC 30 850 million
Landline Phone 110 1.3 billion
Credit Card 40 1.4 billion
TV 60 1.5 billion
Mobile Phone 35 3.3 billion
Source: Communities Dominate Brands Weblog and Mobile

Web Development by Cameron Moll
LearnTheMobileWeb.com 03/23/09
11

Mobile Phone Usage Around the World
Dark Red is Lowest % of Mobile Phone Coverage – Emerging
Markets
Dark Green is Highest % of Mobile Phone Coverage – Saturated
Markets
LearnTheMobileWeb.com 03/23/09
12

Mobile Web vs. Desktop Web
Mobile Web Desktop Web
3 minutes 10 – 15 minutes
Avg Session Length
90x60 800x600
Min Screen Size
240x400 Unlimited
Max Screen Size
12+ and growing 4 (eectively, 2)
Browser Mfgs
Frequent and Permanent Rare and Patchable
Browser Bugs
Spotty and Sometimes Ignored Mature and Accepted
W3C Standards
WML 1.1, WML 1.3, CHTML, XHTML-MP, HTML
Markup Languages
XHTML-Basic, ...
Not on 90% of clients. Yes
JavaScript and AJAX
Partial Implementations and Proprietary APIs.
3.3 Billion 1 Billion (desktops and servers)
Addressable Clients
LearnTheMobileWeb.com 03/23/09
13

Mobile Screen Size Trends
Data Set is
Color Mobile
Phones
supporting
Java ME =
Featurephones
Relative screen size dierence is increasing.
Dierence between the smallest and the largest screen sizes is a
factor of 23.
The largest screen is 23 times bigger than the smallest one.
The vast majority of devices share just three screen widths:
128, 240 and 176 pixels
Source: Sender 11, mBricks analysis of WURFL, mobiForge.com.
LearnTheMobileWeb.com 03/23/09
14

Screen Sizes on the Mobile Web
Browser trafic seen by AdMob (AdMob Mobile Metrics Report, Dec 2008):
Screen Size Markup Support Worldwide United States
128x160 and Smaller WML Only 24.5% 18.5%
Up to 176x220 WML or XHTML-MP 24.0% 23.9%
Up to 240x320 XHTML-MP or HTML 23.8% 18.9%
320x240 and Larger XHTML-MP or HTML 27.7% 38.7%
Jan 2009 statistics from worldwide mobile trafic to GetJar.com:
Screen Size Markup Support Worldwide
128x128 and 128x160 WML Only 18.9%
Up to 176x220 WML or XHTML-MP 28.9%
Up to 240x320 XHTML-MP or HTML 30.1%
Larger than 320x240 XHTML-MP or HTML 4.5%
LearnTheMobileWeb.com 03/23/09
15

Mobile Data Adoption through 2010
Average Intended Mobile Data Usage Increase over Next 24 Months USA Europe
Current Users of Mobile Data 58% 55%
Non-Users of Mobile Data 27% 28%
Top Five Mobile Data Services that Non-Users Intend to Start USA Europe
Using
Mobile Internet 49% 34%
MMS 38% 39%
Uploading Photos 34% 27%
Software / Application Download 30% 30%
E-mail 28% 32%
Source: Nielsen and Tellabs Study of Mobile Web Usage, Feb 2009
LearnTheMobileWeb.com 03/23/09
16

Mobile Meaning of Cross-Platform
The Old Days:
Java ME for Featurephones
Fragmentation Concern:
Java ME API support across OEMs and devices
Bad Joke:
There are a billion Java phones and each runs its own version of
Java ME!
Source: Sender 11
LearnTheMobileWeb.com 03/23/09
17

Mobile Meaning of Cross-Platform
Today:
iPhone, Android, RIM, Windows Mobile, LiMo, Moblin …
Fragmentation Concern:
An SDK for Every Handset Vendor
What is the new Cross-Platform technology?
A standards-based mobile browser.
Source: Sender 11
LearnTheMobileWeb.com 03/23/09
18

Standards-Based Approach
to Mobile Web Development
LearnTheMobileWeb.com 03/23/09
19

Which Standards and Best Practices?
Markup Languages

WML, XHTML-MP, HTML

Styling

CSS, CSS-MP

Interactivity

EcmaScript-MP, JavaScript 1.3 – 1.7

Device Databases

WURFL, Device Atlas, DDR-Simple API

Best Practices

Page Design, Transcoder Defense, Mobile Advertising

Validators

Markup Languages, Styling, Mobile Readiness

Standards Organizations

W3C, dotMobi, Open Mobile Alliance, Mobile Marketing

Association, ECMA and Open Source projects like WURFL
LearnTheMobileWeb.com 03/23/09
20

Healthy Skepticism about
Mobile Standards
Membership of Standards Bodies

Members from Big Companies with Agendas

Independent Developers are Under-Represented

Mobile Web in its Infancy

Rush to Standardize Leads to Missed Targets and Re-

Work
In class … we learn and critique standards and

best practices.
LearnTheMobileWeb.com 03/23/09
21

Wireless Markup Language (WML)
XML-Based Language for Mobile Devices

Conforms to XML 1.0 Standard. Strict syntax.

Mobile browsers do not render invalid WML.

Instead … they choke!

WML is XML. Tags must be properly nested and closed.

i.e. <br/> vs <br>

i.e. <p>…..</p>

All tags must be lowercase

Attribute values must be surrounded by quotation

marks
No single quotes … no assumed quotes

DOCTYPE declaration is required

LearnTheMobileWeb.com 03/23/09
22

Wireless Markup Language (WML)
WML uses a card metaphor

A WML document is called a deck.

One WML deck contains one or more cards.

One card is displayed in the browser at a time.

Root tag in is <wml>

Valid child tags are <card>, <head> or <template>

Valid child tags of <card> are <p>, <do> and <pre>

<p> contains textual content and links.

<do> contains actions

<pre> contains…

WML supports user input, state variables, and

scripting.
LearnTheMobileWeb.com 03/23/09
23

XHTML-MP Syntax
XHTML and XHTML-MP are Very Similar

We’ll Learn XHTML-MP by Subtraction

Devil is in the Details

Bugs in mobile browsers

Burden of QA on many actual devices

Start with XHTML

Use a DTD for XHTML-MP

No frame or iframe support.

Tables are very simple. Similar to WML.

No colspan, rowspan or advanced formatting.

No <u> tag. Use CSS instead.

Great XHTML-MP reference @ cameronmoll.com

Add mobile-specific features

Access keys increase link usability

<a href=“foo.xhtml” accesskey=\"1“> … </a>
LearnTheMobileWeb.com 03/23/09
24

XHTML-MP Best Practices, 1 of 2
Consider Your Target Screens and Target Users
Simple Designs Win

Slow-to-Load Sites Lose Users

Mobile users browse with images turned o

Mobile users have per-kilobyte tari

Scrolling Sucks on Featurephones

Setting font size in pixels or points is supported

… but a folly.
Use headers or CSS instead to achieve visual

dierentiation.
Access keys are free in <ol>.

LearnTheMobileWeb.com 03/23/09
25

XHTML-MP Best Practices, 2 of 2
Minimize document byte size. Whitespace counts!

Review total download byte size of document + linked

resources.
Review and minimize server round-trips.

Validate! Validate! Validate!

http://validator.w3.org

Test in Firefox

Loose syntax and layout compatibility tests.

Test in Emulators

Tests document size and stricter markup compliance.

Test on Device

The gold standard. Tests actual rendering on mobile

devices.
LearnTheMobileWeb.com 03/23/09
26

Is the Site Mobilized?
Recognize mobile devices

Uses valid mobile markup language

dotMobi: Markup documents must be formatted in XHTML-MP or a markup

format know to be supported by the browser.
dotMobi: No frames or iframes unless browser is known to support them.

W3C: No frames.

Right-sized markup for the device?

Document size in bytes with and without external resources

Acceptable Page Load Time?

Markup and external resources

How many HTTP 302 redirects to mobile version?

Provides an optimized mobile experience

Snackable chunks of content sized for mobile device?

Ready.mobi score for home page

Ensure that content provided by accessing a URI yields a thematically

coherent experience when accessed from dierent devices.
i.e. mobile version of desktop weather site should show weather not flights!

LearnTheMobileWeb.com 03/23/09
27

Utility on the Mobile Web
“Utility is the engine of the mobile web”
Solve a real problem for a consumer on the move.
What can mobile users do on the site?

How many clicks to complete a task?

Are tasks optimized for mobile?

Likely to be performed by mobile users

Provide timely information

Do mobile site results match desktop results?

i.e. same flight status info, same news headlines, etc.

LearnTheMobileWeb.com 03/23/09
28

Targeted, Constrained Focus
Rethink, repackage, reformat.

Distill site down to essentials.

Remove extraneous content.

Content = features, pages and

graphics.
Simplify, but don’t over-

simplify.
The one-page mobile web site

is so 2006!
Promote user interest in the

brand.
Optimize for mobile use cases.

LearnTheMobileWeb.com 03/23/09
29

Access to Relevant, Timely Information
Prioritize and organize features. Optimize for

easy access to most popular tasks.
Airlines: Flight Status first. Baggage contracts last.

News: Top Stories first. Search nearby.

Promote snackability.

Small bites of content served up quickly and easily.

Mobile users have a short attention span.

Average Session Length is 3 Minutes

Remember Thematic Consistency

Also Thematic Currency

http://oregonlive.com/ vs. http://mobile.oregonlive.com

LearnTheMobileWeb.com 03/23/09
30

Device Awareness
Exploit device capabilities. Do not take a least

common denominator approach.
Take reasonable steps to work around deficient

implementations.
Provide a better user experience on more capable devices

Serve the best markup for the mobile device.

Syntactically Correct

Design Appropriate for Screen Size

Not suficient to build an iPhone site!

Most mobile web users do not use iPhone or iTouch.

iPhone-only sites reach 10%-15% of mobile market

Demographics and Geography Matters!

Enterprise users: BlackBerry or Palm or Windows Mobile

Teenagers: Low-cost featurephones

Europe and Asia: Nokia

Africa: Low-cost featurephones

LearnTheMobileWeb.com 03/23/09
31

The Meaning of Content Adaptation
More than just conditional execution in mobile

templates
Mobile platforms oer dierent presentation

capabilities.
iPhone Menus != WML Menus != WAP Menus

The best mobile web applications exploit

strengths of each platform.
LearnTheMobileWeb.com 03/23/09
32

Content Adaptation Strategy
Expect and Manage Diversity

Embrace change.

Create Device Groups

Classify the universe of mobile devices into groups

Device database helps identify and classify devices

Group Count and Criteria based on Project Requirements

Create a Reference Design for the Mobile Web Site

Select a reference screen size (screen width)

OK to create multiple reference designs, as project permits

A fluid reference design eases adaptation

Create Rules for Adapting the Reference Design to Device Groups

Changing or Removing design components

Scaling and transcoding graphics

Style Changes (i.e. CSS)

Implement!

Device Database used to Classify Groups and Drive Content Adaptation

LearnTheMobileWeb.com 03/23/09
33

Popular Device Databases
WURFL

The industry standard. Open Data and Open Source.

Device Atlas

owned by dotMobi

Commercial but aordable

W3C is in the mix

Recommends a standard API for accessing device repositories.

Recommends a standard meta-layer for evaluating device

properties.
Others

J2ME Polish – JSR support for Java ME devices

Alembic by Mobile Distillery (and Celsius for Automated

Porting)
Aside: Automated porting is a myth!

Mobile Research – Expensive, proprietary device database

tracking hundreds of capabilities per device model.
LearnTheMobileWeb.com 03/23/09
34

Mobile Web Development @ PCC
LearnTheMobileWeb.com 03/23/09
35

Mobile Web Courses @ PCC
Mobile Web Development
Mobile Web Sites for Featurephones and

Smartphones
Focus on Mobilized Development Practices

Spring 2009: May – June

Fall 2009: October - November

Advanced Mobile Web Development
Rich Mobile Web Applications for Smart Devices

Surviving in the Mobile Ecosystem

Summer 2009: Curriculum Development

Fall 2009: October - November

Part of Computer Education Program @ PCC
LearnTheMobileWeb.com 03/23/09
36

Mobile Web Development
Standards-compliant web sites for mobile phones

Featurephones and Smartphones

Mobile Markup Syntax

Mobile Web Design and Usability

Content Adaptation for Mobile Devices

Validation, Optimization, Testing and Deployment

Mobile Web Discoverability, Trafic Acquisition and SEO

Monetizing the Mobile Web

Mobile JavaScript and AJAX for Featurephones

Mobile Ecosystems

Operators, transcoders and proxies, oh my!

http://learnthemobileweb.com/mobile-web-

development/
LearnTheMobileWeb.com 03/23/09
37

Advanced Mobile Web Development
Mobile web applications for smartphones

Smartphone = HTML 4 and 5 + JavaScript + AJAX

Forget Today’s Mainstream Featurephones

Forget microbrowser quirks and workarounds

Focus on Rich Mobile Web Apps for Smart Devices

Web Standards Applied to Small Screens and Mobile Users

Single Path to Market across Many Platform SDKs

iPhone, Android, RIM, Windows Mobile, …

Safari, Chrome, Opera Mobile, Pocket IE, Skyfire, …

WebKit, JavaScript, AJAX in a Mobile Context

Designing for Finger and Stylus Touch Interaction

Evaluation of Open-Source Libraries for Mobile Web Apps

Surviving in the Mobile Ecosystem

Defensive Programming against Transcoders

LearnTheMobileWeb.com 03/23/09
38

Thank You!
Learn more at
LearnTheMobileWeb.com
Standards-Based Mobile Web Development
LearnTheMobileWeb.com 03/23/09
39