So I've researched this question and I've alluded to an answer, however I'd like some more input. As a developer whenever designing a website I could just code as I go and set breakpoints whenever something doesn't fit. However switching over to UI design I'm facing the issue of compiling the proper screen sizes / mockups to hand over to developers. Since there is essentially no way to determine breakpoints for every screen when purely designing mockups what exactly is best practice here in this situation?

It would seem the best case is to make designs in a few predetermined screen sizes such as a mobile size / tablet / laptop / and large desktop. Since these layouts cover MOST of the ground, do devs usually just tweak the design a small bit when something doesn't fit?

  • If this answer helped you you can set as right answer clicking on check icon aside of the answer and upvoted if is useful to you. Thanks! Oct 3 '19 at 8:59

Normally, I start answering: Do I use a limited max-width container or full-width responsive container? Why this matter? Because in e-commerce for big screens (over 1600px) I can keep reorganizing element to fill the whole screen showing 5 or 6 columns of products. And in this case, I will need to design a wireframe/mockup for 4 sizes of screens and not for only 3.

When I'm using limited max-width container I used design for 3 sizes:

  1. Mobile (480px) I normally use 480px and make some guide lines for smaller screens like 320px to be certain that will fit for all.
  2. Desktop (998x, 1200px and 1980px) I normally use 1980px and make some guide lines for smaller screens like 998px and 1200px to be certain that will fit for all.
  3. Tablet (768px) I normally use 768px and make some guide lines for smaller screens like 520px to be certain that will fit for all.

As tablet normally has less access I design in the end. To have a mobile-first, you should "forget" desktop and design mobile-first and then desktop.

The most important thing is thinking how the elements will grow and adapt for each screen keeping the same user experience and the same components priority. You also must think on the clean code without so many breaks and for it as an ex-developer it's easy, but for designers with no code experience, I recommend to talk with developers with wireframes on hands to find the best and simple solution for each component.

See most common breakpoints simplified in an image. You also can search on the web a full list of screen size.

enter image description here

But the best way to define the standard breakpoints on your website if you already have traffic is going to analytics and get most used screen sizes like the image below:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.