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?
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.
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.