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.
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.
1 Like