The Uncertain Web

Book description

What’s the best way to develop for a Web gone wild? That’s easy. Simply scrap the rules you’ve relied on all these years and embrace uncertainty as a core tenet of design. In this practical book, veteran developer Rob Larsen outlines the principles out what he calls The Uncertain Web, and shows you techniques necessary to successfully make the transition.

By combining web standards, progressive enhancement, an iterative approach to design and development, and a desire to question the status quo, your team can create sites and applications that will perform well in a wide range of present and future devices. This guide points the way.

Topics include:

  • Navigating thousands of browser/device/OS combinations
  • Focusing on optimal, not absolute solutions
  • Feature detection, Modernizr, and polyfills
  • RWD, mobile first, and progressive enhancement
  • UIs that work with multiple user input modes
  • Image optimization, SVG, and server-side options
  • The horribly complex world of web video
  • The Web we want to see in the future

Table of contents

  1. Preface
    1. A Word on the Web Today
    2. Who Should Read This Book
    3. Navigating This Book
    4. Online Resources
    5. Conventions Used in This Book
    6. Using Code Examples
    7. Safari® Books Online
    8. How to Contact Us
    9. Acknowledgments
  2. 1. Embracing Uncertainty
    1. Embrace Uncertainty
    2. From Microsoft’s Monoculture to Today’s Healthy Chaos
    3. Where We Are Right Now
      1. Browsers
      2. The Open Web Platform
        1. Web standards, Flash, and the rebirth of the Open Web Platform
        2. The WHATWG
        3. Ajax
        4. Tracking the Open Web Platform today
      3. Connection Speeds and Quality
      4. The Human–Computer Interface
      5. Screen Resolution and Orientation
      6. Pixel Density
      7. What’s 2% Anyway?
      8. This Is What We Wanted
  3. 2. Navigating the Uncertain Web
    1. Don’t Blame the Web for Being the Web
    2. Identify and Embrace Your Audience
    3. Test and Pray for the Best
    4. Focus on Optimal, Not Absolute Solutions
    5. Embrace Accessibility
      1. Provide Text Alternatives for All Non-Text Content
      2. Ensure Information and Structure Can Be Separated from Presentation
      3. Make All Functionality Operable via a Keyboard Interface
      4. Content Can Be Paused by the User Unless the Timing or Movement Is Part of an Activity Where Timing or Movement Is Essential
      5. Provide Mechanisms to Help Users Find Content, Orient Themselves Within It, and Navigate Through It
      6. Help Users Avoid Mistakes and Make It Easy to Correct Mistakes
      7. Support Compatibility with Current and Future User Agents (Including Assistive Technologies)
      8. Don’t Stop There
    6. Lose Your Technology Biases
      1. The iPhone Is the Only Mobile Experience
      2. Closed. Won’t Fix. Can’t Reproduce.
      3. Contrary to Popular Opinion, Internet Explorer Does Exist
      4. Embrace Empathy
    7. Lose Your Stack Biases
      1. jQuery
      2. MVWhatever
    8. Keep at Least One Eye on the Cutting Edge
    9. Spread Your Wings (and Question Your Assumptions)
  4. 3. Lay a Foundation for the Future with Feature Detection and Polyfills
    1. Feature Detection
      1. Looking at a More Complicated Feature Detection
    2. Using Modernizr
      1. Old IE: The One Thing Modernizr Does Modernize
      2. Using (and Not Using) Modernizr
      3. Feature Detection with Modernizr
      4. Customizing Modernizr
      5. Using Modernizr’s Tests
      6. Cross Browser Polyfills
      7. Additional Modernizr Methods
        1. Modernizr.prefixed()
        2. Modernizr.mq()
      8. Managing the Undetectables
        1. You can browser sniff
        2. You can limit your use of these features to safe implementations
        3. Design robust systems that work in many different configurations
        4. Forgo the feature entirely
      9. Common Feature Tests and Associated Polyfills
        1. Modernizr.touch
        2. Modernizr.input
        3. Modernizr.csstransitions, Modernizr.csstransforms3d, and Modernizr.csstransforms
        4. Modernizr.inputtypes
        5. Modernizr.canvas and Modernizr.svg
        6. Modernizr.fontface
        7. Modernizr.video
    3. “Frontend Development Done Right”
  5. 4. Selecting Responsive Design or Another Mobile Experience
    1. Boston Globe’s RWD Redesign
    2. Really? RWD for Every Site?
    3. Mobile First, RESS, and the Rest of the Mobile Development Universe
      1. Dedicated Mobile Experience
      2. Mobile First
      3. Progressive Enhancement
      4. RESS
    4. Choosing a Development Path
      1. The Size and Skills of Your Team
      2. The Requirements of Your Site or Application
      3. Your Demographics
      4. Your Budget
      5. Benefits of RWD
        1. Simplified server side
        2. Easier maintenance
        3. Lower overall application complexity
        4. One entry point for search engines
        5. Support for future and unknown devices
      6. Downsides of RWD
        1. Performance
        2. Limited application flexibility
      7. Benefits of a Dedicated Mobile Experience
        1. Performance optimized for specific devices
        2. Heightened application flexibility
      8. Downsides of a Dedicated Mobile Experience
        1. More complexity on the server side
        2. Tougher maintenance
        3. Not as good for search engines
        4. Link management
        5. You can miss detection of new and unknown devices
        6. Detection schemes that use the user agent string can be spoofed
      9. If Facebook Jumped Off a Bridge, Would You Jump Off a Bridge, Too? Or: What Do the Biggest Sites in the United States Do?
      10. Choose the Architecture That Makes Sense for Your Project
        1. Frontend developers and small teams
        2. Content sites
        3. Applications
        4. Big teams and big budgets
    5. Redirects Should Resolve Logically
    6. Redirect Options
      1. Simple Redirection
      2. Options for More Complicated Queries
    7. Always Offer an Escape from the Mobile Version
    8. Be Fluid and Design for Your Design
      1. Feel Free to Abuse Minor Breakpoints
      2. On Relative Units
    9. “Accepting the Ebb and Flow of Things”
  6. 5. Working with User Input
    1. The State of User Input on the Web
      1. The Conceptual Problem with “Touch” Detection
      2. The Technical Problem with “Touch” Detection
        1. Using touch APIs to detect “touch” is faulty
        2. Small screen might not be touch—large screen might be
        3. The future isn’t here yet
    2. What It Means to Get It Wrong
      1. You Can Fail Completely
      2. You Can Fail Just a Little
    3. Design for a Spectrum of Potential User Inputs
      1. Lean Toward Finger-Friendly Interfaces for All Interfaces
      2. Don’t Rely on Hover
      3. Embrace Clarity
    4. Working with the Full User Input Spectrum
      1. The Current State of Touch and Mouse Event Handling
        1. You don’t have to do anything new
        2. One major catch: There’s a 300ms delay on compatibility click events
        3. Working with the *move events
        4. Pointer events: One event model for mouse, touch, and more
    5. Assume Nothing and Accommodate Everyone
  7. 6. The Surprisingly Complex World of Images on the Web
    1. While We Weren’t Paying Attention, Images Got Complicated
      1. We Want to Serve the Smallest Possible File Size
      2. We Need to Take Advantage of the Browser Preloader
      3. We Want to Serve Correctly Sized Images to Multiple Resolutions
      4. We Need to Serve the Correct Image for Multiple Pixel Ratio Devices
      5. We Want to Choose Different Sizes/Images at Different Breakpoints
      6. We Want to Use Design Breakpoints
      7. Serving the Correct Format
      8. Images Are Easy, and They Should Stay Easy
    2. Optimizing Images for the Web
      1. JPEG
        1. Progressive JPEGs
        2. GIF
        3. PNG
        4. SVG
        5. WebP
      2. Choosing the Right File Format
      3. Look for a CDN Solution
    3. Responsive Images
      1. The Option of Doing Nothing (or Nothing New, at Least)
      2. srcset
      3. picture
      4. Picturefill, the picture Polyfill
    4. Embrace SVG
    5. On the Server Side
    6. A Practical Developers Guide to All of This Complexity
      1. Identify How Important Images Are to Your Site
      2. Get the Basics Right
      3. Use the Simplest Possible Solution
      4. Learn to Love SVG
      5. Test!
    7. Conclusion
  8. 7. The Horribly Complex World of Web Video
    1. The Core Technology
      1. The HTML video Element
      2. The Flash Fallback
      3. Containers and Codecs
      4. Video.js
      5. Mime Types and Adaptive Bitrate Streaming
        1. Mime types
        2. Progressive download versus streaming and a performance dead-end for most mortals
    2. Letting the Pros Handle It
      1. YouTube
      2. Vimeo
    3. Make the Best of a Complicated Situation
  9. 8. The Web We Want
    1. Things Can Get Better (But They Do Occasionally Get Worse)
      1. Firefox Announced Support for h.264
      2. Picture Comes Back from the Dead
      3. Pointer Events Might Be Dead
      4. I Knew Something Like This Would Happen
    2. Let’s Push Things Forward
      1. A Web Built By Developers, Browser Vendors, and Standards Bodies
      2. A Web That Is Fast, Widely Available, and Reliable
      3. A Web Where There’s Nothing to Win
    3. The Web We Want Starts with Us
  10. Index
  11. Colophon
  12. Copyright

Product information

  • Title: The Uncertain Web
  • Author(s): Rob Larsen
  • Release date: December 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491945865