Chicken or egg question for web development has a different variation — mobile or desktop first. And somewhere between the two lies the ideal scenario of responsive design.
Oftentimes it feels impossible to style everything on the page so it can fit and display everything correctly and nicely on every screen. Then media queries come to the rescue and in a blink of an eye you have several of them here and there, adjusting almost every HTML-tag of your site.
The (more or less) standard range of media queries may look like the following (example taken from here):
/* Mobile */
@media (max-width: 480px) {
// Styling
}
/* Small devices */
@media (min-width: 481px) and (max-width: 767px) {
// Styling
}
/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
// Styling
}
/* Laptops */
@media (min-width: 992px) and (max-width: 1199px) {
// Styling
}
/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) {
// Styling
}
/* Ultra-wide and further */
@media (min-width: 1920px) {
// Styling
}If you take this approach, you probably need to pick one dimensions range first (most likely either the smallest or the largest one), develop everything with a focus on it only and then, step by step, adjust your site/app for other ranges.
This seems to be quite logical yet might take some extra efforts with all the media queries setting up: basically, you have to do everything six times (technically it’s more like one huge first step and then five smaller ones, as adjusting everything will take less time than doing it from scratch).
The list can theoretically be reduced to three types of ranges: small (below 768px), medium (768–992px), large (above 992px). But then you’ll sooner or later face the reality of extra-small and extra-large devices and there will surely be some elements that don’t properly fit them.
I don’t want to pretend to be an expert (as I’m not one), but after trying to stick to this approach (with three ranges) for a bit, I’m not sure it’s a good idea. If you decide to spread your responsiveness into several dimensions, it’s better to do it for most of them (meaning the first approach with six different ranges) and not reducing them to three. Otherwise, there will be edge cases when something will look quite weird on various screens.
Then there is mobile-only approach when you just develop everything for small screens and everything that is larger simply looks the same but bigger. That might seem to be quite a limited approach but given the amount of people using their phone as main (or sometimes only) device, can be justified to some extent. But then your site/app may look quite “unusual” on desktops (empty spaces and giant buttons, for example). It may also feel like you are basically telling your visitors to switch to mobile to use the site/app.
One day, while checking the responsiveness on various devices, I accidentally clicked on Galaxy Fold in Chrome Dev Tools. To say the least, I was a little bit surprised on how everything looks on such a narrow screen. And that kept bugging me, so I’ve started using it as a starting point for the responsiveness. I mean, yes, there are thousands (if not more) devices out there, but if your screen is narrower than the Fold one, you have to prepare yourself for some flexibility.
Personally, I keep trying to adjust everything for desktops but also use Fold dimensions as a starting point. If everything fits it, chances are it fits the rest of the devices. And yet tablets (or small laptops) always have some surprises. And at some point, you get back to setting up your styling for a few “in-between” dimensions.
And finally, there are ultra-wide devices. These can be tricky beasts. For now, it feels more like a niche, as not everyone may allow themselves to have one or simply don’t want to, as, to the contrary to phones, some may find them not fitting their job/entertaining purposes. But they are still popular. Yet you can’t always check how everything looks on them (simply because you don’t have one and, while you can reduce your screen to check the mobile/small versions of the site/app, you can’t “stretch” your screen to make it look like an ultra-wide one). And then you enter the land of guessing and hoping for the best. Or, in theory, you can set maximum width and height and add some neutral background that can be seen only when the screen is larger than these set dimensions; meaning that your site/app will always be limited to a certain range of width and height, and the rest of the space will be occupied by the background color (which can be left as white also).
There are CSS frameworks of course that will make your responsive work much easier, but even there you oftentimes have to take care of various screens (plus, you might want to change the way the styling is set there anyway for a number of reasons).
It’s hard to find the best way of doing things, especially when it comes to styling web sites and applications, but maybe picking up one of the above mentioned variants (or something else) and sticking to it could be a good idea.
Pondering out loud once again and trying to summarize a few of my buzzing thoughts as usual. But maybe it’ll help someone as well, who knows.
Thank you for reading.
