Guide to responsive design tools in CSS
How it started
Before smartphones became popular, almost entire web browsing traffic was on PCs.
Despite only one device needing to be taken in consideration when designing a website, web designers still didn’t have an easy task on their hands. Some people had a 800x600 screen resolution, others 1024x768, others 1280x1024. Different viewports needed to be addressed and, as opposed to today, there weren’t exactly that many tools at our disposals to properly do so.
One of the early heavily abused properties for the task was min/max-height/width, both present in CSS 1.0 specification. It allowed to create different limitations to items. This helped in adjusting page elements to different screens.
While helping to “constrain” items, it was obviously limited. Ok, the element can be this big, but then what?
CSS 2.1 additions
2010 was probably the year when smartphones entered internet browsing market big time. In that year, 3.8% traffic was mobile. Those devices that now everyone except Max Cavalera has in a pocket were beginning to serve more and more extra roles outside of plain talking. And the most important of its all new emerging roles was browsing the web.
In the year 2011, 8.5% web traffic was mobile. More than double the amount in one year! One year later it went up to 13.2%, a 55% increase. A team behind CSS knew well where the market is going and that it’s their responsibility to addressed the needs related to this market expansion.
One of the most notable additions in CSS 2.1 was the support for media queries. Media queries allowed developers to apply different styles based on the characteristics of the device or viewport, such as screen resolution, orientation, and aspect ratio. This feature enabled the creation of responsive layouts that could adapt to different screen sizes and orientations.
While being a game changer, using media queries still produced many problems.
First one that comes to mind is that in order to accomodate all more and less popular screen sizes, plenty of rules has to be written. It can take quite some time to set everything up. And when making some major redisigning, often all of that has to be changed! So the code is annoying to both navigate and change.
Second problem is that designing based on media queries often leaves annoying blindspots. When resizing browser on a high resolution desktop, entire design “snaps” once crossing a defined threshold (for examle min-width of 1024px).
One motivation for such setup could be that at 1024px the font size/image size/side panel size etc. becomes so unbearable to watch that it has to be changed to a new now-good-looking arrangement. But what if someone has high desktop resolution and browser occupying only part of the screen?
That person’s browser can then have the width right below the min-width property, right where the design is the ugliest, right before the change for the better. And so it could be a visitor left in a state of disgust and leaving the site ASAP before even beginning to read the content.
We can mitigate that by creating more rules, more trigger points. This makes the blindspots less ugly, but also requires more time for code creation and maintenance.
After CSS 2.0, the number of different types of developments that needed to be done became so big that World Wide Web Consortium started splitting more and more of the work. By the time of CSS 2.1 birth in 2001, a small portion of modules was already going their own separate ways, despite the standard still having a formal version.
CSS 3.0 additions
In 2005, the CSS3 module publishing process began, with individual modules like Selectors, Color, Values and Units, etc. being developed and released independently.
Version 3.0 brought some game-changing additions to responsive design. The two biggest ones were Flexbox and Grid.
Flexbox enabled super-easy creation of 1D page elements while CSS Grid 2D structures. Both made many tasks trivial and targetted one of the biggest problems of html development: endless mazes of <div> tags in code.
With Flexbox, splitting a horizontal space among few different objects was as simple as appending to each object’s CSS properties ‘flex:’ followed by a number. And those proportions were of course scaling infinitely in both ways.
Grid, on the other hand, became the go-to tool for creating a more complex designs of big news outlets, magazinet and the likes, where multiple different cubes can be stacked next to each other in different proportions with very little code to manage it.
The Units section of W3C also introduced units frequently used in responsive design - vw (short of viewport width), vh (viewport height), and rem (root em).
Of the three, viewport width is the most important one in the context of this article. Having viewport width as direct reference point for size of any element on page is really a game changer.
CSS 3.0 introduced a plenthora of various functions, some of which very potent in responsive design. One notable example is calc() function. On paper, it’s just a calculator, so what could it possibly offer when creating websites that need so scale perfectly?
Adding fixed value to a relative one can make sure we can get infinitely scaling vw element if need be while also setting up a base provided by fixed value. Relative unit doesn’t amount to much in tiny viewport, but fixed value covers for that shortcoming. And so we have a solid size for small displays while the relative one keeps us safe no matter how large viewport gets.
Sometimes the “growth curve” is not to our liking (the object gets big too fast or too slow as the screen gets wider etc.). Adjusting this curve with extra parameters using calc() function can help there. It can be time consuming to find two or three values which scale perfectly across the whole spectrum, but at the end it allows perfect scaling across the whole viewport spectrum, impossible to achieve with single unit, whichever we may choose for the task.
CSS Values and Units Module Level 4 standard introduced multiple wonderful tools, like the min() and max() functions, which seek to replace or compliment media queries.
min() allows to choose the smallest number from the list of different numbers. When giving the function vw, percentage values etc. often we don’t consider the fact that someone out there might be watching the webpage in resolution multiple times bigger than we think our max users are having.
The website (or some of its elements like text) need to stop growing at some point in order not to start looking grotesque. min() enables us to set things up using relative units, with a sanity value (like 3000px) to make sure that the element never stretches more than that.
As the function looks for the smallest parameter, when our responsive design element reaches 3001px, it becomes bigger than 3000px and so no longer selected as parameter.
max() does exactly the same thing in opposite direction, as the name implies, and often serves to capture the limit of the shrinking instead of stretching.
The clamp() function takes a more sophisticated approach to controlling values. Instead of managing extremes on just one side of the spectrum, it covers both sides.
It takes three parameters: a minimum value, the value itself, and a maximum value. The middle value is relative, and the minimum and maximum values provide limits that the function enforces. If the value falls below the minimum, it is clamped to the minimum value. If it falls above the maximum, it is clamped to the maximum value.
Another useful addition to CSS is the
This allows the appropriate image to be loaded depending on the screen size.
Final word
The progression of responsive design tools in CSS reflects the rapid evolution of web browsing technology and user expectations. From the basic min/max properties to sophisticated functions like clamp(), CSS has continuously adapted to provide developers with powerful, flexible tools for creating truly responsive designs. These advancements have not only simplified the process of building adaptive layouts but have also enabled more nuanced control over how content scales and adapts across a wide range of devices and screen sizes.
As we look to the future, it’s clear that responsive design will continue to be a crucial aspect of web development. The tools and techniques discussed in this article provide a solid foundation for creating flexible, user-friendly websites. However, as new devices and browsing contexts emerge, we can expect CSS to evolve further, introducing even more innovative solutions to meet the challenges of an ever-changing digital landscape. Staying informed about these developments and mastering the use of responsive design tools will be essential for any web developer aiming to create modern, accessible, and visually appealing websites.