A little responsive web design resource
Posted on 12 August 2011 by Pete Duncanson
It's sometimes handy just to have a graphic reminder of screen sizes when developing flexible layouts. Here's one I made earlier.
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
blog comments powered by