Table of Contents

Part I: Foundations of Responsive Design

  1. What is Responsive Design
    • Just the Basics
    • A Short History
    • Why Responsive Design
    • Summary
  2. Responsive Content
    • Content Strategy
    • Managing Content
    • Developing Content
    • Content Parity
    • Content Governance
    • Adaptive Content
    • Summary

Part II: Creating Responsive Websites

  1. HTML for Responsive Sites
    • Working with HTML
    • Basic Page Structure
    • Viewport
    • Structural Elements
    • Creating a Page
    • Clean and Semantic HTML
    • Summary
  2. CSS for Responsive Sites
    • How CSS Works
    • Versions of CSS
    • Where CSS Goes
    • The Cascade
    • Using the Cascade
    • Comments
    • Organizing Your Stylesheet
    • The Box Model
    • display
    • Positioning
    • float and clear
    • Basic Styles
    • Summary
  3. Media Queries
    • What’s a Media Query?
    • Media Query Structure
    • Using Media Queries in Stylesheet Links
    • Other Ways to Use Media Queries
    • What We Can Query
    • Browser Support
    • Breakpoints
    • Design Ranges
    • Designing Responsively
    • Using Media Queries
    • Two-Column Layout
    • Setting a Maximum Width
    • How to Choose Breakpoints
    • Summary
  4. Images
    • Ways to Display Images
    • Alt Text
    • Image File Formats
    • Optimizing Images
    • Content Images
    • Background Images
    • Responsive Images
    • Summary

Part III: Working Responsively

  1. Responsive Workflow
    • Strategy and Planning
    • Content Before Layout
    • Thinking About Layout
    • Prototypes
    • Visual Design
    • Responsive Design Tools
    • Selling Responsive Design
    • Working with Clients
    • Summary
  2. Mobile & Beyond
    • User Experience
    • Device-Agnostic Design
    • Focusing on Mobile First
    • Do What You Can
    • Types of Devices
    • Touch
    • Screen Size
    • Accessibility (Universal Design)
    • Deciding Which Devices to Support
    • Why Use Real Devices for Testing
    • Testing
    • Summary

Part IV: Designing Responsive Websites

  1. Typography
    • Start with HTML
    • Typefaces
    • Using Fonts
    • Sizing Text
    • Line Length
    • Whitespace
    • Margins and Padding
    • Changing Typeface for Screen Size
    • Summary
  2. Navigation & Header Layout
    • Responsive Navigation
    • Branding
    • Navigation Links
    • Navigation Patterns
    • Header
    • Summary
  3. Performance
    • Why Performance Matters
    • Performance as Design
    • How Web Pages Are Loaded and Rendered
    • Measuring Performance
    • Cleaning Up Your Code
    • Minimizing HTTP Requests
    • Server Stuff
    • JavaScript
    • CSS
    • Hosting
    • Conditionally Loading Content
    • Reflows and Repaints
    • RESS
    • Summary