Post Image

Responsive Web Design Cheat Sheet

Ben Gremillion
By Ben Gremillion on 6th January, 2014 Updated on 1st February, 2017

How to set up breakpoints in this design? You probably ask yourselves this question a lot.

Responsive design breakpoints is no rocket science and you don’t need to search the web for the proper breakpoint dimensions every time you design for responsive. As a matter of fact, the ultimate design aid in this matter would be a simple graph with all the breakpoint dimensions visualised.

And that’s what we give you.

Editor’s note: In UXPin, you can use the various breakpoints. If you want to play around with them, start a free trial

UXPin - responsive web design cheat sheet

Using the responsive web design cheat sheet is very simple.Find the device you’re designing for on the chart and read what breakpoint dimensions it should have – and there you have it.

The poster is print-ready so you can even put it on your wall and never lose track of responsive dimensions again (or hang it in your office and make your teammates stop haunting you with questions about breakpoints ;) ).

You can download the responsive web design cheat sheet here (102 kB).

P.S. In UXPin, the UX Design App, you can set up breakpoints using our quick ready-made breakpoints for most popular devices or set up your own using custom breakpoints feature. Sign up for a free trial and try it!

Join the world's best designers who use UXPin.

Sign up for a free trial.


Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you