The Need for Breakpoints in the 2020s

[LJLachance]

I've been through 15 forum pages of 47 with various discussions about breakpoints and responsive web design. Currently using WB19.

I've read that "There is no fixed rule for implementing breakpoints." I also see "Common breakpoints are: 320 px, Mobile portrait; 480 px, Mobile landscape; 768 px, Tablet portrait; 1024 px, Tablet landscape/Netbook; 1280 px and greater, Desktop" and then "flexible layout using layout grids or flexbox then you usually only need 1 or 2 breakpoints." Further to the point, it appears that 320px isn't needed anymore, and perhaps something larger, like 360px in lieu of 320px AND 480px, is a better choice.

Reading through various users comments I've found so many different breakpoints, based on specific designs, that it is difficult to determine whether or not there is a "best practice" for breakpoints with "responsive web design." All said, at least for me, the topic of breakpoints with responsive design and using layout grids, is confusing if not in some cases, mind boggling.

The question is, considering today's standards and common screen sizes in use in 2024, when using responsive layout grids, is there really a need for breakpoints at all? And if that answer is yes, is there a minimum number and placement of suggested breakpoints to avoid as much confusion as possible while making the design as simple as possible?

[Pablo]

You will only need breakpoints if your design needs it.

For example
- if you want to use a smaller or larger font for different devices
or
- if you want to show or hide different objects for different devices
or
- if your layout 'breaks' on smaller devices

[crispy68]

Agree with Pablo.

Your design is going to dictate if you need any and how many.

It's in the name 'breakpoint'. When your design 'breaks' and doesn't look good at a certain size and the layout needs changed, then you add a breakpoint and make your changes.

There is nothing wrong with using breakpoints. Use them when and if needed. However, you don't need to go overboard either. This is why testing is important. Always test your design on desktops all the way down to phones to make sure things look good.

[wwonderfull]

Added to what @pablo and @crispy68 has elaborated that breakpoint is only used if you need it for the websites adjustments.

I can assure you there are designs which does not even need a breakpoint as it is as simple as an article page. But if your page has many objects which you would need to hide and show or make a wide menu appear like a column then depending on that you would need the break for that point of view.

Did you know there are many devices we have in modern world now a days and even people who use older devices.

Viewport resolution (CSS rules)
For the Apple iPhone 5s it is : 320 pixels width. 568 pixels height the height is indicative because the Safari browser, Chrome, etc. reduce the visible area.

iPhone SE 2022 has 375 px width

but hardly anyone knew that SAMSUNG GALAXY FOLD has 280PX width. Now hardly anyone optimized their website based on this smart device but there are people who do use it based on precaution and if their users use such devices unless they ignore the need.

Now there can be devices going back to SYMBIAN OS where people used to use NOKIA mobile phones to browse websites. I used nokia express music mobiles myself and browsed websites too. Most of the websites were optimized in such a way that the design is minimalistic not the css aesthetics as we see on todays websites where a button is as large as a thumb but small buttons and the content of the website were more like wrapped and the design was simple as possible as people hardly had a big screen to view big contents or stylish designs for any website. Those mobiles had 176 x 208 pixels or more or less. That means about 176PX width screen viewport. Now imagine that for a breakpoint.

If you make websites which is not responsive that it will be limited to some devices and breakpoints are the ways to make sure your website looks good, better and best on every single devices. The more you break the more you make it for each an every device. If your design is very simple then in those cases it does not even need a breakpoint. So the design adjustment aspect is the key reason of breakpoints.

[LJLachance]

Thanks for replying to this question... this brings me to ask, does the point of "design is going to dictate" the need, imply that IF starting a new (assume multi-page, layout grid, responsive) site from scratch that it's safe to begin with no breakpoints, test as you build, then IF a smaller screen breaks the page, breakpoints may be added after the fact?

When your design 'breaks' and doesn't look good at a certain size and the layout needs changed, then you add a breakpoint and make your changes.

[crispy68]

You may get differing answers to this but, yes, that is how I do it. I always flesh out my default view and then work my way down adding breakpoints if needed especially when the design is not concrete yet and design changes are being made.

[LJLachance]

Thanks Crispy... I think your idea of starting without and working your way down is excellent. On the next iteration, I'm going for it

[alan_sh]

Most of my sites have no breakpoints - I use flex grids of various types. I've also put a template up here which you can use as a starting point here viewtopic.php?t=93336

For examples, have a look at https://www.gmnscouts.org.uk or https://www.penninescouts.org.uk

Alan

[wwonderfull]

Thanks for replying to this question... this brings me to ask, does the point of "design is going to dictate" the need, imply that IF starting a new (assume multi-page, layout grid, responsive) site from scratch that it's safe to begin with no breakpoints, test as you build, then IF a smaller screen breaks the page, breakpoints may be added after the fact?

Yes you can always add breakpoints from both higher or even smaller screens size. By default the responsive grids make anything and everything to be scaled aligned and responsive. With some tips and tricks any design can be made responsive for any and every devices in any given breakpoint.