Chapter 7. Working with Responsive Designs

The last couple of years have seen a rise in the popularity of an approach to designing websites called responsive design. Coined by Ethan Marcotte, the term refers to websites that respond to the viewport size of your website visitor. You can learn more about responsive design in Marcotte's article at http://alistapart.com/article/responsive-web-design. Whether site visitors are viewing your website on a mobile device, a tablet, a netbook, or a huge desktop screen, the website detects the viewport size and responds by adjusting layouts, font sizes, image sizes, and more to optimize the website for that particular viewport size.

While most of the magic of responsive design happens with media queries and other CSS, JavaScript can help to enhance the experience even further for our website visitors. Some elements and layouts aren't easily adapted to the viewport size with just CSS. JavaScript can fill in and help us take our...