Summary

In this chapter, we covered the core concepts of responsive web design that will allow you to make your sites look good on any device. You learned that fluid grids and flexible images are the first steps to get a site to fit all screen sizes. We now understand how media queries can make sure the site looks good at narrower widths. We also created a mobile menu, using jQuery to trigger the menu on a click. Finally, we tested our design on Chrome's mobile device simulator and learned how to use the viewport meta tag to ensure our site is responsive on mobile devices. I strongly urge you, when employing these techniques yourselves, to consider the mobile experience from the very beginning, especially in the design process. In the next chapter, we will discuss web fonts.