A screen sizes map for responsive design

Johannes Holl
Feb 23, 2018 · 4 min read

I’ve been working on several projects dealing with responsive web design and multiscreen strategies, since these became a thing. From basically designing and coding websites to writing the related chapters in style guides for blue chip companies — I somehow unintentional specialized in this field.

In the work for my clients I often used a map of the most common screen sizes. I found this map very helpful and in time this map evolved and transformed. My approach stood the same: I wanted to create a map that would:

  • provide an overview of the most common screen sizes,
  • create an understanding of how the different screen sizes play together
  • be a working tool for designers and eventually also developers

In this article, I want to take you thought the transformation process of this map.

There are already similar things.

A lot of designers and developers are working on gathering screen information and visualising the many screens sizes out there.

You will find a bunch of websites with table lists where you can find sizes, devices and resolutions.
Very powerful tools — still they do not provide an useful overview nor give an understanding how different screen sizes play together.

There are very cool visual maps already: Ben Gremillion came up with the »Responsive Web Design Cheat Sheet« to simplify the workflow of defining breakpoints. It does what it supposed to do and is a pretty amazing tool when you want to code breakpoints in CSS.

Ben had a different target than me. To get an understanding of the screens out there, I am missing some information.

How I started

My very first version of the map — about 5 years old — reflects a common practice of that time where breakpoints in responsive layouts where build in device classes. Working with it, I missed the possibility to compare screens to one another .

Since scrolling is most commonly vertical, the width of a screen has of more importance in layouts than its height. Following this, I tried to organize the screen sizes vertically so it would be easy to compare it’s widths.

I somehow missed the height still in some projects.

After some time, I wanted to start again with a different mindset. I arranged all screen sizes on top of each other–working with transparencies, tried outlines and shadows to separate them. Values would be a side note and it would be easy to compare screens.

I tried different alignments, to find a perfect reading experience for the screen comparison. I ended up with the last of the following three variations.

Once I started to explore colors, I was feeling like designing windows for a church. Following, you’ll find some of them. I felt lucky with the last one: the color groups differ proper and the tonality is quite neutral as a whole peace.

Finally, here I was with a vector file of screen sizes arranged in a visual graphic.
This file spoke to me: »Turn me into an interactive SVG«.

Here is the live version of it:

Screenshot of screensizemap.com

At this moment, it makes no sense to continue writing about it.
Just visit the live link — it works best on desktop: www.screensizemap.com

And if you like it, give it a vote on product hunt!

Boana Stories

Design Studio for User Experience

Johannes Holl

Written by

Lead Product Designer UX/UI & Partner @Boana

Boana Stories

Design Studio for User Experience

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade