Standards-Based
Mobile Web Development
Portland Code Camp, May 2009
1 LearnTheMobileWeb.com 5/31/2009

Agenda
 Introduction
 Why Study Mobile Web Development?
 Mobile Web != Desktop Web
 Mobile Web Usage Statistics
 Which Users and Devices Access the Mobile Web and Why?
 Standards-Based Approach to Mobile Web Development
 … with Healthy Skepticism of Mobility Standards
 Mobile Web Classes @ PCC Computer Education
 Mobile Web Development
 Featurephones and Smartphones
 Advanced Mobile Web Development
 Deep Dive for Smartphone Browsers
 HTML 4 and 5 + JavaScript + AJAX
2 LearnTheMobileWeb.com 5/31/2009

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
3 LearnTheMobileWeb.com 5/31/2009

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?
4 LearnTheMobileWeb.com 5/31/2009

Why Study Mobile Web Development?
5 LearnTheMobileWeb.com 5/31/2009

Why Study Mobile Web Development?
The Mobile Web is Totally New
 Mobile Web is the Wild West
 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 Technology for Mobile
 Especially for Smartphones
 Java ME playing catch up
6 LearnTheMobileWeb.com 5/31/2009

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.
 Whitespace and Comments are the Enemy.
 Witness the “iPhone Effect”
 AT&T network congestion and rush to deploy LTE
 The Mobile Web is the Wild, Wild West
 Operators are Free to Block Traffic to Your Site
 Transcoding Proxies Re-Format your Markup
 Defensive Programming is Essential
7 LearnTheMobileWeb.com 5/31/2009

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
8
Association, 2007 LearnTheMobileWeb.com 5/31/2009

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 Affect Battery Life
 JavaScript and Timer-Based Refreshes
 Improperly Formatted Web Pages have Drastic
Effects
 Browser Hangs or Crashes
 Phone OS Resets or Powers Down
 Too Many Mobile Browser Vendors
 Embedded and Third-Party Software
 Each with Product Flaws
9 LearnTheMobileWeb.com 5/31/2009

Mobile Web
Usage Statistics
10 LearnTheMobileWeb.com 5/31/2009

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
11 LearnTheMobileWeb.com 5/31/2009

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
12 LearnTheMobileWeb.com 5/31/2009

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

Mobile Screen Size Trends
Data Set is
Color Mobile
Phones
supporting
Java ME =
Featurephones
Relative screen size difference is increasing.
Difference 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.
14 LearnTheMobileWeb.com 5/31/2009

Screen Sizes on the Mobile Web
Browser traffic seen by AdMob (AdMob Mobile Metrics Report, Dec 2008):
Screen Size Markup Support Worldwide United States
128x160 and WML Only 24.5% 18.5%
Smaller
Up to 176x220 WML or XHTML-MP 24.0% 23.9%
Up to 240x320 XHTML-MP or HTML 23.8% 18.9%
320x240 and XHTML-MP or HTML 27.7% 38.7%
Larger
Jan 2009 statistics from worldwide mobile traffic to GetJar.com:
Screen Size Markup Support Worldwide
128x128 and WML Only 18.9%
128x160
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%
15 LearnTheMobileWeb.com 5/31/2009

Mobile Data Adoption through 2010
 25% of US and EU consumers who do not use
mobile data services today intend to start using them
shortly
 Consumers intend to dramatically increase use of
mobile data services over the next two years ― with
a significant ramp-up in the next 12 months.
 Up to 71% of consumers anticipate daily use of
services such as mobile Internet
 But, concerns about cost, speed and quality of service.
Source: Nielsen and Tellabs Study of Mobile Web Usage, Feb 2009
16 LearnTheMobileWeb.com 5/31/2009

Mobile Data Adoption through 2010
Average Intended Mobile Data Usage Increase over Next USA Europe
24 Months
Current Users of Mobile Data 58% 55%
Non-Users of Mobile Data 27% 28%
Top Five Mobile Data Services that Non-Users USA Europe
Intend to Start 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
17 LearnTheMobileWeb.com 5/31/2009

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
18 LearnTheMobileWeb.com 5/31/2009

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
19 LearnTheMobileWeb.com 5/31/2009

Top Mobile Browsers in US and EU
 What are the most installed microbrowsers in the US
and EU?
United States Europe
Access NetFront (27%) Access NetFront (30%)
Openwave Browser Series 60 Browser
RIM Blackberry Browser Obigo Browser
 What’s not on the list?
 Safari Mobile for iPhone, MS Mobile IE and Opera
