Desktop browser size guide for responsive designs

 

Now responsive design is the new black, I’ve been doing a lot of browser resizing to check how the pages behave at various device widths. But it’s frustrating to have to guess at the screen width your aiming at. Yes, there are browser plugins that resize your browser accurately, but they are slow and cumbersome if you need to test a variety widths.

So I’ve put together a cutting-edge technical solution consisting of a desktop background image with width guides marked on it. Instructions for using it are:

  1. Set the image to be your desktop background (Make sure that the image has been cropped to exactly your screen size)
  2. Position the browser on the left edge of your screen
  3. Resize the browser from the right

When the outside right edge of your browser in on the mark, the your browser’s viewport will be the labelled width.

Which browsers does it work with?

Chrome and Firefox on Windows 7. Those are the browsers I use; other browsers and operating systems probably have different widths of browser chrome. If you want to use this idea for other browsers and OSes then feel free to download the .eps and adjust it to suit your system.

On Win 7, Chrome’s chrome is 2 pixels narrower than Firefox’s so if you’re using Chrome you want to aim for the left edge of the central line. If you’re using Firefox, use the right hand edge. (Conveniently the line is 2 pixels wide :-)

Why is each width marked twice?

I’m glad you asked… Sometimes web pages have scrollbars sometimes they don’t. Use the upper, wider mark as a reference when your web page has a scrollbar and the lower mark when it doesn’t. The browser viewport will be the same width in both circumstances.

What about my desktop size?

For this to be useful for you you’ll need to have the background image exactly the size of your desktop. I’ve provided a few of the most popular desktop sizes, but it’s not exactly hard to crop or extend the image to the dimensions you need. (If you don’t have Photoshop, Paint.net is good for the simple image manipulation)

Why isn’t the width of my mobile device marked?

Because these are the sizes I found useful. There’s about a gazillion devices out there – the sizes marked here should cover at least 99% of mobile visits to a website. If you want another size marked or different labels, download the .eps file and roll your own.

What about device pixel ratios?

Yep. Various devices use various device pixel ratios. The number of physical pixels on the screen may not mean much about how a website gets displayed. It’s a minefield. This isn’t going to help you work it out.

I want to use it with my background image

If you work with images or designs it should be illegal to have anything other than a plain, neutral, grey background on your desktop.  Anything else will colour your opinion of the images you should be looking at. But seeing as I don’t rule the world quite yet feel free to download the .eps and overlay the guides on whatever you like.

Downloads :-)

So here are the files, I’m putting them up here under a “feel free to do what you want with it but a link back to me would be nice if you publish anything” type of license.

Let me know if you find it useful in the comments or follow me at @edeverett on twitter.

 

Comments are closed