book

The Uncertain Web

by Rob Larsen

December 2014

Intermediate to advanced

258 pages

6h 14m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Word on the Web TodayWho Should Read This BookNavigating This BookOnline ResourcesConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
Embrace UncertaintyFrom Microsoft’s Monoculture to Today’s Healthy ChaosWhere We Are Right NowBrowsersThe Open Web PlatformWeb standards, Flash, and the rebirth of the Open Web PlatformThe WHATWGAjaxTracking the Open Web Platform todayConnection Speeds and QualityThe Human–Computer InterfaceScreen Resolution and OrientationPixel DensityWhat’s 2% Anyway?This Is What We Wanted
Don’t Blame the Web for Being the WebIdentify and Embrace Your AudienceTest and Pray for the BestFocus on Optimal, Not Absolute SolutionsEmbrace AccessibilityProvide Text Alternatives for All Non-Text ContentEnsure Information and Structure Can Be Separated from PresentationMake All Functionality Operable via a Keyboard InterfaceContent Can Be Paused by the User Unless the Timing or Movement Is Part of an Activity Where Timing or Movement Is EssentialProvide Mechanisms to Help Users Find Content, Orient Themselves Within It, and Navigate Through ItHelp Users Avoid Mistakes and Make It Easy to Correct MistakesSupport Compatibility with Current and Future User Agents (Including Assistive Technologies)Don’t Stop ThereLose Your Technology BiasesThe iPhone Is the Only Mobile ExperienceClosed. Won’t Fix. Can’t Reproduce.Contrary to Popular Opinion, Internet Explorer Does ExistEmbrace EmpathyLose Your Stack BiasesjQueryMVWhateverKeep at Least One Eye on the Cutting EdgeSpread Your Wings (and Question Your Assumptions)
Feature DetectionLooking at a More Complicated Feature DetectionUsing ModernizrOld IE: The One Thing Modernizr Does ModernizeUsing (and Not Using) ModernizrFeature Detection with ModernizrCustomizing ModernizrUsing Modernizr’s TestsCross Browser PolyfillsAdditional Modernizr MethodsModernizr.prefixed()Modernizr.mq()Managing the UndetectablesYou can browser sniffYou can limit your use of these features to safe implementationsDesign robust systems that work in many different configurationsForgo the feature entirelyCommon Feature Tests and Associated PolyfillsModernizr.touchModernizr.inputModernizr.csstransitions, Modernizr.csstransforms3d, and Modernizr.csstransformsModernizr.inputtypesModernizr.canvas and Modernizr.svgModernizr.fontfaceModernizr.video“Frontend Development Done Right”
Boston Globe’s RWD RedesignReally? RWD for Every Site?Mobile First, RESS, and the Rest of the Mobile Development UniverseDedicated Mobile ExperienceMobile FirstProgressive EnhancementRESSChoosing a Development PathThe Size and Skills of Your TeamThe Requirements of Your Site or ApplicationYour DemographicsYour BudgetBenefits of RWDSimplified server sideEasier maintenanceLower overall application complexityOne entry point for search enginesSupport for future and unknown devicesDownsides of RWDPerformanceLimited application flexibilityBenefits of a Dedicated Mobile ExperiencePerformance optimized for specific devicesHeightened application flexibilityDownsides of a Dedicated Mobile ExperienceMore complexity on the server sideTougher maintenanceNot as good for search enginesLink managementYou can miss detection of new and unknown devicesDetection schemes that use the user agent string can be spoofedIf Facebook Jumped Off a Bridge, Would You Jump Off a Bridge, Too? Or: What Do the Biggest Sites in the United States Do?Choose the Architecture That Makes Sense for Your ProjectFrontend developers and small teamsContent sitesApplicationsBig teams and big budgetsRedirects Should Resolve LogicallyRedirect OptionsSimple RedirectionOptions for More Complicated QueriesAlways Offer an Escape from the Mobile VersionBe Fluid and Design for Your DesignFeel Free to Abuse Minor BreakpointsOn Relative Units“Accepting the Ebb and Flow of Things”
The State of User Input on the WebThe Conceptual Problem with “Touch” DetectionThe Technical Problem with “Touch” DetectionUsing touch APIs to detect “touch” is faultySmall screen might not be touch—large screen might beThe future isn’t here yetWhat It Means to Get It WrongYou Can Fail CompletelyYou Can Fail Just a LittleDesign for a Spectrum of Potential User InputsLean Toward Finger-Friendly Interfaces for All InterfacesDon’t Rely on HoverEmbrace ClarityWorking with the Full User Input SpectrumThe Current State of Touch and Mouse Event HandlingYou don’t have to do anything newOne major catch: There’s a 300ms delay on compatibility click eventsWorking with the *move eventsPointer events: One event model for mouse, touch, and moreAssume Nothing and Accommodate Everyone
While We Weren’t Paying Attention, Images Got ComplicatedWe Want to Serve the Smallest Possible File SizeWe Need to Take Advantage of the Browser PreloaderWe Want to Serve Correctly Sized Images to Multiple ResolutionsWe Need to Serve the Correct Image for Multiple Pixel Ratio DevicesWe Want to Choose Different Sizes/Images at Different BreakpointsWe Want to Use Design BreakpointsServing the Correct FormatImages Are Easy, and They Should Stay EasyOptimizing Images for the WebJPEGProgressive JPEGsGIFPNGSVGWebPChoosing the Right File FormatLook for a CDN SolutionResponsive ImagesThe Option of Doing Nothing (or Nothing New, at Least)srcsetpicturePicturefill, the picture PolyfillEmbrace SVGOn the Server SideA Practical Developers Guide to All of This ComplexityIdentify How Important Images Are to Your SiteGet the Basics RightUse the Simplest Possible SolutionLearn to Love SVGTest!Conclusion
The Core TechnologyThe HTML video ElementThe Flash FallbackContainers and CodecsVideo.jsMime Types and Adaptive Bitrate StreamingMime typesProgressive download versus streaming and a performance dead-end for most mortalsLetting the Pros Handle ItYouTubeVimeoMake the Best of a Complicated Situation
Things Can Get Better (But They Do Occasionally Get Worse)Firefox Announced Support for h.264Picture Comes Back from the DeadPointer Events Might Be DeadI Knew Something Like This Would HappenLet’s Push Things ForwardA Web Built By Developers, Browser Vendors, and Standards BodiesA Web That Is Fast, Widely Available, and ReliableA Web Where There’s Nothing to WinThe Web We Want Starts with Us

Overview

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: