Let's take a look at what we've covered up to this point.
We looked at some advantages and disadvantages of using responsive web design. Implementing it badly can result in a slow, underwhelming website that drives users away instead of keeping them clicking and happy.
In Chapter 1, The Good, the Bad, and the Ugly of Responsive Web Design, we talked about what responsive designing is and how it can make a difference to a website's accessibility and content representation. We also discussed why responsive designing came into being and what advantages or features it brought with it. We also saw how it can impact the end users' overall website experience.
In Chapter 2, Tweaking Your Website for Performance, we focused on ways to tweak the overall performance of your website, focusing on where to place resources in the DOM and DOM overloading, and briefly covered preloading. Placing scripts and style sheets in the correct places in your DOM can dramatically improve the overall load time and even user experience. Scripts that change the layout of your site should be placed at the top of the DOM in the
<head> tags. The files that are not critical can easily be placed at the end of the DOM, just before the closing
<body> tag, otherwise they will increase the load time. Scripts at the top—in the
<body> tag, you might display to the user a mangled website that has not been formatted as per your code.
This chapter also briefly delved into content preloading using plugins such as CreateJS. Preloading content is a great way to have your site populated with the important bits before displaying it to the user. Another topic covered was DNS prefetching. This is a useful technique when your website accesses multiple sites that are on different domains. DNS prefetching attempts to resolve domain names before the user follows a link to that domain. If the domain has been resolved, the advantage of this will be that there is effectively no delay due to DNS name resolution.
The web is the master of images. Chapter 3, Managing Images, took this to heart as we focused on managing images on our website. We discussed the importance of choosing the correct format for the image on our website, and how each format differs. Optimizing images is crucial to performance. You will see on most website analyzers that image optimization is one of the main areas when it comes to reducing load time.
This chapter also focused on the usage of Sassy CSS, or SASS, on your site. Even though this is not directly linked to increasing the performance of your site, it does increase your proficiency as a web developer. SASS supports complex functions that CSS simply does not offer. Variables alone make it a worthwhile expedition, for me.
We covered image scaling, explained why it is a bad idea, and suggested what you should do to avoid this.
In Chapter 5, The Fastest HTTP Request is No HTTP Request, we covered HTTP requests, boldly stating that the fastest HTTP request is no HTTP request. We discussed how sprite sheets can help remove unnecessary requests by combining certain images into a sprite sheet and not loading them one by one. Image framing using sprite sheets in
<image> tags instead of background images was also discussed. The frame consists of a container element, a frame element, and the image element. This chapter also covered combining files to help reduce requests. The rest of the chapter focused on server-side optimization.
The next chapter, Chapter 6, Testing, Testing, and Testing, talked only about testing. The more you test, the less you have to fix at the end of your project. You also appear more professional and your clients are more satisfied. We discussed some web tools you can make use of to test the performance of your site. We also took a look at how waterfall charts work and how to use your browser's developer tools.
Chapter 7, Speeding Up Development with Design Concepts, Patterns, and Programs, covered the mobile-first principle and relooked at single-page application frameworks, such as AngularJS, as a solution for your web applications. Learning design concepts to enhance performance was the main purpose of this chapter. We took a look at how the mobile market has grown in recent years and how it has affected our job as web developers.
Chapter 8, Using Tools for Performance, covered tools for your development process. This wasn't directly related to responsive web design, but it was intended to make the road to getting your site up-and-running easier and faster. We looked at tools used to manage our projects and applications, help develop and test our websites, and keep our projects backed up with version control.
Finally, you're here, in Appendix, Taking the Next Steps. There is no road map that can take you to your destination of becoming an amazing web developer. The only thing you can do is read what others have to say. Learn how they approached common problems such as browser restrictions and non-cross-compatible features—the list is quite long. There are a plenty of developers who have made a lot of progress. Here is a list of a few developers whom I find very helpful and whom you should take note of.