What this book covers
Chapter 1, The Good, the Bad, and the Ugly of Responsive Web Design, covers what responsive design is and, more importantly, why it's so important on the Web today.
Responsive web design helps us create a more uniform appearance across an array of devices. It leaves users feeling more familiar with a brand, regardless of the device they're using to interact with it. Code is kept together in one place, and this negates the need to maintain multiple pages or documents for one website.
Chapter 2, Tweaking Your Website for Performance, describes the importance of resource placement on the DOM. It's true that placing scripts at the bottom of the page improves performance, but it's also true that some scripts need to load before the DOM renders.
Preloading content can be greatly helpful in improving the initial load of your site. DNS prefetching is a very helpful piece of code that can resolve the DNS name in the background for the site that your page might point to. Search engines can greatly benefit from this.
Chapter 3, Managing Images, proves that managing images is no small feat in a website. Almost all modern websites rely heavily on images to present content to the users.
This chapter explains which image formats to use and when, and also how to optimize your images for websites. We discuss the difference between progressive and optimized images. Conditional loading can greatly help us load our site faster, and we discuss how to use conditional loading to improve our site's performance. We touch on server-side optimization using caches, ETags, and media queries for retina displays.
Chapter 4, Learning Content Management, takes your development in the right direction. We take a look at style sheets, media queries, and how to work with viewports. This chapter also covers the use of CSS preprocessors such as SASSY CSS, SASS, and LESS. Though these are not covered in detail, this serves as an introduction to help you get started. CSS preprocessors are an excellent way to code your style sheets; once you have the hang of it, you can eliminate lines of unnecessary code.
The Web is slowly but surely moving towards an app-like experience, and frameworks such as AngluarJS are right at the forefront of this movement.
This chapter also covers conditional content management with the <link> tag to load style sheets based on device size requirements.
Optimization doesn't just occur on the client side, but sometimes on the server side as well, to help deliver correct content before it reaches the client. This is an effective way to manage content.
Parallel downloads are briefly covered. We discuss the fact that the time that the client spends waiting for requests to finish is referred to as blocking, and that our goal should be to reduce blocking as much as possible to achieve shorter load times.
We also cover another excellent way to deliver your sites quickly: by making use of content delivery networks. Then we discuss fonts and how they can affect a website's performance.
Chapter 5, The Fastest HTTP Request is No HTTP Request, proves that one of the best ways to improve the load time of your website is by reducing requests. We look at some effective and easy-to-implement techniques to help you achieve speedy load times. We discuss sprite sheets and how they can take a bunch of requests and turn it into one request. We also provide information about combining files.
Server-side optimization is also a great place to make some improvements. We talk more about server-side optimization and also take a look at AppCache, which is another excellent method to improve your site's performance.
Chapter 6, Testing, Testing, and Testing, asserts that testing is a crucial stage of the development life cycle. It's where you can not only identify problems with your site but also root out performance issues.
Chapter 7, Speeding Up Development with Design Concepts, Patterns, and Programs, focuses on a few ways to improve your site. We kick off by looking at design concepts: graceful degradation, and progressive enhancement. We discuss the differences between these two concepts and how a better user experience can be achieved on a website by making use of progressive enhancement rather than graceful degradation.
Making use of object-oriented CSS (OOCSS) can be a great benefit to your website's maintainability and can improve its loading speed. By following OOCSS, you can reduce the size of your CSS files, thereby improving the download time of the resources required to load your site. We also take a look at how we can improve OOCSS even further by combing it with a CSS preprocessor such as SASS.
There is a brief mention of available patterns to get you started with your project.
Programs such as GruntJS and RequireJS can make you more productive and improve your website's performance. We describe them as well.
Chapter 8, Using Tools for Performance, is basically an introduction. It is intended to point out available applications that you can use to make your development cycle more efficient.
Once we're almost done, we take a look at some resources to take what we've talked about to the next level. We mention some great developers who have made significant contributions to the web field and give you some excellent starting points to further your knowledge of responsive web design.
Appendix, Taking the Next Steps, contains an overview of the entire book. It summarizes what we talked about and helps you understand the next steps to becoming a great, responsive web developer.
