Best wireframing breakpoints to work with new frontend developer

I've searched tons on this topic, e.g.:

  1. https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
  2. https://graphicdesign.stackexchange.com/questions/39433/what-are-best-practices-for-determining-responsive-design-breakpoints
  3. https://graphicdesign.stackexchange.com/questions/247/is-there-a-standard-width-for-designing-web-page-mockups/277#277
  4. Determine correct breakpoints to wireframe to a responsive website!
  5. Responsive design: Should I go bigger than 1024px?
  6. Responsive Breakpoints?
  7. https://seesparkbox.com/foundry/there_is_no_breakpoint

QUESTION remains: when You're building new team, want to incorporate some standards to work fast and efficient on as few breakpoints as possible, Your developers don't know Your approach to design ("My UX teams understand responsive design, so they are able to "interpolate" between two layouts without having to create a wireframe to illustrate exactly how flow changes"), how do You address changes in layout?

Going the "100% correct way to do CSS breakpoints" (first link) gives You 4 breakpoints. As far as I get it, one should design a:

  • 600px breakpoint so devs know how to address phone devices
  • 900px breakpoint so devs know how to address tablet portraits from 600px to 900px
  • 1200px breakpoint so devs know how to address tablet landscape from 900px to 1200px
  • and now what? 1800px? How would devs know how to e.g. compress some tables on 1280 if they don’t fit and one column should be removed on small resolutions? Or how would they know there’s a change in some element that now works with hover effect (since tablets don’t accept hovers)?

Should 1800px breakpoint tell them how the website/app should look like on all laptop and desktop devices? If so, from our experience it’s almost impossible to include every of that information in just one big breakpoint. And as You know, it’s easier to show something than to make notes when You want to eliminate misunderstanding.

Some of You will say - "mobile first then scale up" but in real world noone presents 380px layout in front of client. Some will say - "everything runs on % so it will scale up" but it's also almost impossible to calculate the proportions of every whitespace so well they will perfectly scale up.

Going the "There's no breakpoint" way means designing a tons of wireframes instead of 4 or 6 since You must design a new one every time an element doesn't fit. No time for this in rapid prototyping/wireframing.

What's Your approach?

Tags: