Tips on Responsiveness
Tags: webdev, css, beginners, learning
Published: 2023-07-12 12:28:09

> “If you think responsive’s simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one.”_
 - Josh Brewer, March 10, 2010.

While working on the responsiveness of a UI, I encountered so many challenges and I made a lot of research I discovered I have been doing things the wrong way and I’ll like to share that but first I’d like to explain why responsiveness in front-end engineering is so important.

Responsiveness is a very important aspect of frontend engineering and as simple as the concept may seem, it can actually get really complicated with the rise of many devices with varying viewports. Creating the right experience for the right device is very crucial to targeted users on a particular platform. And thankfully we have media queries help to specify what we want to alter on specific screen sizes.

There are different ways to tackle this problem and I’ll go over them one at a time.

**To target the viewports of the devices directly:** This approach aims to target the specific screen sizes for a particular device and alter the changes for that device. I personally was using this approach and didn’t know how much of a drawback this was when dealing with a large-scale web app. Everything starts to get really chaotic and I confused myself a number of times. The major drawback to this is there are many devices including the ones that you haven’t heard of and each of them needs to be taken into consideration. For context,

```
@media only screen and (max-width: 375px) {

// some CSS code here

}
```
The code above given the set of rules that will be added is applied to screen sizes up to 375px. And if the screen resizes above 375px it then changes based on another set of rules.

```
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {

// some CSS code here

}
```
The line of code above is used to target devices within screen sizes of 320px and 568px and you might feel on top of the world when everything fits into place but what if you have to consider another phone with a bigger or smaller screen size, that means you’d have to go through the process of specifying the media queries again for that device and other devices that your users would use to access the web app. You have just signed yourself up for frustration and every other good thing that comes with it.

**To group the device's viewports and write the media queries for these categories:** This other approach modifies the first approach. Most UI libraries already use this method to abstract code for the media queries. Screen sizes are grouped together like xs, s, m, l, and xl devices, and media queries are written for these specific groups, and as the viewport increases or decreases, the content of the page adapts to it and everything falls into place. So, if a device’s viewport falls into the xs group the already written media query is triggered, and so on.

**Prioritizing mobile-first approach to designs:** Mobile first designs are a faster way to achieve responsiveness in building front-end applications. Because it is easier to scale up to bigger screen sizes from small screen sizes than the other way around. This saves time and helps you leverage rarely used declarations in CSS and you get to learn a lot! So adopt a mobile-first approach to your frontend projects today and save time!

**Use a CSS framework:** This is probably the easiest and less stressful way to achieve responsiveness when building a front-end project. Frameworks like Tailwind, Ant Design, Material UI, and Bootstrap - just to name a few - have prewritten CSS styles that can be imported into our code and be used right away. They are easy to learn and understand and would probably save you so much time than having to write the raw CSS styles yourself. It also helps achieve consistent designs when working in a team. Frontend developers don't have to spend so much time writing styles for responsiveness since they have already been written in these frameworks.




Disclaimer - If you’re just starting out with CSS you should learn the ropes of responsive design in CSS first before hopping on a framework.