O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive Design High Performance

Book Description

Leverage the power of responsive design to fine-tune your website's performance and increase its speed

In Detail

Creating a speedy, user-friendly, and uniform experience across different devices has been a challenge with responsive design. 72 percent of responsive websites deliver the same volume of bytes irrespective of the device or screen size, which makes it difficult for sites to load on slow websites.

We will start with an overview of all of the workable aspects of responsive design, and then we will quickly focus on practical things that we can start doing without much effort to get our site performing better than ever before on different types of devices. We will then get into one of the most important aspects of websites: managing images. Since we need our images to display nicely and also load quickly across all devices such as computer, mobile, tablet, and so on, we will look at ways to do so in this book.

What You Will Learn

  • Develop good habits when placing DOM elements, resources, and become familiar with DNS-Prefetching
  • Understand how images affect your site's performance and learn the limitations
  • Get to grips with style sheets, media queries, and viewports
  • Take control of HTTP requests and learn how to keep them to a minimum
  • Understand the origin of responsive design
  • Improve your development time by learning about new tools
  • Discover some in-browser developer tools and learn how they help gauge performance

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Responsive Design High Performance
    1. Table of Contents
    2. Responsive Design High Performance
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What is responsive design, anyway?
        1. Adaptive Layout
        2. Responsive Layout
      2. What this book covers
      3. What you need for this book
      4. Who this book is for
      5. Conventions
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. The Good, the Bad, and the Ugly of Responsive Web Design
      1. The good – appearance and management
        1. Appearance
        2. Management
      2. The bad – slow load times and unresponsive interactions
        1. Slow load times
        2. Browser requests
        3. Unresponsive interactions
      3. The ugly – the effects of slow performance
        1. Effects on the end user
        2. Effects on business
      4. Summary
    9. 2. Tweaking Your Website for Performance
      1. Resource placement on the DOM
        1. Scripts with $(document).ready()
        2. Scripts that change the layout
        3. The welcome section
        4. The information section
        5. The about section
      2. Adjusting the sections
        1. Improving the output
      3. DNS prefetching
        1. The purpose of DNS prefetching
      4. Too many DOM Elements
      5. Summary
    10. 3. Managing Images
      1. Choosing the correct image format
      2. Optimizing images
        1. Progressive images
        2. Adaptive images
      3. Conditional loading
      4. One-to-many DOM elements
      5. Specifying sizes and media queries and introducing sprite sheets
      6. Caching
      7. Scaling
      8. Retina displays
      9. Summary
    11. 4. Learning Content Management
      1. Style sheets, media queries, and viewports
      2. Sassy CSS, SASS, and LESS
        1. CSS
        2. SCSS
        3. SASS
        4. LESS
      3. Background images and media queries
      4. Using JavaScript to ease the load
        1. AngularJS
      5. Conditional content management
      6. The server side with PHP
      7. Parallel downloads
      8. Content Delivery Networks
      9. Fonts
      10. Summary
    12. 5. The Fastest HTTP Request is No HTTP Request
      1. Reducing the number of requests
        1. Sprite sheets
        2. So, what is image framing?
      2. Combining files
      3. Server-side optimization with Apache
      4. Compression
      5. ETags
      6. Expires headers
      7. File concatenation
      8. AppCache
      9. Summary
    13. 6. Testing, Testing, and Testing!
      1. Beginning your testing adventure
        1. Step 1 – planning
        2. Step 2 – testing
        3. Step 3 – assessing results
        4. Step 4 – tracking bugs
      2. Back to the responsive stuff
      3. Summary
    14. 7. Speeding Up Development with Design Concepts, Patterns, and Programs
      1. Design concepts
        1. Graceful degradation and progressive enhancement
        2. Object-oriented CSS (OOCSS)
          1. Separating structure from styling
          2. Separating the containers and the content
          3. OOCSS and SASS/SCSS (even LESS)
        3. Patterns and templates
          1. Media query templates
        4. Plugins and software
          1. Grunt
          2. package.json
          3. Gruntfile.js
          4. RequireJS
      2. Summary
    15. 8. Using Tools for Performance
      1. Planning
      2. Developing
        1. CodeKit
        2. Prepros
      3. Managing code changes
      4. Summary
    16. A. Taking the Next Steps
      1. An overview of what we've covered so far
      2. A few references for further reading
        1. Ethan Marcotte
        2. Paul Irish
        3. Brad Frost
        4. Ask the people who know
      3. Summary
    17. Index