3

I'm a relatively new designer. All of my courses and training have a focus on breakpoints as a way to achieve responsive design. However I have heard that they are now obsolete and not being used anymore. What have they been replaced with?

David
  • 61
  • 1
  • I think the answer is "containers". – Izquierdo Jan 12 '24 at 23:07
  • 2
    Containers also have breakpoints, just under the hood, so breakpoints are very important and there's no way that they will become obsolete. My question would be what makes you think that they are obsolete? – fakermaker Jan 13 '24 at 10:14
  • I think what he mean is that breakpoints are not precise anymore (like 360, 768, 920, etc) but they're more generic, like "mobile, tablet, laptop, big screen". I might be wrong tho – Devin Jan 13 '24 at 16:53
  • @ Devin: I think you might have accidentally answered my question. Someone I worked with said that breakpoints aren't done the same way as a designer was doing- which was defining the breakpoint by pixel...but I didn't get the chance to ask him to elaborate. Maybe that's what he meant. Is it true that breakpoints are ? Breakpoints is one of my knowledge gaps that I'm trying to fill. – David Jan 14 '24 at 19:09

2 Answers2

2

OK. Based on your comments, breakpoints are somewhat outdated. Previously, there were only a few standard breakpoints. However, as new devices with varying screen sizes and technologies (like retina or foldable screens) are introduced, relying solely on pixel-based breakpoints is a bit nonsensical.

However, breakpoints haven't become completely irrelevant. In design, you must define breakpoints. The shift is from focusing on specific devices to considering actual screen sizes and dpi. With the diversity in device sizes - mobiles nearly as large as tablets, tablets larger than some laptops, and huge TV screens - you'll need to tell a developer where to apply changes. This involves defining media queries in the code, which, despite being somewhat arbitrary, are necessary. Currently, it's common to define around 5 to 10 media queries based on size, and a couple based on dpi.

The key is designing for a general screen size range. If the layout and elements look good across various sizes, the specific device becomes less important. But if you want, you can define media queries at 360, 480, 640, 768, 920, 1080, 1240, 1340+ and you'll have most standard sizes

For reference, my typical breakpoints are: mobile at 587px, tablets at 767px, small screens at 920px, laptops at 1340px, and anything larger is for big screens. I rarely design containers wider than 1340px, as larger sizes can be challenging to read.

Devin
  • 37,944
  • 15
  • 79
  • 140
  • What's your preferred tablet width in landscape orientation? Asking for me. :) – Izquierdo Feb 14 '24 at 15:22
  • 1
    I actually tend to use orientation: landscape unless I need to fine tune. If that's teh case, then I combine, like @media (orientation: landscape) and (min-width: 1080px) or whatever size I need. – Devin Feb 14 '24 at 17:18
0

I would suggest a simple method to reduce your confusion. Just connect with your developer and ask him to share the specific size in which the designs need to be prepared. This makes you to align with the development team and their specific breakpoints or any parameters that they are comfortable with.

Jose Thomas
  • 1
  • 2