Being responsive, responsibly

During our design/development cycle, the pages are constantly being refined as we build them, with the goal of finishing the phase with production-ready templates. And as we code our responsive design, we’ve found the philosophy of “mobile first” to be incredibly important.

Throughout the book, we’ve been using the Robot or Not site to demonstrate how a fluid grid, flexible images, and media queries work together to provide a more responsive approach to design. We began by taking our rigid mockup, designed in Photoshop, and converting it into a fluid grid. As we saw in Chapter 4, that caused no end of problems when we started resizing our browser window: our initial design wasn’t intended to scale beyond its original context. So we introduced media queries to address those issues, and to provide alternate small- and wide-screen layouts. And finally, for browsers lacking native support for media queries, we included the respond.js library to provide access to our alternate designs.