mobile web mobile portland march 2009
DESCRIPTION
Presented by Gail Rahn Frederick at Mobile Portland in March 2009Best practices for the desktop web simply do not apply to mobile web development. Mobile is a totally new medium. A standards-based approach to mobile web development produces a usable, adaptive and discoverable mobile web experience for featurephones and smartphones.Gail will lead a discussion about the importance of standards-based mobile web development a this month's Mobile Portland. She will cover markup fundamentals, design principles, content adaptation, usability and interoperability. We will explore and critique mobile standards and best practices authored by the W3C, dotMobi and similar organizations.TRANSCRIPT
03/23/09LearnTheMobileWeb.com
Standards-BasedMobile Web Development
Mobile Portland, March 2009
1
03/23/09LearnTheMobileWeb.com
Agenda
2
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
03/23/09LearnTheMobileWeb.com
Introducing Me
3
Gail Rahn Frederick [email protected] / 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
03/23/09LearnTheMobileWeb.com
Introducing You
4
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?
03/23/09LearnTheMobileWeb.com
Why Study Mobile Web Development?
5
03/23/09LearnTheMobileWeb.com
Why Study Mobile Web Development?
6
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
MethodsThe Mobile Browser is Totally New
Has Unique Benefits, Quirks and Workarounds Best Cross-Platform Mobile Technology
Especially for Smartphones Sorry, Java ME!
03/23/09LearnTheMobileWeb.com
The Mobile Web is Totally New
7
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 Traffic to Your Site Transcoding Proxies Re-Format your Markup Defensive Programming is Essential
03/23/09LearnTheMobileWeb.com
The Mobile User is Totally New
8
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
03/23/09LearnTheMobileWeb.com
The Mobile Browser is Totally New
9
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
03/23/09LearnTheMobileWeb.com
Mobile WebUsage Statistics
10
03/23/09LearnTheMobileWeb.com
Prevalence of Mobile Phones
11
Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll
Common Object Years in Existence World Usage
Automobile 100 800 millionPC 30 850 millionLandline Phone 110 1.3 billionCredit Card 40 1.4 billionTV 60 1.5 billionMobile Phone 35 3.3 billion
03/23/09LearnTheMobileWeb.com
Mobile Phone Usage Around the World
12
Dark Red is Lowest % of Mobile Phone Coverage – Emerging MarketsDark Green is Highest % of Mobile Phone Coverage – Saturated Markets
03/23/09LearnTheMobileWeb.com
Mobile Web vs. Desktop Web
13
Mobile Web Desktop Web
Avg Session Length 3 minutes 10 – 15 minutes
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 Ignored Mature and Accepted
Markup Languages WML 1.1, WML 1.3, CHTML, XHTML-MP, XHTML-Basic, ...
HTML
JavaScript and AJAX Not on 90% of clients.Partial Implementations and Proprietary APIs.
Yes
Addressable Clients 3.3 Billion 1 Billion (desktops and servers)
03/23/09LearnTheMobileWeb.com
Mobile Screen Size Trends
14
Source: Sender 11, mBricks analysis of WURFL, mobiForge.com.
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
Data Set is Color Mobile
Phones supportingJava ME =
Featurephones
03/23/09LearnTheMobileWeb.com
Screen Sizes on the Mobile Web
15
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%
Browser traffic seen by AdMob (AdMob Mobile Metrics Report, Dec 2008):
Jan 2009 statistics from worldwide mobile traffic 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%
03/23/09LearnTheMobileWeb.com
Mobile Data Adoption through 2010
16
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 Using
USA Europe
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
03/23/09LearnTheMobileWeb.com
Mobile Meaning of Cross-Platform
17
Source: Sender 11
The Old Days: Java ME for FeaturephonesFragmentation Concern: Java ME API support across OEMs and devicesBad Joke: There are a billion Java phones and each runs its own version of Java ME!
03/23/09LearnTheMobileWeb.com
Mobile Meaning of Cross-Platform
18
Source: Sender 11
Today: iPhone, Android, RIM, Windows Mobile, LiMo, Moblin …Fragmentation Concern: An SDK for Every Handset VendorWhat is the new Cross-Platform technology? A standards-based mobile browser.
03/23/09LearnTheMobileWeb.com
Standards-Based Approach to Mobile Web Development
19
03/23/09LearnTheMobileWeb.com
Which Standards and Best Practices?
20
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
03/23/09LearnTheMobileWeb.com
Healthy Skepticism aboutMobile Standards
21
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.
03/23/09LearnTheMobileWeb.com
Wireless Markup Language (WML)
22
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
03/23/09LearnTheMobileWeb.com
Wireless Markup Language (WML)
23
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.
03/23/09LearnTheMobileWeb.com
XHTML-MP Syntax
24
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>
03/23/09LearnTheMobileWeb.com
XHTML-MP Best Practices, 1 of 2
25
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>.
03/23/09LearnTheMobileWeb.com
XHTML-MP Best Practices, 2 of 2
26
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.
03/23/09LearnTheMobileWeb.com
Is the Site Mobilized?
27
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 flights!
03/23/09LearnTheMobileWeb.com
Utility on the Mobile Web
28
“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.
03/23/09LearnTheMobileWeb.com
Targeted, Constrained Focus
29
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.
03/23/09LearnTheMobileWeb.com
Access to Relevant, Timely Information
30
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
03/23/09LearnTheMobileWeb.com
Device Awareness
31
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
03/23/09LearnTheMobileWeb.com
The Meaning of Content Adaptation
32
More than just conditional execution in mobile templates
Mobile platforms offer different presentation capabilities. iPhone Menus != WML Menus != WAP Menus
The best mobile web applications exploit strengths of each platform.
03/23/09LearnTheMobileWeb.com
Content Adaptation Strategy
33
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
03/23/09LearnTheMobileWeb.com
Popular Device Databases
34
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.
03/23/09LearnTheMobileWeb.com
Mobile Web Development @ PCC
35
03/23/09LearnTheMobileWeb.com
Mobile Web Courses @ PCC
36
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
03/23/09LearnTheMobileWeb.com
Mobile Web Development
37
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/
03/23/09LearnTheMobileWeb.com
Advanced Mobile Web Development
38
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
03/23/09LearnTheMobileWeb.com
Learn more atLearnTheMobileWeb.com
Standards-Based Mobile Web Development
39
Thank You!