Standards-Based Mobile Web Development


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

Published in: Technology, Business
  • Learning Web App Development ---
    Are you sure you want to  Yes  No
    Your message goes here
  • Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics ---
    Are you sure you want to  Yes  No
    Your message goes here
  • Web Design with HTML, CSS, JavaScript and jQuery Set ---
    Are you sure you want to  Yes  No
    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  Yes  No
    Your message goes here
  • Great share. Interesting.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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.
  • Standards-Based Mobile Web Development

    1. 1. Standards-BasedMobile Web Development<br />Portland Code Camp, May 2010<br />5/22/2010<br />1<br /><br />
    2. 2. Agenda<br />5/22/2010<br /><br />2<br />Introduction<br />Why Learn Mobile Web Development?<br />… Mobile Web != Desktop Web<br />Explosive Growth of Mobile Web<br />… In Size and Influence<br />Standards-Based Approach to Mobile Web Development<br />… Web and Mobility Standards and Usability Best Practices<br />Learn the Mobile Web!<br />Courses, Book and User Group<br />
    3. 3. Introducing Me<br />5/22/2010<br /><br />3<br />Gail Rahn Frederick<br /> / 503-260-0910<br />Mobile Developer and Enthusiast for 7+ Years<br />Mobile Applications and Mobile Web Services on 6+ operators in 10+ countries in North America and Europe<br />Mobile Software Architect at Medio Systems<br />Personalized mobile content discovery<br />Instructor of Mobile Web Development<br />PCC, Mt Hood CC and online at Learn the Mobile Web<br />Technology Writer<br />Blogs and Software Books<br />
    4. 4. Introducing You<br />5/22/2010<br /><br />4<br />Do you …<br />Own a Mobile Phone? A Smartphone?<br />Browse the Web on your Phone?<br />Browse Primarily on your Phone?<br />Have you …<br />Downloaded a Mobile App? Paid for an App?<br />Published a Mobile App? A Mobile Web Site?<br />Earned Money as a Mobile Publisher?<br />Adapted Mobile Content Using a Device Database?<br />
    5. 5. It’s All One Web<br />5/22/2010<br /><br />5<br />W3C’s One Web Vision<br />The same information and services available to users irrespective of the access device<br />However, the same information may not have the same representation across all devices<br />So … the same Web content should be available to mobile and desktop devices (i.e. browsers)<br />But the Mobile Web …<br />looks different (screen size, device capabilities)<br />acts different (user behavior, browser behavior, input methods)<br />is accessed differently (radio network, wi-fi, transcoders)<br />Mobile Web != Desktop Web<br />
    6. 6. Why Learn Mobile Web Development?<br />5/22/2010<br /><br />6<br />
    7. 7. Why Study Mobile Web Development?<br />5/22/2010<br /><br />7<br />The Mobile Web is Totally New<br />Mobile Web != Desktop Web<br />New Best Practices and New Gotchas<br />Desktop Metaphors Simply Do Not Apply<br />The Mobile Device is Totally New<br />It’s Your New PC … and Exceedingly Personal<br />The Mobile Browser is Totally New<br />Has Unique Benefits, Quirks and Workarounds <br />Best Cross-Platform Mobile Technology, Despite Fragmentation<br />Especially for Smartphones<br />The Mobile User is Totally New<br />Network and Website Use, Session Lengths and Navigation Methods<br />
    8. 8. The Mobile Web is Totally New<br />5/22/2010<br /><br />8<br />New Markup and Scripting Languages<br />WML, XHTML-MP, Compact HTML, CSS-MP, JavaScript-MP<br />Partial Implementations of Standards is OK<br />Flawed Implementations are OK, too!<br />Optimize for Network Bandwidth<br />Document Size Matters. Even for Smartphones.<br />The Mobile Web is the Wild, Wild West<br />Operators are Free to Block Traffic to Your Site<br />Transcoding Proxies Re-Format your Markup<br />Defensive Programming is Essential<br />
    9. 9. The Mobile Device is Totally New<br />5/22/2010<br /><br />9<br />Truly a Personal Computer<br />What do you speak, text and photograph on your phone?<br />Ultimate Companion for Day-to-Day Living<br />Stores your Location, Interests, Friends and even Money<br />This data can be stored, aggregated, leveraged and monetized by OEMs, operators and intermediaries.<br />Ultimate Platform for Social Networking<br />Contact List = Friends List<br />Motoblur, Windows Phone 7 and other Social OSes<br />Plenty of personal subscriber data to monetize!<br />
    10. 10. The Mobile Browser is Totally New<br />5/22/2010<br /><br />10<br />New and “Improved” Markup Languages<br />HTML and XHTML-MP with Proprietary Extensions<br />Older, Weirder Markups like WML and Compact HTML<br />Mobile is the Killer Use Case for HTML5<br />Persistence, Canvas and Geolocation<br />Advanced Features affect Battery Life<br />JavaScript, Timer-Based Refreshes, AJAX, etc.<br />Improperly Formatted Web Pages have Drastic Effects<br />Browser Hangs or Crashes<br />Phone OS Resets or Powers Down<br />Still relevant for featurephones and dumbphones!<br />
    11. 11. The Mobile User is Totally New<br />5/22/2010<br /><br />11<br />Mobile Users fit into Three Behavioral Groups<br />According to Google Usability Professionals<br />Repetitive Now<br />Checking same data over and over: weather, stocks, scores, news, etc.<br />Optimize information access using cookies<br />Bored Now<br />People with time on their hands – commuters, cafes, etc.<br />Casual web surfers<br />Urgent Now<br />Business locations, directions to airport, etc<br />Location-based search activity. Wants to find important data fast.<br />Source: Google Presentation at NY Chapter of Usable Professionals Association, 2007<br />
    12. 12. Mobile WebUsage Statistics<br />5/22/2010<br /><br />12<br />
    13. 13. Prevalence of Mobile Phones<br />5/22/2010<br /><br />13<br />Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll<br />
    14. 14. Mobile Web vs. Desktop Web<br />5/22/2010<br /><br />14<br />
    15. 15. Mobile Web as Cross-Platform SDK<br />5/22/2010<br /><br />15<br />Today:<br /> iPhone, Android, RIM, Windows Phone 7, LiMo, Meego …<br />Fragmentation Concern:<br /> An API for Every Handset Vendor<br />What is the new cross-platform technology?<br />A standards-based mobile Web browser.<br />Source: Sender 11<br />
    16. 16. Smartphone Use is Exploding<br />5/22/2010<br /><br />16<br />41% Percent of Consumers Will Buy a Smartphone Next<br />Smartphones are 38% of US handsets in 2013<br />By now, the average U.S. consumer has had 4 mobile devices<br />Appetite for more advanced features<br />Source: Yankee Group, June 2009<br />People want smartphones but don’t know how to use them.<br />Source: 2010 BestBuy Survey<br />
    17. 17. Mobile Data Adoption Skyrockets<br />5/22/2010<br /><br />17<br />25% of consumers without mobile data services intend to start using them shortly<br />Consumers intend to dramatically increase use of mobile data services by 2011 ― with a significant ramp-up in 2010. <br />Up to 71% of consumers anticipate daily use of services such as mobile Internet<br />But, concerns about cost, speed and quality of service.<br />Source: Nielsen and Tellabs Study of Mobile Web Usage, Feb 2009<br />
    18. 18. Mobile Web Grows Faster than Expected<br />5/22/2010<br /><br />18<br />440,100 Touch-Enabled Mobile Web Sites<br />185,000 Apps in iPhone App Store<br /> 35,947 apps in the Android Market<br />Touch-Enabled Mobile Web sites are growing at an annual rate of 232%<br />iPhoneapps are growing at an annual rate of 144%<br />Android apps are growing at an annual rate of 403%<br />Source: Taptu Mobile Touch Web Report<br />
    19. 19. What does Google Think?<br />5/22/2010<br /><br />19<br />Mobile will be the #1 advertising growth area in 2010<br />Widespread uptake of data-enabled mobile devices<br />With GPS, cameras, personalization, social and local features, Google SVP of product management, Jonathan Rosenberg, said <br />“There is potential to make this mobile web better than the PC web.” <br />Source: GigaOM, Jan 2010<br />
    20. 20. Standards-Based Approach to Mobile Web Development<br />5/22/2010<br /><br />20<br />
    21. 21. Formula for Success<br />5/22/2010<br /><br />21<br />Mobile Web Development =<br />Web Standards + Mobile Usability + Content Adaptation + Network Optimization<br />
    22. 22. Web Standards<br />5/22/2010<br /><br />22<br />
    23. 23. Crowded Web Standards Landscape<br />5/22/2010<br /><br />23<br />Markup<br />HTML5, HTML, XHTML Mobile Profile, Legacy Markups<br />Styling<br />CSS, Wireless CSS, CSS-MP<br />Scripting<br />EcmaScript-MP, JavaScript 1.3 – 1.7<br />Device Databases<br />WURFL, Device Atlas, DDR-Simple API<br />Best Practices<br />Page Design, Transcoder Defense, Mobile Advertising<br />Validators<br />Markup Languages, Styling, Mobile Readiness<br />Standards Organizations<br />W3C, dotMobi, Open Mobile Alliance, Mobile Marketing Association, ECMA and Open Source projects like WURFL<br />
    24. 24. Skepticism of Mobile Standards<br />5/22/2010<br /><br />24<br />Membership of Standards Bodies <br />Members from Big Companies with Agendas<br />Independent Developers are Under-Represented<br />Mobile Web in its Infancy<br />Rush to Standardize Leads to Re-Work and Missed Targets<br />
    25. 25. Mobile Web Development Best Practices<br />5/22/2010<br /><br />25<br />Simple Design and Fast Rendering<br />Slow-to-Load Sites Lose Users<br />Mobile users browse with images turned off<br />Even smartphone users…<br />Scrolling Sucks<br />Minimize document byte size. Whitespace is Expensive.<br />Validate! Validate! Validate!<br />,, etc…<br />Test! Test! Test!<br />Firefox, Emulators and on Actual Devices.<br />Mobile browsers are Buggy<br />
    26. 26. Mobile Usability<br />5/22/2010<br /><br />26<br />
    27. 27. Utility on the Mobile Web<br />5/22/2010<br /><br />27<br />“Utility is the engine of the mobile web”<br />Solve a real problem for a consumer on the move.<br />What can mobile users do on the site?<br />How many clicks to complete a task?<br />Are tasks optimized for mobile?<br />Likely to be performed by mobile users<br />Provide timely information<br />Do mobile site results match desktop results?<br />i.e. same flight status info, same news headlines, etc.<br />
    28. 28. Targeted, Constrained Focus<br />5/22/2010<br /><br />28<br />Rethink, repackage, reformat.<br />Distill site down to essentials.<br />Remove extraneous content.<br />Content = features, pages and graphics.<br />Simplify, but don’t over-simplify.<br />The one-page mobile web siteis so 2006!<br />Promote user interest in the brand.<br />Optimize for most common mobile use cases – may be different from desktop access.<br />
    29. 29. Access to Relevant, Timely Information<br />5/22/2010<br /><br />29<br />Prioritize and organize features. Optimize for easy access to most popular tasks.<br />Airlines: Flight Status first. Baggage contracts last.<br />News: Top Stories first. Search nearby.<br />Promote snackability.<br />Small bites of content served up quickly and easily.<br />Mobile users have a short attention span.<br />Average Session Length is 3 Minutes<br />Remember Thematic Consistency<br />Also Thematic Currency<br /> vs.<br />
    30. 30. Content Adaptation<br />5/22/2010<br /><br />30<br />
    31. 31. The Meaning of Content Adaptation<br />5/22/2010<br /><br />31<br />Adapting Markup to Suit Browser Capabilities and Bugs<br />Adapting Content to Fit the Screen Size<br />Adapting Usability to Fit Device Input Methods<br />Touchscreens, Screen Orientation, Etc.<br />The best mobile web applications exploit strengths of each platform.<br />The best markup for the mobile device.<br />Design appropriately for screen size.<br />
    32. 32. Content Adaptation Realities<br />5/22/2010<br /><br />32<br />Insufficient to target only iPhones!<br />Most mobile web users do not use iPhone or iTouch.<br />Despite the hype and Admob statistics<br />iPhone-only sites reach 10%-15% of mobile market<br />Demographics and Geography Matters<br />Enterprise users: BlackBerry or Palm or Windows Mobile<br />Teenagers: Low-cost featurephones and dumbphones<br />Europe and Asia: Nokia<br />Africa: Low-cost featurephones<br />Smartphone Fragmentation is a Reality<br />19 Flavors of WebKit on Mobile Devices<br />HTML5 Implementations are New and Changing<br />
    33. 33. Content Adaptation Strategy<br />5/22/2010<br /><br />33<br />Expect and Manage Diversity<br />Embrace change.<br />Create Device Groups<br />Classify the universe of mobile devices into groups<br />Device database helps identify and classify devices<br />Group Count and Criteria based on Project Requirements<br />Create a Reference Design for the Mobile Web Site<br />Select a reference screen size (screen width)<br />OK to create multiple reference designs, as project permits<br />A fluid reference design eases adaptation<br />Create Rules for Adapting the Reference Design to Device Groups<br />Changing or Removing design components<br />Scaling and transcoding graphics<br />Style Changes (i.e. CSS)<br />Implement!<br />Device Database used to Classify Groups and Drive Content Adaptation<br />
    34. 34. Popular Device Databases<br />5/22/2010<br /><br />34<br />WURFL<br />The industry standard. Open Data and Open Source.<br />Device Atlas<br />owned by dotMobi<br />Commercial but affordable<br />W3C is in the mix<br />Recommends a standard API for accessing device repositories.<br />Recommends a standard meta-layer for evaluating device properties.<br />Others<br />J2ME Polish – JSR support for Java ME devices<br />Alembic by Mobile Distillery (and Celsius for Automated Porting)<br />Aside: Automated porting is a myth!<br />Mobile Research – Expensive, proprietary device database tracking hundreds of capabilities per device model.<br />
    35. 35. Network Optimization<br />5/22/2010<br /><br />35<br />
    36. 36. Minimize External Resources<br />5/22/2010<br /><br />36<br />Optimize the number of Mobile Web resources. Each linked external resource causes an expensive network round-trip.<br />Embed into a Mobile Web document only:<br />One CSS stylesheet<br />One JavaScript library<br />Absolutely necessary images<br />
    37. 37. Remove Unnecessary Whitespace<br />5/22/2010<br /><br />37<br />Optimize the content of Mobile Web resources. Remove HTML comments, whitespace and unnecessary markup.<br />i.e. minification<br />Reduces overall byte size of document.<br />Speeds download times, especially for radio networks.<br />Improves cacheability in mobile browser. <br />
    38. 38. Compress Response Documents<br />5/22/2010<br /><br />38<br />Optimize the delivery of Mobile Web resources.<br />Use GZIP response compression when requested in HTTP headers.<br />Supported by ~80% of mobile browsers<br />Use Caching Directives in HTTP Response Headers<br />Whether and for how long clients should cache a Web document<br />Supported on smartphones<br />It’s Safe! Ignored by browsers without persistent caches<br />Use Vary response header for content-adapted pages.<br />
    39. 39. Learn the Mobile Web!<br />5/22/2010<br /><br />39<br />
    40. 40. Mobile Web Courses<br />5/22/2010<br /><br />40<br />Mobile Web Development<br />Create Web Content for Any Mobile Browser<br />Web and Mobility Best Practices and Standards<br />For Web Developers/Designers with No Mobile Experience<br />Advanced Mobile Web Development<br />Rich Mobile Web Applications for Smartphones<br />HTML5, JavaScript, AJAX and WebKit for Mobile Devices<br />Home Screen Widgets using Web Technologies<br />Surviving in the Mobile Ecosystem<br />Part of Computer Education Program @ PCC and Mt Hood CC<br />
    41. 41. Mobile Web Development<br />5/22/2010<br /><br />41<br />Standards-compliant web sites for mobile phones<br />Featurephones and Smartphones<br />Mobile Markup Syntax<br />Mobile Web Design and Usability<br />Content Adaptation for Mobile Devices<br />Validation, Optimization, Testing and Deployment<br />Mobile Web Discoverability, Traffic Acquisition and SEO<br />Monetizing the Mobile Web<br />Mobile JavaScript and AJAX for Featurephones<br />Mobile Ecosystems<br />Operators, transcoders and proxies, oh my!<br /><br />
    42. 42. Advanced Mobile Web Development<br />5/22/2010<br /><br />42<br />Mobile web applications for smartphones<br />Smartphone = HTML 5 + JavaScript + AJAX<br />Forget Today’s Mainstream Featurephones<br />Forget microbrowser quirks and workarounds<br />Focus on Rich Mobile Web Apps for Smartphones<br />Small Screens and Mobile Users<br />Single Path to Market for all Mobile Platforms<br />iPhone, Android, RIM, Windows Phone 7, …<br />Safari, Chrome, Opera Mobile, Pocket IE, Skyfire, …<br />WebKit, JavaScript and AJAX in a Mobile Context<br />Designing for Touch<br />Open-Source Libraries<br />Home Screen Widgets using Web Technologies<br />Surviving in the Mobile Ecosystem<br />
    43. 43. Beginning Smartphone Web Development<br />5/22/2010<br /><br />43<br />Textbook for Mobile Web Development classes (mine and others)<br />Available at for $26.39<br />
    44. 44. Mobile Portland Users Group<br />5/22/2010<br /><br />44<br /><br />Local user group focused on mobile. <br />Fourth Monday of every month for presentations, discussion and networking.<br />If you're interested, join the Mobile Portland Google Group.<br />
    45. 45. Learn more<br />Standards-Based Mobile Web Development<br />5/22/2010<br /><br />45<br />Thank You!<br />