High Performance Responsive Design

High Performance Responsive Design

by Tom Barker
Released November 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491949986

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

Yes, you can use responsive web design to create high performance, compelling websites. With this practical book, author Tom Barker demonstrates that responsive design is not just a frontend-only approach, but also a philosophy for taking advantage of the entire web stack. Responsive design patterns and anti-patterns, derived from heavily used real-world sites, are guiding principles throughout the book.

Ideal for frontend-focused web developers, this book shows you how to incorporate responsiveness and performance into your project plan, use Node.js for device-specific functionality on the backend, and write automated tests for a continuous integration environment. You’ll explore many useful tools and responsive frameworks, and gain useful insights from Barker’s own experience with responsive design along the way.

  • Get a primer on web performance concepts, web runtime performance, and performance tracking tools
  • Write functionality with Node.js that serves up a device-specific experience to the client
  • Explore client-side solutions, such as lazy loading entire sections of a page—including images, styling, and content
  • Validate service level agreements (SLAs) by writing automated tests with PhantomJS
  • Examine several responsive frameworks, including the author’s server-side framework, Ripple

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Intended Audience
    2. Chapter Descriptions
    3. Notes
    4. Acknowledgments
  2. 1. State of the Industry of Responsive Design
    1. The Problem with Responsive Design
      1. Observations from Competitive Analysis
        1. Anti-patterns
          1. Load the same content for all devices
          2. Load additional assets
          3. Load images at twice the size
        2. Patterns
          1. Load device-appropriate assets
          2. Serve a dedicated experience from the backend
          3. Lazy load dedicated experience from the frontend
      2. How Did We Not Notice This?
      3. How Did We Get Here?
      4. Why Not Use an MDot?
        1. Resource overhead
        2. Segmented source code
        3. Segmented URL
        4. Pointless redirects
      5. This Matters Because of Scale
    2. Summary
  3. 2. Primer on Performance of Web Applications
    1. The Basics of Measuring Performance
      1. What is Web Performance?
        1. Number of HTTP requests
        2. Page payload
        3. Page load time
    2. Tools to Track Web Performance
    3. Web Runtime Performance
      1. Frames per Second
        1. Monitoring FPS in Google Chrome
          1. Frames mode
      2. Memory Profiling
        1. The MemoryInfo Object
        2. The Timeline tool
    4. Summary
  4. 3. Start with a Plan
    1. A Journey Down the Slippery Slope
    2. Project Plans
      1. Assessing and Summarizing the Overall Task
        1. Establishing rough milestones and timelines
        2. Determining a performance service-level agreement
      2. Crafting Rough Milestones and Timelines
      3. List Dependencies and Risks
        1. Crafting timelines
      4. KPIs That Measure Success
      5. Keep to Your Performance SLA
    3. Summary
  5. 4. The Backend
    1. The Web Stack
      1. The Network Stack
      2. The Application Layer
        1. The HTTP Request
        2. The HTTP Response
      3. Charles
    2. Web Application Stack
    3. Responding on the Server Side
      1. Inspecting the User Agent
      2. Device Detection Services
        1. The Wurfl
        2. Sample Code
    4. Implications of Cache
    5. Edge Side Includes
    6. Summary
  6. 5. The Frontend
    1. Working with Images
      1. The srcset attribute
        1. Device Pixel Ratio
      2. The Picture Element
    2. Lazy Loading
      1. Device Detection Libraries
    3. Summary
  7. 6. Continuous Web Performance Testing
    1. Maintaining a Steady Course
    2. Automating Responsive Web Performance Testing
      1. Automated Headless Browser Testing
        1. Evaluate experiential resource loading
        2. Validate web performance
    3. Continuous Integration
      1. An Example PhantomJS Script
      2. Jenkins
    4. Summary
  8. 7. Frameworks
    1. Looking at the State of Responsive Frameworks
    2. Twitter Bootstrap
      1. Evaluation
    3. ZURB Foundation
    4. Skeleton
      1. Evaluation
    5. Semantic UI
      1. Evaluation
    6. A Comparison of Frontend Frameworks
    7. Ripple
    8. Summary
  9. A. About the Author
  10. B. High Performance Responsive Design
  11. Index
  12. About the Author
  13. Copyright

Product information

  • Title: High Performance Responsive Design
  • Author(s): Tom Barker
  • Release date: November 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491949986