Responsive Web Design, 2nd edition

Responsive Web Design, 2nd edition

English | 2014 | ISBN: 978-1-9375571-8-8 | 160 Pages | PDF, EPUB +video | 113 MB

Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web.
Learn how to think beyond the desktop, and craft designs that respond to your users’ needs. In the second edition, Ethan Marcotte expands on the design principles behind fluid grids, flexible images, and media queries. Through new examples and updated facts and figures, you’ll learn how to deliver a quality experience, no matter how large or small the display.
Discover new tips and tricks for browser support, take a closer look at solutions for serving images, explore the role of progressive enhancement in web design, find better methods for managing bandwidth, and more. Follow along with the new examples and approaches Ethan has assembled, and dive in to his meticulously revised code samples.


In other words, the BBC News team isn’t designing for specific platforms, or even focusing on device classes. Instead, they’re designing for experience tiers:a basic design served to every device; and a more enhanced version, conditionally served to more capable browsers. The result is a responsive design that loads quickly in every HTML-capable device, but then upgrades to a more robust interface—but only if the browser is deemed capable of handling the more enhanced experience (fig 5.19). And this progressive enhancement-driven approach has been the foundation of some of the largest responsive designs, including responsive sites like The Boston Globe and The Guardian.
Stephen Hay reiterated the need for progressive enhancement as well, in his fantastic essay “There is no Mobile Web” (

Let’s drop in four more slides, using the same .figuremarkup pattern as before. I’ve also deleted the .carousel-navelement that housed our previous and next links, as we’ll be adding that dynamically through our JavaScript.
So, yes, this looks a little weird right now, as our slides are currently just stacked on top of each other (fig 5.21). To get our slideshow up and running, we’ll be using a free jQuery plugin designed by Filament Group ( It’s one of the more robust slideshow scripts I’ve used. I like it because it works incredibly well with flexible content; if your slides have different amounts of text or images in them, this plugin handles them with ease—all without resorting to convoluted CSS foofery. (Oh, yes. I said “foofery.” I’m not messing around.)
So to work the carousel script into the page, I’m going to add three new scriptelements to our HTML:

Lazily (but intelligently) loading content
Or at least, it’s a starting point. If we disable JavaScript in the browser, we’re back to where we were before: with a whole mess of slides stacked on top of each other. So for any visitor to our site that doesn’t have JavaScript available to them, the experience quickly becomes decidedly un-great.
So let’s do something about that. In fact, let’s get a bit tricky: we’re going to remove all but one of the slides from the page, and put them in a separate HTML file. So now, our page’s source looks considerably lighter: