Responsive Web Toolkit

Est. Reading Time: 4 minutes

I have been getting familiar with responsive web design over recent weeks and have put together a list of resources I have found helpful when both developing and testing responsive layouts.


I recommend the HTML5 BoilerPlate  as a starting point.  Now in version 3, the H5BP sets the stage for a responsive site by providing media queries, JS resources, and utilizes optimization techniques.

Here is an excellent video presentation by Paul Irish, one of the developers behind H5BP.



I have mentioned this small program in a previous blog, but found use for it worth mentioning.  Once installed and running, you can right-click the bottom-right hand corner of a window and set pre-configured window dimensions.  This has come in handy when re-sizing the browser to common device dimensions. (I use 320, 480, 768, 980)  You can configure these through the task tray icon.

Sizer Sizer


Keynote MITE (Mobile Internet Testing Environment)

Keynote offers a free mobile testing suite armed to the teeth with different platforms and devices.  Android phones, iPhones , BlackBerry, the works! (See screenshot below.)  Account registration is required to open the application.  Keynote also offers a “Pro” version that includes:

  • Advanced test automation
  • Unlimited over-the-air testing from your desktop
  • Remote testing from anywhere in the world
  • Technical help from the Keynote Diagnostics Support team


Media Query Reporter

Using pure CSS, you can make an on-page reporter for media queries that lets you know which media query is active.  I first found this on Tuts+ however, you can easily setup your own.  Keana showed me earlier this week that she was doing this simply by assigning a different background color for each screen size.  The CSS below is the one offered over at Tuts+

/* ======================================

    MediaQuery-Reporter Styles
========================================= */
body:after {
    content: "less than 320px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 60px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
@media only screenand (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
@media only screenand (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
@media only screenand (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
@media only screenand (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);

Fluid Grid and Mockup Overlays

These are two small scripts that are useful for developing responsive web layouts.  These are for development and testing purposes only and should not be included on a live site.
 The mockup overlay can be used much like PixelPerfect in Firefox.  The advantage of this is that it stays centered on the page as opposed to requiring the user to drag and line up an image.  Just replace the images files and embed the script in a document head for effect.
  • The “D” key will toggle the overlay on and off.
  • Up and down arrow keys will change opacity.
  • Left and right arrow keys will cycle through the mockups (Different for each screen size.)

Demo »

The grid overlay simply takes user input for column count, width, and gutter width to overlay a grid to the page.  Press “O” to toggle the overlay.  You can prevent the prompt from asking for values by entering the values manually in the JS file.

Demo »