A little responsive web design resource

It's sometimes handy just to have a graphic reminder of screen sizes when developing flexible layouts. Here's one I made earlier.

Olympic Media query guide

Nothing major and I'm sure everyone has their own way of working but I'm testing a prototype build against several media query / layout breakpoints and rather than having a bookmarklet that disappears every time I refresh a page I've opted for a body background image guide.

I've seen similar before and it's a useful guide which I'm just throwing out there with several common resolutions and rulers set up in the png.

How to add it to your test site

Simply apply as a background to your body (or html) in your css and if you want the labels just add some top padding (about 25px is fine) to that element and presto. A useful little guide background.

html {
    /*background: #fff url(../images/body-background.png);*/
    /* This is the test style - just ditch when done */
    background: #fff url(../images/responsive-sizes-background.png) top center no-repeat;
    padding-top: 25px;
    /* This is the test style - just ditch when done */

→ Grab the layered PNG here

If it's handy, we'd love you if you tweet it!

Some more useful responsive design resources

Written on Tuesday 13th of March 2012 by @peteduncanson


We're an Umbraco Gold Partner

We've helped a lots of companies improve their websites and content management tools by creating a range of innovative Umbraco tools and combining that with our love of responsive web design to improve accessibility and conversion rates on a range of targets.

Find out why we love Umbraco so much

We produce great work

Read our case studies to find out more about how we design and develop Umbraco powered sites.

Hillsong Church

Hillsong Church An 18 month project to develop one of the most powerful, extensive Umbraco CMS sites we've worked on.

Cutting Edge Knives

Cutting Edge Knives We didn't just design & build this eCommerce site, we also run the profitable business behind it!

THS Tools

THS Tools We designed and rebuilt the UK's biggest independent tool buying group's site, member management and communication CMS tools using Umbraco.

We've also worked with these other great companies

We share our knowledge

Pete & James both speak regularly about Umbraco, eCommerce and web design and enjoy sharing our experiences with audiences around the UK and abroad.

Pete speaking in Las Vegas at uWestFest 2014 (Photo Credit)

Work with us

We love hearing about new challenges so if you have a project you'd like to discuss, the best way to get it started is to get in touch.

Call us +44 (0)1484 643 078


Send us an e-mail

Offroadcode Limited, Office 5, Dale St Mills, Royd Street, Huddersfield, HD3 4QY.

Registered Company Number: 06420788 | VAT No. 927708692