Your SlideShare is downloading. ×
Mobile Web Mobile Portland March 2009
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Mobile Portland March 2009


Published on

Presented by Gail Rahn Frederick at Mobile Portland in March 2009 …

Presented by Gail Rahn Frederick at Mobile Portland in March 2009

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

Published in: Technology

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Standards-Based Mobile Web Development Mobile Portland, March 2009 03/23/09 1
  • 2. 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  03/23/09 2
  • 3. Introducing Me Gail Rahn Frederick  / 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/09 3
  • 4. 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? 03/23/09 4
  • 5. Why Study Mobile Web Development? 03/23/09 5
  • 6. 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!  03/23/09 6
  • 7. 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  03/23/09 7
  • 8. 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  03/23/09 8
  • 9. 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  03/23/09 9
  • 10. Mobile Web Usage Statistics 03/23/09 10
  • 11. 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 03/23/09 11
  • 12. 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 03/23/09 12
  • 13. 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 03/23/09 13
  • 14. 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, 03/23/09 14
  • 15. 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 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/09 15
  • 16. 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 03/23/09 16
  • 17. 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 03/23/09 17
  • 18. 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 03/23/09 18
  • 19. Standards-Based Approach to Mobile Web Development 03/23/09 19
  • 20. 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 03/23/09 20
  • 21. 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. 03/23/09 21
  • 22. 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  03/23/09 22
  • 23. 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. 03/23/09 23
  • 24. 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 @  Add mobile-specific features  Access keys increase link usability  a href=“foo.xhtml” accesskey=quot;1“ … /a 03/23/09 24
  • 25. 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.  03/23/09 25
  • 26. 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!   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/09 26
  • 27. 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?  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!  03/23/09 27
  • 28. 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.  03/23/09 28
  • 29. 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.  03/23/09 29
  • 30. 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  vs.  03/23/09 30
  • 31. 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  03/23/09 31
  • 32. 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. 03/23/09 32
  • 33. 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  03/23/09 33
  • 34. 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. 03/23/09 34
  • 35. Mobile Web Development @ PCC 03/23/09 35
  • 36. 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 03/23/09 36
  • 37. 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!   development/ 03/23/09 37
  • 38. 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  03/23/09 38
  • 39. Thank You! Learn more at Standards-Based Mobile Web Development 03/23/09 39