Mobile/Mini
 Is this expected?
 How browser install base relate to Mobile Internet
usage?
20 LearnTheMobileWeb.com 5/31/2009

Mobile Device Sales Share and Mobile
Web Presence
 Mobile Device Sales Share vs. Browse Presence on the Mobile Web
 Android and iPhone are Browsing AdMob Sites Above their Market Share
 Android and iPhone Heavy Usage due to Application Advertising
21 LearnTheMobileWeb.com 5/31/2009

Mobile Device Sales Share, Mobile Web
and Desktop Web Presence
The iPhone OS had 8% of smartphone market share, but generated 43% of
mobile Web requests and 65% of HTML usage.
The Android OS share of the smartphone market is less than 1%, but it
generated 3% of mobile Web requests and 9% of HTML usage.
22 LearnTheMobileWeb.com 5/31/2009

Standards-Based Approach
to Mobile Web Development
23 LearnTheMobileWeb.com 5/31/2009

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
 Design and Usability Best Practices
 Page Design, Site Design
 Mobile Ecosystem
 Transcoder Defense, Mobile Advertising
 Validators
 Markup Languages, Styling, Mobile Readiness
24 LearnTheMobileWeb.com 5/31/2009

Healthy Skepticism about
Mobile Standards
 Who are the Actors?
 W3C, dotMobi, Open Mobile Alliance, Mobile Marketing
Association, ECMA and Open Source projects like
WURFL
 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.
25 LearnTheMobileWeb.com 5/31/2009

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
26 LearnTheMobileWeb.com 5/31/2009
 DOCTYPE declaration is required

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.
 WML is Markup Language for WAP 1.x
27 LearnTheMobileWeb.com 5/31/2009

XHTML-MP Syntax
 Very Similar to XHTML on the Desktop Web
 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>
 XHTML-MP is Markup Language for WAP 2.x
28 LearnTheMobileWeb.com 5/31/2009

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 off
 Mobile users have per-kilobyte tariff
 Scrolling Sucks on Featurephones
 Setting font size in pixels or points is supported …
but a folly.
 Use headers or CSS instead to achieve visual
differentiation.
 Access keys are free in <ol>.
29 LearnTheMobileWeb.com 5/31/2009

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.
30 LearnTheMobileWeb.com 5/31/2009

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 different
devices.
 i.e. mobile version of desktop weather site should show weather not
31 flights! LearnTheMobileWeb.com 5/31/2009

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.
32 LearnTheMobileWeb.com 5/31/2009

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.
33 LearnTheMobileWeb.com 5/31/2009

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
34 LearnTheMobileWeb.com 5/31/2009

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 sufficient 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
35 LearnTheMobileWeb.com 5/31/2009

The Meaning of Content Adaptation
 More than just conditional execution in mobile
templates
 Mobile platforms offer different presentation
capabilities.
 iPhone Menus != WML Menus != XHTML-MP Menus
 The best mobile web applications exploit strengths of
each platform.
 Uniformity is a lowest-common-denominator approach.
 Mobile Users Stick to Sites with Compelling UX.
 Even if phone is “smart” and site is “mobile-friendly”.
36 LearnTheMobileWeb.com 5/31/2009

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
37 LearnTheMobileWeb.com 5/31/2009

Popular Device Databases
 WURFL
 The industry standard. Open Data and Open Source.
 Device Atlas
 owned by dotMobi
 Commercial but affordable
 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.
38 LearnTheMobileWeb.com 5/31/2009

Page Weight
 Obsessively Consider Page Weight
 Page weight = total size of markup document and all
external resources
 Most users are not on all-you-can-eat data plans
 Page weight affects cost and performance of browsing
 YSlow Firefox add-on assesses performance impact
 Data Plan Resources
 AT&T Wireless: 4MB with plan + $.005/kb overage
 T-Mobile: 50MB Web for $9.99/mo = $.20/MB =
$.0002/kb
 Verizon: $1.99 per MB on National Plans = $.0002/kb
 Sprint: Mobile Web is 3¢/kb without data plan
39 LearnTheMobileWeb.com 5/31/2009

Page Weight, 2 of 2
 http://m.cnn.com/ is ~11k
 2503 bytes of markup + 5784 bytes of external resources + 2997 bytes of
