Your SlideShare is downloading. ×
0
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
Standards-Based Mobile Web Development
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

Standards-Based Mobile Web Development

16,767

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 …

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
9 Comments
101 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,767
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
9
Likes
101
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 (w3.org and ready.mobi) 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.
  • Transcript

    • 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!

    ×