3

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?

1
  • 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! Commented Oct 3, 2019 at 8:59

3 Answers 3

0

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

0

Quite interesting how I had a very similar problem early this week!

So, here's the shorter answer:

Use a responsive grid with consecutively lower number of columns as the device's screen becomes smaller. To ensure that all scenarios are catered for you can then double the number of vertical grids by the actual number of grids that you plan for. Make sure that you set a gutter with of multiples of 8px and that the margins are also in multiples of 8px.

Most modern design software like Sketch or Figma will calculate the required grid sizes accurately for you so that life becomes easier even translating to code.

Onto the actual grids themselves, plan for the smallest grids, in this case the 375px viewport is ideal for mobile, 768px for tablet and 1440px size is ideal for desktop. Next, use the max-width rule, ie the designs for 375px will apply to all screens equal to and less than 375px, the designs for 768px will apply to all screens falling from 768px to 376px viewport width, while the 1440px rules will cater for all screens falling from 1440px - 769px viewport width. I typically like to design one more layout which is 1440px +, which is for all screens larger than 1440px. The larger than 1440px layout typically uses responsive fonts-sizes for looser control and easier legibility from large screens.

Thus I end up with 4 layouts.

I know it may sound boring and un-inspired, but try to simplify your design by initially using wireframes with big blocks to try to envision how the content would react to a shrinking viewport size in a way that makes sense.

Bonus tip: You can use responsive font-sizes but I would recommend resizing according to break points in strict multiples of 4px for font-sizes and and line-heights.

You can also employ responsive svgs for icons, making sure that that total areas covered by the icon units are in multiple of 8 or 4, ie 16px by 16px of 24px by 32px. the actual drown icons itself should be ideally be in multiple of 4px.

This strategy can make text and icons to look sharper on screens.

On this: Since these layouts cover MOST of the ground, do devs usually just tweak the design a small bit when something doesn't fit?

The answer is yes. Well, at least for the Devs I've worked with.

Calculating accurate, responsive rules for grid sizes that accurately match the sizes in CSS can get tricky. He has a solution that can get you started on the journey to finding yours: stackoverflow.com/a/20457076/1811992

0

You're right, that's how the responsive grid works. We select the most popular screen sizes and proportions, and then we first draw a design for them. In addition, our work is facilitated by the fact that in the world, for example, there are only two operating systems for the majority of devices, Android and iOS, and they have size standards that we can use.

Regarding the design of mockups (hi-fi), the authors above wrote enough information on how to work with them.

Now for the wireframes. Wireframes are created to quickly sketch out layouts, determine the location of layouts, content, controllers, etc. In other words, the base picture. You don't need to plan for responsive grids or breakpoints. All you need to do is make different layouts for the main screen sizes (for example phone, tablet, monitor). More accurately, you can do this in the Mockups (hi-fi) stage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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