You are previewing Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, Second Edition.
O'Reilly logo
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, Second Edition

Book Description

Building an elegant, functional website requires more than just knowing how to code. In Adaptive Web Design, Second Edition, you’ll learn how to use progressive enhancement to build websites that work anywhere, won’t break, are accessible by anyone—on any device—and are designed to work well into the future.

This new edition of Adaptive Web Design frames even more of the web design process in the lens of progressive enhancement. You will learn how content strategy, UX, HTML, CSS, responsive web design, JavaScript, server-side programming, and performance optimization all come together in the service of users on whatever device they happen to use to access the web.

Understanding progressive enhancement will make you a better web professional, whether you’re a content strategist, information architect, UX designer, visual designer, front-end developer, back-end developer, or project manager. It will enable you to visualize experience as a continuum and craft interfaces that are capable of reaching more users while simultaneously costing less money to develop. When you’ve mastered the tenets and concepts of this book, you will see the web in a whole new way and gain web design superpowers that will make you invaluable to your employer, clients, and the web as a whole. Visit to learn more.

Table of Contents

  1. Title Page
  2. Copyright Page
  3. Dedication Page
  4. Acknowledgments
  5. About the Author
  6. Contents
  7. Foreword
  8. Introduction
  9. Chapter 1. Designing Experiences for People
    1. Smart Code, Dumb Phones
    2. When the Web Was Young
    3. Technology vs. Experience
      1. Lessons Learned at the Bleeding Edge
    4. You Can’t Please Everyone
    5. Support the Past, Optimize for the Future
      1. Maintaining Your Sanity
    6. Serving More for Less
    7. Universal Accessibility
    8. Thinking in Layers
    9. This Is a Philosophy
  10. Chapter 2. Content Is the Foundation
    1. Avoid Zombie Copy
    2. Design Meaningful Content
    3. Craft the Conversation
      1. Prepare for Problems
    4. Plan for the Unknown
    5. Write for Real People
    6. Consider Content Beyond Copy
      1. Conduct a Cost-Benefit Analysis
      2. Avoid Trapping Content
    7. Keep Data Entry Conversational
    8. Don’t Fill Space
    9. Let Content Lead the Way
  11. Chapter 3. Markup Is an Enhancement
    1. Learn from the Past
    2. Illuminate Your Content
    3. Mean What You Say
      1. Avoid Introducing Fragility
    4. Embrace Classification and Identification
      1. Use Microformats to Empower Tools
      2. Take It Further with RDFa and Microdata
    5. Make Deliberate Markup Choices
      1. Honor the Outline
      2. Be Intentional with Source Order
      3. Avoid Unnecessary Markup
    6. Clarify Interfaces with ARIA
    7. Understand Fault Tolerance
    8. Markup Conveys Meaning
  12. Chapter 4. Visual Design Is an Enhancement
    1. Design Systems, Not Pages
      1. Conduct a Design Audit
      2. Explore Visual Language with Style Tiles
      3. Create a Style Guide or a Pattern Library
    2. Don’t Design Yourself Into a Corner
      1. Design the Conversation
      2. Find the Edges
    3. Understand How CSS Works
      1. Proximity Is Powerful
      2. Specificity Trumps Proximity
      3. Errors Create Opportunity
      4. Example: Progressive Navigation
    4. Start Small and Be Responsive
      1. Support Everyone, Optimize for Some
      2. Example: Growing a Layout
      3. Embrace Fluidity
    5. Focus on Standards
    6. Design Defensively
      1. Be Conservative in How You Apply Styles
    7. Hide Content Responsibly
      1. Techniques to Avoid
      2. Techniques to Use Sparingly
      3. The Best Way to Go
    8. The Flip Side: Generated Content
    9. Consider the Experience with Alternate Media and Inputs
      1. Design the Printed Page
      2. Embrace Alternative Interactions
      3. Think Bigger
    10. Embrace Default Styles
      1. Altered Aesthetics
      2. That OS Look and Feel
    11. Embrace the Continuum
  13. Chapter 5. Interaction Is an Enhancement
    1. Get Familiar with Potential Issues So You Can Avoid Them
      1. Understand Your Medium
      2. Why No JavaScript?
    2. Design a Baseline
    3. Program Defensively
      1. Look Before You Act
      2. Test for Feature Support
      3. Make Sure Libraries Are There
    4. Establish Minimum Requirements for Enhancement
    5. Cut Your Losses
    6. Build What You Need
    7. Describe What’s Going On
    8. Write Code That Takes Declarative Instruction
    9. Adapt the Interface
      1. Consider Alternatives
    10. Apply No Styles Before Their Time
      1. Plant a Flag
      2. Capitalize on ARIA
    11. Enhance on Demand
    12. Look Beyond the Mouse
      1. Empower the Keyboard
      2. Enhance for Touch
    13. Don’t Depend on the Network
      1. Store Things on the Client
      2. Taking Offline Further
    14. Wield Your Power Wisely
  14. Chapter 6. Crafting a Continuum
    1. Map the Experience
      1. The Benefits of Ix Maps
      2. Example: Lazy Loading Images
      3. Example: Tabbed Interface
    2. Learn From the Past, Look to the Future
      1. Mobile Is the New Dial-Up
      2. Small Is Big Again
      3. Text-Only Is Back in a Big Way
    3. Be Ready for Anything
  15. Progressive Enhancement Checklist
    1. Content
    2. Markup
    3. Design
    4. Interaction
  16. Further Reading
    1. Understanding the Web
    2. User Experience
    3. Web Design Process
    4. Content
    5. Semantics and HTML
    6. Visual Design and CSS
    7. Interaction and JavaScript
    8. Accessibility
    9. Testing and Analytics
  17. Index
  18. Code Snippets