A Great Media Queries/Breakpoint strategy for Great Results in 2024 and forward

Hello,

Thank you for this opportunity.

I am a self-taught web designer, interested in trying freelance web design.

I have searched for some time, after a strategy that makes most sense when designing for all devices on the market. I guess, theoretically the most optimal solution would be to design for every device screen resolution on the market. However, as this seems practically hard to do considering all the different screen sizes (and more are devoloping), I am instead looking for a solution where all devices are accounted for in the design. In other words, I want the best possible set of breakpoints that fit today’s devices best. I know there are different ones out there. I want to hear your opinion on this. Also if you have an opinion on how to approach this for devices of the future it would be very welcome. And if you have any resources on the pixel dimensions of all common mobile and tablet devices, so that I can see for myself that all devices are being covered, please feel free to share. My end goal is to create design with great UX and I don’t want some devices to be neglected only because they may be a few years old or unpopular.

I am trying my best to create all parts of my websites on my own, coding WordPress themes. I have no habit of using Bootstrap or any other CSS framework but prefer to have full control myself, and develop it myself. Although maybe Bootstrap’s breakpoint strategy is what I am looking for?

It sounds as though you are looking for is responsive design.

1 Like

The key is to forget about specific devices and their screen sizes in pixels.
As you have realised, the variety of devices on the market now are far too many to condiser, the different sizes (in both orientations) makes the number of screen sizes seemingly infinite.
It’s s fools game.

Instead think about the site’s specific design, and set the break points to suit the design.
Resize the browser width, at any point you design breaks or looks awkard, that’s where you will consider adding a break point.
The only sizes you really need to consider are the largest possible screen, and the smallest, that you want to cater for. Everything else falls inbetween. A ‘fluid design’ should adapt to any size between those two.
Fluid design isn’t about adding many break points (the old ways of ‘adaptive design’), but using layout elements that change and adapt themselves in a changing screen size, automatically squeezing their width, or wrapping to a new row when squeezed too far.
This approach will minimise the number of break points and make your CSS much simpler and more robust to not only different screens, but also things like increased browser font sizes, which is good for accessibility.

3 Likes

Thank you Sam, that’s a very informative answer. It definitely helps.

About the point on rezising the browser. I am not sure that you use the following tools, but do you find the device dimension presets in Chrome/Mozilla Inspector (for example for the iPhone 12 Pro) to be an accurate simulation of the real device experience? To my knowledge, as a principle the iPhone “browser bar” is not included in its (Google) Inspector preset since it apparantely is not part of the viewport. I understand in this situation that the fluid design must come handy to avoid the content beeing pushed outside of viewport by the browser bar.

How do I really know that my design is looking OK on a specific device? It seems like it is a bit unnecessary to check that, provided that I create a fluid design with intelligently chosen breakpoints?

In Chrome Developer Tools, you can set to ‘Dimensions: Responsive’ and drag the width. The smallest smartphones have a screen width of 320 pixels (that’s CSS pixels) so drag down to that width but check the appearance of your web page as you change the width.

A fluid design does not need to have any breakpoints. Try resizing your browser width when viewing this experimental demonstration web page (hosted on free webspace) which uses CSS Flexbox:
http://create.mywebcommunity.org/demo.html

Displaying tables tends to be problematic on smartphones. On that page the table overflows a little when the browser width is 320 pixels, but it can be scrolled horizontally (or the smartphone moved to landscape orientation).

I am not saying that breakpoints should not be used.