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.

1. Standards-BasedMobile Web Development Portland Code Camp, May 2010 5/22/2010 1 LearnTheMobileWeb.com

2. Agenda 5/22/2010 LearnTheMobileWeb.com 2 Introduction 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 5/22/2010 LearnTheMobileWeb.com 3 Gail Rahn Frederick gail.frederick@gmail.com / 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 5/22/2010 LearnTheMobileWeb.com 4 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 5/22/2010 LearnTheMobileWeb.com 5 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? 5/22/2010 LearnTheMobileWeb.com 6

7. Why Study Mobile Web Development? 5/22/2010 LearnTheMobileWeb.com 7 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 5/22/2010 LearnTheMobileWeb.com 8 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 5/22/2010 LearnTheMobileWeb.com 9 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 5/22/2010 LearnTheMobileWeb.com 10 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 5/22/2010 LearnTheMobileWeb.com 11 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 5/22/2010 LearnTheMobileWeb.com 12

13. Prevalence of Mobile Phones 5/22/2010 LearnTheMobileWeb.com 13 Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll

14. Mobile Web vs. Desktop Web 5/22/2010 LearnTheMobileWeb.com 14

15. Mobile Web as Cross-Platform SDK 5/22/2010 LearnTheMobileWeb.com 15 Today: 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 5/22/2010 LearnTheMobileWeb.com 16 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 5/22/2010 LearnTheMobileWeb.com 17 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 5/22/2010 LearnTheMobileWeb.com 18 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? 5/22/2010 LearnTheMobileWeb.com 19 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 5/22/2010 LearnTheMobileWeb.com 20

21. Formula for Success 5/22/2010 LearnTheMobileWeb.com 21 Mobile Web Development = Web Standards + Mobile Usability + Content Adaptation + Network Optimization

22. Web Standards 5/22/2010 LearnTheMobileWeb.com 22

23. Crowded Web Standards Landscape 5/22/2010 LearnTheMobileWeb.com 23 Markup HTML5, HTML, XHTML Mobile Profile, Legacy Markups Styling CSS, Wireless CSS, CSS-MP Scripting 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

24. Skepticism of Mobile Standards 5/22/2010 LearnTheMobileWeb.com 24 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 5/22/2010 LearnTheMobileWeb.com 25 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! http://validator.w3.org, http://ready.mobi, etc… Test! Test! Test! Firefox, Emulators and on Actual Devices. Mobile browsers are Buggy

26. Mobile Usability 5/22/2010 LearnTheMobileWeb.com 26

27. Utility on the Mobile Web 5/22/2010 LearnTheMobileWeb.com 27 “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 5/22/2010 LearnTheMobileWeb.com 28 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 5/22/2010 LearnTheMobileWeb.com 29 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

30. Content Adaptation 5/22/2010 LearnTheMobileWeb.com 30

31. The Meaning of Content Adaptation 5/22/2010 LearnTheMobileWeb.com 31 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 5/22/2010 LearnTheMobileWeb.com 32 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 5/22/2010 LearnTheMobileWeb.com 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

34. Popular Device Databases 5/22/2010 LearnTheMobileWeb.com 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.

35. Network Optimization 5/22/2010 LearnTheMobileWeb.com 35

36. Minimize External Resources 5/22/2010 LearnTheMobileWeb.com 36 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 5/22/2010 LearnTheMobileWeb.com 37 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 5/22/2010 LearnTheMobileWeb.com 38 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! 5/22/2010 LearnTheMobileWeb.com 39

40. Mobile Web Courses 5/22/2010 LearnTheMobileWeb.com 40 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 5/22/2010 LearnTheMobileWeb.com 41 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/

42. Advanced Mobile Web Development 5/22/2010 LearnTheMobileWeb.com 42 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 5/22/2010 LearnTheMobileWeb.com 43 Textbook for Mobile Web Development classes (mine and others) Available at Amazon.com for $26.39

44. Mobile Portland Users Group 5/22/2010 LearnTheMobileWeb.com 44 http://mobileportland.com 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 atLearnTheMobileWeb.com Standards-Based Mobile Web Development 5/22/2010 LearnTheMobileWeb.com 45 Thank You!