Cascading Style Sheets, CSS, is often touted as one of the worst things about web development. Vanilla CSS has many issues that causes it to have a steep learning curve, which, when I started out, caused me to be frustrated on things as simple as keeping a footer at the bottom of a page. A big portion of this, I believe, is due to how browsers handle different css units. With the trend to design for mobile that can scale to desktop sizes, being able to correctly use these units is vital to any entity looking at creating the best possible website that provides a great user experience.
Due to the limitations of Javascript, HTML, and CSS -since their use case has far outgrown their original design-, web developers face the issue: How do I make this design so that it not only responds to different screens, but looks good while doing so. In response to this question, we have seen a multitude of different options be invented/created. From preprocessors that allow you to more easily create CSS files for different screen sizes, such as SCSS, to using media inquiries to more easily dictate what rules should be enforced for different screen widths. CSS itself has even been upgraded with flex and grid rules to help solve these problems.
So while the old problem was "How do I make this page responsive", today's problem is "How should I make this page responsive”. I set out to discover what methods I should invoke to best take a design, put it on the web, and have it be the most accessible page to a vast and diverse set of users. Ultimately, the solution is now pretty simple, and it comes down to correctly formatting your page and using relative units whenever possible.
When starting out in web design, I was unaware of just how many ways there were to create a responsive website. I also didn't know how different CSS length units worked, units such as rem, vw, vh or svh. I pretty much stuck to percentages and pixels, which caused me to have to use media queries at many, many different sizes so that the website would correctly display on different devices. I was simply too afraid at what seemed like arbitrary values to dive into learning how to properly use relative units.
However, I was fortunate enough to have a great teacher that suggested I look into learning more about these units to help me reduce the amount of time I was taking to build websites as well as to create more fluid and better looking designs. The biggest help, I found, to learning more came from the MDN web docks. Here I learned that CSS has two different unit lengths, absolute and relative:
Absolute measurements are -almost- always the same amount of distance on any screen. Inches, centimeters, picas, points, and pixels are all examples of absolute units. Pixels are the only exception, since browsers look for the DPR of the device and not the physical amount of them that are present. Absolute units are great when setting min/maxs, or when you want an element to be the same size despite the size of the device.
Relative units are all units whose absolute value changes depending on the size of something else. For example, em represents the font size of the object, ch represents the width of a zero in a font, and vw/vh represent the viewport's width/height. All of these are based on something that can easily change or be unknown/uncertain. Relative units are what we should look at when making a website responsive.
Since I've started to adopt relative CSS units, I've noticed a massive difference not only in my designs but in other aspects of web development. Being able to create seamlessly adaptive designs for any device, with limited media inquiries, means that I have been able to work faster and change designs quicker. It also helps when showing others, since I don't have to worry about the website having strange graphical issues due to their device's size being different from the ones I tested on. I also saw improvements in retaining users. When showing a user a website, they were not quick to get out of it, but wanted to explore more since the designs allowed for easier navigation.
The biggest improvement for me, from adapting relative units, has been my ability to address the challenge of "How should I make this page responsive". I know now that no matter how a page is designed, all It really comes down to is using the correct units and using a format, such as flex or grid, that allows for responsive design and easy changes.
Transitioning to relative CSS units marked a pivotal shift in my approach to web development, enlightening me with the importance of embracing innovation. Although I was initially hesitant, and stuck on conventional techniques like percentages and pixels, I was fortunate enough to be guided by a mentor to learn just how much using relative units can be on one's workflow efficiency and design adaptability. As I integrated relative units into my designs, I saw, across diverse devices, the enhancement in user engagement. Looking ahead, I want to use this newfound wisdom for future endeavors and leverage relative units and responsive design frameworks to craft immersive digital experiences that resonate with audiences across platforms and contexts, resulting in the best possible user experience.