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 13rd of March 2012 by @peteduncanson

Umbraco

We live and breathe Umbraco

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.

We produce great work

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!

Somewhereto_

Somewhereto_ An extensive Umbraco project to rebuild this popular search and booking portal for young people with Channel 4.

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 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.

Upcoming Talks

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

We're available

We value the relationships we've built with our existing clients and look forward to new opportunities so if you have a project you'd like to discuss, the best way to find out what we do and how we can help is to get in touch.

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

Registered Company Number: 06420788 | VAT No. 927708692