Standards-Based Mobile Web Development

Uploaded on

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 …

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.

This is a one-hour tutorial the importance of standards-based mobile web development. We explore mobile markup fundamentals, mobile web design principles, content adaptation, usability, interoperability, Mobile Javascript and AJAX. We evaluate and critique mobile markup and mobile web standards and best practices authored by the W3C, dotMobi and similar organizations.

Presented at Portland CodeCamp 2010 in Portland, OR.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks for sharing. Fomaxtech is leading Mobile Application Development,Smartphone Application Development,Mobile Website Development Company delivering consulting, systems integration, and outsourcing solutions to clients of all verticals.
    Are you sure you want to
    Your message goes here
  • Great share. Interesting.
    Are you sure you want to
    Your message goes here
  • Thank you Very much...
    Are you sure you want to
    Your message goes here
  • thanks for sharing this knowledge!
    Are you sure you want to
    Your message goes here
  • Good Content, Good Stats, Standards included is a Plus
    Are you sure you want to
    Your message goes here
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
  • Today, we’ll learn about the mobile web and how it differentiates from the traditional desktop-oriented Web. We’ll see that the Mobile Web is growing exponentially, both in size and influence. I’ll give an overview of a standards-based approach to MWD, where the standards are both old Web stalwarts and new mobile standards and conventions. Finally, I’ll provide a sampling of resources to learn more, including courses, a book and a user group.INFORMAL SESSION. FEEL FREE TO STOP ME AND ASK QUESTIONS BY RAISING YOUR HAND.
  • I’d like to get to know the audience. Raise your hand if you can answer YES to these questions that I’ll pose. Do you …
  • I’m here to convince you today that the Mobile Web, while part of the W3C’s One Web vision, is distinctly different and deserves a new approach to web development. The uniquely different devices, access methods, browsing patterns and user behavior of the Mobile Web necessitate that it is treated as a distinct medium from the Desktop Web.
  • Why should one learn Mobile Web Development, as a separate discipline? This diagram says it all. The MW is the traditional desktop Web with several new degrees of randomness. The mobile ecosystem has chaos at every turn: markup evolution, standards implementation, browser quality and device user interfaces.This diagram shows the evolution of markup languages on the mobile web. Admittedly, the chart is quite old, but it still captures the crazy nature of mobile web evolution. 7 Markups! Which are relevant, why and in which contexts?
  • We study mobile web development because the Mobile Web, Device, Browser and User are all totally new.
  • The markup, standards and business climate of the mobile web is totally new.
  • Mobile devices are more “personal” than a PC or laptop. We care for and carry our mobile devices as if they were our children.
  • There are at least 12 vendors of mobile browsers commonly found on mobile devices. Even amongWebKit browsers, wide variation exists depending on the release version and branch of the underlying WebKit implementation. Fragmentation is king here, and diversity is to be expected.
  • I am not a member of the Church of Google, but I do think their usability professionals were totally right when they divided mobile users into 3 main groups…
  • Now that I’ve told you why I think the Mobile Web is totally new…I will convince you that the Mobile Web is positively exploding in size and importance.
  • Here’s a chart of life-altering inventions and their usage in the world. You can see here, the mobile phone is almost the youngest and has achieved near-ubiquity in its 35 years of life. About half of the world’s people use mobile devices, more than any other invention by a factor of 2.
  • This chart lists several key differences between the mobile and desktop webs.
  • The Mobile Web is the best cross-platform technology for mobile. A standards-compliant browser…
  • 25% is a huge number – and daily use of the mobile Internet means a massive uptake in services. Solve a real problem for the mobile consumer and you have the potential for a massive install base.Who are mobile data users? People with smartphones, etc.Who are non-users of mobile data? People with featurephones without texting and data plans. The mobile have-nots.Current mobile data users expect to double their usage in 2010!Fully half of non-users expect to start using mobile data in 2010!My barometer for mobile data adoption in the mass market is my in-laws. Parents in Southern Oregon with 5 teenage girls aged 15-25. Two thanksgivings ago, only parents had mobile phones – Nextel PTT. Last Thanksgiving, everyone had a touchscreen device and was surfing the web and texting!
  • The number of Mobile Web sites is increasing faster than even the ubiquitous iPhone app store catalog!The number of  Mobile Touch Web sites to reach 1.1 million (up from their previous prediction of  0.5 million) by the end of 2010.
  • Google said in an earnings report htat …
  • Adaptation = adapting Web page content and markup to target the capabilities and interests of the mobile device, network and userOptimization = reducing Web content to the lightest possible network footprint.Let’s look at each of these components individually…
  • Show examples of validators ( and and emulators (Palm, WP7, Android)
  • Look at FlightStats – desktop and mobile version – position of main menu elements.
  • Oregon Live desktop vs. mobile
  • Content adaptation is the technique of changing Web markup, styles and scripting to target the capabilities (and avoid the bugs) in specific mobile device and browser models.
  • Optimize the number, content and delivery of Mobile Web resources for the lightest possible footprint on mobile networks.Why? (audience question) the iPhone effect – overloading of AT&T’s network by the popularity of Web surfing on iPhones.


  • 1. Standards-BasedMobile Web Development
    Portland Code Camp, May 2010
  • 2. Agenda
    Why Learn Mobile Web Development?
    … Mobile Web != Desktop Web
    Explosive Growth of Mobile Web
    … In Size and Influence
    Standards-Based Approach to Mobile Web Development
    … Web and Mobility Standards and Usability Best Practices
    Learn the Mobile Web!
    Courses, Book and User Group
  • 3. Introducing Me
    Gail Rahn Frederick / 503-260-0910
    Mobile Developer and Enthusiast for 7+ Years
    Mobile Applications and Mobile Web Services on 6+ operators in 10+ countries in North America and Europe
    Mobile Software Architect at Medio Systems
    Personalized mobile content discovery
    Instructor of Mobile Web Development
    PCC, Mt Hood CC and online at Learn the Mobile Web
    Technology Writer
    Blogs and Software Books
  • 4. Introducing You
    Do you …
    Own a Mobile Phone? A Smartphone?
    Browse the Web on your Phone?
    Browse Primarily on your Phone?
    Have you …
    Downloaded a Mobile App? Paid for an App?
    Published a Mobile App? A Mobile Web Site?
    Earned Money as a Mobile Publisher?
    Adapted Mobile Content Using a Device Database?
  • 5. It’s All One Web
    W3C’s One Web Vision
    The same information and services available to users irrespective of the access device
    However, the same information may not have the same representation across all devices
    So … the same Web content should be available to mobile and desktop devices (i.e. browsers)
    But the Mobile Web …
    looks different (screen size, device capabilities)
    acts different (user behavior, browser behavior, input methods)
    is accessed differently (radio network, wi-fi, transcoders)
    Mobile Web != Desktop Web
  • 6. Why Learn Mobile Web Development?
  • 7. 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 Device is Totally New
    It’s Your New PC … and Exceedingly Personal
    The Mobile Browser is Totally New
    Has Unique Benefits, Quirks and Workarounds
    Best Cross-Platform Mobile Technology, Despite Fragmentation
    Especially for Smartphones
    The Mobile User is Totally New
    Network and Website Use, Session Lengths and Navigation Methods
  • 8. 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 Traffic to Your Site
    Transcoding Proxies Re-Format your Markup
    Defensive Programming is Essential
  • 9. The Mobile Device is Totally New
    Truly a Personal Computer
    What do you speak, text and photograph on your phone?
    Ultimate Companion for Day-to-Day Living
    Stores your Location, Interests, Friends and even Money
    This data can be stored, aggregated, leveraged and monetized by OEMs, operators and intermediaries.
    Ultimate Platform for Social Networking
    Contact List = Friends List
    Motoblur, Windows Phone 7 and other Social OSes
    Plenty of personal subscriber data to monetize!
  • 10. The Mobile Browser is Totally New
    New and “Improved” Markup Languages
    HTML and XHTML-MP with Proprietary Extensions
    Older, Weirder Markups like WML and Compact HTML
    Mobile is the Killer Use Case for HTML5
    Persistence, Canvas and Geolocation
    Advanced Features affect Battery Life
    JavaScript, Timer-Based Refreshes, AJAX, etc.
    Improperly Formatted Web Pages have Drastic Effects
    Browser Hangs or Crashes
    Phone OS Resets or Powers Down
    Still relevant for featurephones and dumbphones!
  • 11. 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
  • 12. Mobile WebUsage Statistics
  • 13. Prevalence of Mobile Phones
    Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll
  • 14. Mobile Web vs. Desktop Web
  • 15. Mobile Web as Cross-Platform SDK
    iPhone, Android, RIM, Windows Phone 7, LiMo, Meego …
    Fragmentation Concern:
    An API for Every Handset Vendor
    What is the new cross-platform technology?
    A standards-based mobile Web browser.
    Source: Sender 11
  • 16. Smartphone Use is Exploding
    41% Percent of Consumers Will Buy a Smartphone Next
    Smartphones are 38% of US handsets in 2013
    By now, the average U.S. consumer has had 4 mobile devices
    Appetite for more advanced features
    Source: Yankee Group, June 2009
    People want smartphones but don’t know how to use them.
    Source: 2010 BestBuy Survey
  • 17. Mobile Data Adoption Skyrockets
    25% of consumers without mobile data services intend to start using them shortly
    Consumers intend to dramatically increase use of mobile data services by 2011 ― with a significant ramp-up in 2010.
    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
  • 18. Mobile Web Grows Faster than Expected
    440,100 Touch-Enabled Mobile Web Sites
    185,000 Apps in iPhone App Store
    35,947 apps in the Android Market
    Touch-Enabled Mobile Web sites are growing at an annual rate of 232%
    iPhoneapps are growing at an annual rate of 144%
    Android apps are growing at an annual rate of 403%
    Source: Taptu Mobile Touch Web Report
  • 19. What does Google Think?
    Mobile will be the #1 advertising growth area in 2010
    Widespread uptake of data-enabled mobile devices
    With GPS, cameras, personalization, social and local features, Google SVP of product management, Jonathan Rosenberg, said
    “There is potential to make this mobile web better than the PC web.”
    Source: GigaOM, Jan 2010
  • 20. Standards-Based Approach to Mobile Web Development
  • 21. Formula for Success
    Mobile Web Development =
    Web Standards + Mobile Usability + Content Adaptation + Network Optimization
  • 22. Web Standards
  • 23. Crowded Web Standards Landscape
    HTML5, HTML, XHTML Mobile Profile, Legacy Markups
    CSS, Wireless CSS, CSS-MP
    EcmaScript-MP, JavaScript 1.3 – 1.7
    Device Databases
    WURFL, Device Atlas, DDR-Simple API
    Best Practices
    Page Design, Transcoder Defense, Mobile Advertising
    Markup Languages, Styling, Mobile Readiness
    Standards Organizations
    W3C, dotMobi, Open Mobile Alliance, Mobile Marketing Association, ECMA and Open Source projects like WURFL
  • 24. Skepticism of 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 Re-Work and Missed Targets
  • 25. Mobile Web Development Best Practices
    Simple Design and Fast Rendering
    Slow-to-Load Sites Lose Users
    Mobile users browse with images turned off
    Even smartphone users…
    Scrolling Sucks
    Minimize document byte size. Whitespace is Expensive.
    Validate! Validate! Validate!,, etc…
    Test! Test! Test!
    Firefox, Emulators and on Actual Devices.
    Mobile browsers are Buggy
  • 26. Mobile Usability
  • 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.
  • 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 siteis so 2006!
    Promote user interest in the brand.
    Optimize for most common mobile use cases – may be different from desktop access.
  • 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 vs.
  • 30. Content Adaptation
  • 31. The Meaning of Content Adaptation
    Adapting Markup to Suit Browser Capabilities and Bugs
    Adapting Content to Fit the Screen Size
    Adapting Usability to Fit Device Input Methods
    Touchscreens, Screen Orientation, Etc.
    The best mobile web applications exploit strengths of each platform.
    The best markup for the mobile device.
    Design appropriately for screen size.
  • 32. Content Adaptation Realities
    Insufficient to target only iPhones!
    Most mobile web users do not use iPhone or iTouch.
    Despite the hype and Admob statistics
    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 and dumbphones
    Europe and Asia: Nokia
    Africa: Low-cost featurephones
    Smartphone Fragmentation is a Reality
    19 Flavors of WebKit on Mobile Devices
    HTML5 Implementations are New and Changing
  • 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)
    Device Database used to Classify Groups and Drive Content Adaptation
  • 34. Popular Device Databases
    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.
    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.
  • 35. Network Optimization
  • 36. Minimize External Resources
    Optimize the number of Mobile Web resources. Each linked external resource causes an expensive network round-trip.
    Embed into a Mobile Web document only:
    One CSS stylesheet
    One JavaScript library
    Absolutely necessary images
  • 37. Remove Unnecessary Whitespace
    Optimize the content of Mobile Web resources. Remove HTML comments, whitespace and unnecessary markup.
    i.e. minification
    Reduces overall byte size of document.
    Speeds download times, especially for radio networks.
    Improves cacheability in mobile browser.
  • 38. Compress Response Documents
    Optimize the delivery of Mobile Web resources.
    Use GZIP response compression when requested in HTTP headers.
    Supported by ~80% of mobile browsers
    Use Caching Directives in HTTP Response Headers
    Whether and for how long clients should cache a Web document
    Supported on smartphones
    It’s Safe! Ignored by browsers without persistent caches
    Use Vary response header for content-adapted pages.
  • 39. Learn the Mobile Web!
  • 40. Mobile Web Courses
    Mobile Web Development
    Create Web Content for Any Mobile Browser
    Web and Mobility Best Practices and Standards
    For Web Developers/Designers with No Mobile Experience
    Advanced Mobile Web Development
    Rich Mobile Web Applications for Smartphones
    HTML5, JavaScript, AJAX and WebKit for Mobile Devices
    Home Screen Widgets using Web Technologies
    Surviving in the Mobile Ecosystem
    Part of Computer Education Program @ PCC and Mt Hood CC
  • 41. 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!
  • 42. Advanced Mobile Web Development
    Mobile web applications for smartphones
    Smartphone = HTML 5 + JavaScript + AJAX
    Forget Today’s Mainstream Featurephones
    Forget microbrowser quirks and workarounds
    Focus on Rich Mobile Web Apps for Smartphones
    Small Screens and Mobile Users
    Single Path to Market for all Mobile Platforms
    iPhone, Android, RIM, Windows Phone 7, …
    Safari, Chrome, Opera Mobile, Pocket IE, Skyfire, …
    WebKit, JavaScript and AJAX in a Mobile Context
    Designing for Touch
    Open-Source Libraries
    Home Screen Widgets using Web Technologies
    Surviving in the Mobile Ecosystem
  • 43. Beginning Smartphone Web Development
    Textbook for Mobile Web Development classes (mine and others)
    Available at for $26.39
  • 44. Mobile Portland Users Group
    Local user group focused on mobile.
    Fourth Monday of every month for presentations, discussion and networking.
    If you're interested, join the Mobile Portland Google Group.
  • 45. Learn more
    Standards-Based Mobile Web Development
    Thank You!