Standards-Based Mobile Web Development

  • 16,348 views
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

Views

Total Views
16,348
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

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