advertising
 http://eonline.mobi/ is ~42k
 5661 bytes of markup + 17610 bytes of images (!) + 11601 bytes of
stylesheets (!) + 7139 bytes of advertising
Operator CNN Cost E-Online Cost
AT&T Wireless $.055 = 5.5¢ $0.21 = 21¢
($.005/kb)
overage on data plan
T-Mobile ($.0002/kb) $.0022 = .22¢ $.0084 = .84¢
effective cost on data
plan
Verizon ($.0002/kb) $.0022 = .22¢ $.0084 = .84¢
with national phone plan
Sprint ($.03/kb)
40 $.33 = 33¢ $1.26
LearnTheMobileWeb.com 5/31/2009

Transcoders and the Mobile Ecosystem
41 LearnTheMobileWeb.com 5/31/2009

The Purpose of Transcoders
 To Bring the Rich Desktop Web to Microbrowsers
 To Broaden the Featurephone Handset Catalog
Capable of Surfing the Desktop Web
 To Ensure Syntactic Markup Compatibility with
Limited Microbrowsers
 No more browser crashes, handset power-cycling, etc.
 HTML 4  XHTML-MP
 500k Desktop Web Page -> 20 x 10k Mobile Web Pages
 Cynically … to Increase Operator Data ARPU by
Providing Least-Common Denominator Support for
Web Content
42 LearnTheMobileWeb.com 5/31/2009

Mandatory Fun
Paraphrasing Luca Passani, creator of WURFL
 The problem with transcoders is…
 The service is not offered to customers, but rather
assigned to customers by default
 The service prevents average customers from legitimately
accessing third-party sites specifically tailored for mobile
devices
 Flawed Justification for Transcoders
 A machine can do a better job of following mobile web
best practices than a human.
43 LearnTheMobileWeb.com 5/31/2009

Grim Reality of Transcoders
 Transcoders do make the desktop web syntactically
viable on a mobile device, but…
 Frequently transcodes content already Optimized for
Mobile
 Company deploys desktop and mobile web sites
 Transcoder adapts desktop site rather than forwarding to
mobile version.
 Forces mobile content owners to opt-out of adaptation
 Repeatedly: mobile operators, search engines, etc.
 Injects header and/or footer with navigation and
advertising
 May be a violation of copyright laws
 Is a transcoded web page a derivative of copyrighted work?
 Frequently renders unusable content
 Far less usable than a site specifically tailored for mobile
devices.

44 And we haven’t even considered form submission, non-textual
LearnTheMobileWeb.com 5/31/2009
content, unusual navigation elements, etc.

Hating the Mobile Web Developer
 A web site that plays nice
 Provides desktop and mobile-optimized markup
 Adheres to W3C and dotMobi best practices
 Advertises its presence on the Mobile Web
 Stands a reasonable chance of being abused by a transcoder
 Why?
 Transcoders cloak the mobile user-agent, making HTTP requests instead
using desktop user-agents
 Mobile User-Agent may be discoverable in proprietary request headers
 Nice web site is convinced the client is not mobile.
 Sends desktop markup that the transcoder adapts for mobile
 Forcing the Mobile Web Developer to React
 Defensive Programming to Avoid Transcoding
 Research and Submit Whitelist Requests to Each Operator
 Inspect HTTP request headers for undocumented workarounds
 Isn’t this frustrating? Would this ever be OK on the desktop
web?
45 LearnTheMobileWeb.com 5/31/2009

Mobile Web Development @ PCC
46 LearnTheMobileWeb.com 5/31/2009

Mobile Web Courses @ PCC
Mobile Web Development
 Mobile Web Sites for Featurephones and Smartphones
 Focus on Mobilized Development Practices
 Fall 2009: October - November
Advanced Mobile Web Development
 Rich Mobile Web Applications for Smart Devices
 Optimizing for Popular Third-Party Mobile Web Browsers
 And frameworks like WebKit
 Hybrid Native and Mobile Web Applications
 Surviving in the Mobile Ecosystem
 Fall 2009: October - November
Part of Computer Education Program @ PCC
47 LearnTheMobileWeb.com 5/31/2009

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, Traffic 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/
48 LearnTheMobileWeb.com 5/31/2009

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
49 LearnTheMobileWeb.com 5/31/2009

Thank You!
Learn more at
LearnTheMobileWeb.com
Standards-Based Mobile Web Development
50 LearnTheMobileWeb.com 5/31/2009