Part I: Foundations of Responsive Design
- What is Responsive Design
- Just the Basics
- A Short History
- Why Responsive Design
- Summary
- Responsive Content
- Content Strategy
- Managing Content
- Developing Content
- Content Parity
- Content Governance
- Adaptive Content
- Summary
Part II: Creating Responsive Websites
- HTML for Responsive Sites
- Working with HTML
- Basic Page Structure
- Viewport
- Structural Elements
- Creating a Page
- Clean and Semantic HTML
- Summary
- 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
- 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
- Images
- Ways to Display Images
- Alt Text
- Image File Formats
- Optimizing Images
- Content Images
- Background Images
- Responsive Images
- Summary
Part III: Working Responsively
- Responsive Workflow
- Strategy and Planning
- Content Before Layout
- Thinking About Layout
- Prototypes
- Visual Design
- Responsive Design Tools
- Selling Responsive Design
- Working with Clients
- Summary
- 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
- Typography
- Start with HTML
- Typefaces
- Using Fonts
- Sizing Text
- Line Length
- Whitespace
- Margins and Padding
- Changing Typeface for Screen Size
- Summary
- Navigation & Header Layout
- Responsive Navigation
- Branding
- Navigation Links
- Navigation Patterns
- Header
- Summary
- 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