Summary: Responsiveness is fundamental in web development. With multiple devices and screen resolutions, you want to build a website that works on ALL these screens. In this article, I would be taking you through five things you must consider when building a responsive website without a framework.

What is Responsive Web development?

Responsive web development is an approach to web design that makes web pages render well on a variety of devices and screen sizes. Web development has advanced past simply designing static pages for the computer. Now, your web pages and applications have to support multiple devices viewport; there are lots of them.

Every frontend developer has heard or read the above multiple times. Responsive web development was one of the first things that I heard over and over again. However, I was introduced to bootstrap for responsiveness.

There are lots of CSS frameworks, However Bootstrap was one of my favourite frameworks to use. I used bootstrap in all my projects including react based projects for responsiveness till I realised I was overly dependent on it. Also, Bootstrap can have a lot of dependencies in instances of small-scale projects.

In my journey to build fully responsive without frameworks and with just HTML and CSS, I found out 5 crucial things to do to make sites responsive and developments less cluttered.

1. Always design mobile-first

Contrary to popular opinion, this is not gate-keeping. Designing mobile-first ensures that you are able to get as much information as you can on a smaller screen. When it is scaled up, the components would scale up too. However, if you design for desktop first, most components will go out of place when shrinked down for a smaller sized screen.

As a challenge; you should replicate a simple landing page. Build mobile first then desktop first, see which was easier to scale.

2. Define a fluid layout

My go-to keywords for defining the overall layout of the webpage are:

width: 90%;
margin: 0 auto;

The width ensures that everything on the web page is a set width from the border of the screen size. Margin sets the content of the webpage to the center of the screen width.

You can play around with the width depending on what you need.

Make sure you use percentage to define the width, this is because percentages are fluid and will adjust to the size of the device viewport.

As a challenge; you should add width and margin to the landing page you created above. It would make the scaling up or down much more fluid.

3. Know when to use Rems and Ems

Rems and Ems are size units just like pixels and percentages. Rems and Ems are relative units and are much more preferred when defining font size, border, padding etc.

They are very different though.

Em is relative to the size of its direct or nearest parent, while Rem is only relative to the html (root) font-size.

.body{
font-size: 14px;
}

.container{
width:50%;
background-color:red;
font-size: 1.5em;

h1{
font-size: 3em;
}

}

h1{font-size:3rem;}
h1{font-size:3em;}

As a challenge, run both codes or variations of it.

Both h1 sizes would differ. The em unit will be relative to its parents element(the container); the h1 will be three times the size of the container.
While the rem unit will be relative to the body, not the parent.

When using units, you want to know when to use which so as to avoid cascading effect.

4. Use CSS layouts

Grid and Flex are powerful tools for structuring the layout of the web. Use them!

Once I found out how similar the bootstrap grid was to css native grid and flex, there simply was no going back for me. Infact I find the css grid much simpler, customizable and with no dependencies.

If for some reason, I have to use the Bootstrap framework, it would definitely not for the layouts.

5. Use media queries

When I started writing responsive designs without frameworks, I used media queries everywhere.

@media and screen(max-width: 500px){
//
}

@media and screen(max-width: 320px){
//
}

@media and screen(max-width: 480px){
//
}

It was a mess and this is why I have saved this for last.

It is impossible not to use media queries when talking about responsiveness. But, if you take note of the points above, you wouldn't need media queries for every breakpoint. Instead, they would be used sparingly and specifically. E.g, the point where the screen goes from being a phone to tablet and tablet to laptop and laptop to the television. Not for every brand of iPhone viewport.

Familiarize yourself with the use of width and max-width. The width can be used to set the width for a screen, then max-width for lager screens all in the same block of code. Neither affecting the other.

Bonus point: Avoid setting a fixed width and height for your image. Either set width or height, it would scale up nicely and responsively. Setting a width and height distorts it and makes it unresponsive.
Pro-tip: Use a percentage to define the widths.