5 Key Techniques to Create Responsive Layouts So That You Don’t Have to Relying On Heavy CSS Frameworks

You don’t need heavy CSS frameworks to build responsive layouts.

CSS frameworks like Tailwind and Bootstrap are really powerful, but sometimes, they are too much for smaller websites. You can achieve all those features offered by them in pure CSS code. Under the hood, they all use the same basic technique for responsive websites.

In fact, if you really want to know how those frameworks and responsive websites work, then you need to understand the 5 fundamental techniques.

Here are the 5 techniques to make your website responsive:

Technique #1: Configure the Viewport

Did you know a single meta tag can control how your website scales on any screen size?

Yeah, that meta tag is Viewport.

If you don't know what the Viewport is, then Viewport is the visible area on a webpage on a device, whether it is a phone, tablet or desktop. You may ask what it does. It determines how content is scaled and displayed based on the device's screen size.

Since the screens come in various sizes, the Viewport plays a crucial role in making the website responsive.

Now, how to use it?

Simply use the Viewport meta tag in your HTML file.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Technique #2: Adopt a Mobile-First Approach

If you’re not designing mobile-first, you’re doing it wrong.

Because over half of web traffic today comes from mobile devices. And that’s what approach Tailwind adopted. And they are asking you to do the same. Here, we are talking about using pure CSS instead of a framework, but the approach is still the same.

The mobile-First approach helps in the longer term, as you will have to write multiple versions of the same code for different types of devices.

Technique #3: Utilize CSS Grid and Flexbox

Are you still using Float-based layout for your website?

I hope you are not. And if you are still using it, then it is time to switch to Flexbox and CSS Grid since they are powerful tools for creating flexible layouts.

When you need to create a one-dimensional layout, go for Flexbox

And When you need to create a two-dimensional layout, then go for Grid

Technique #4: Create Fluid Layouts

Are you using fixed pixel values everywhere on your website?

Most developers choose to go with pixel(px) value while developing the different layouts on the screen. Pixel values are great for fixed layouts but not so great for responsive layouts. If you use a fluid layout like a percentage-based value, then your layout will smoothly resize on any viewport size.

.container {
    width: 90%;
    margin: 0 auto;
}

Technique #5: Use Media Queries Wisely

Media Queries are another helpful technique for making responsive layouts

But it needs to be used wisely. It is using different breakpoints for different layouts. Most developers go wrong with it. They start creating for all possible screen sizes, which leads to unmanageable code.

In my suggestion, media queries should be made on key transitions between device categories. For e.g. Mobile to Tablet, Tablet to Desktop.

~

All right, as you can see, there are multiple techniques available to make your website responsive. On paper, it looks like 5 different techniques are ready to be used, but practically, when you start working on any production website, you will start seeing the use case of all those techniques.

Now go and build a responsive site, and let me know what you used at its best.

If you have enjoyed reading this, follow me on Twitter/X to read more.