Set up responsiveness on your website in 5 steps

Hello,

I’m going to talk about responsiveness today.
First, what is a responsive website?

Simply a website that fit to every screen. Desktop, mobile, tablet,…

Easy no?

Well in the case of this website, I use an open source template that simplifies my work. It works great on a desktop but this has an ugly face on a mobile phone.

It’s a bit sad in 2019 that your website doesn’t suit to mobile phone. I let you read this article to understand that mobile browsing is really important.

So, I decided to find a solution to this problem. I browsed the internet and found a nice Jquery lib : Restive

This lib is easy to use and doesn’t need a lot of configuration.
You first need to get Jquery. Not so complicated… No?

<script src="jquery.min.js" type="text/javascript"></script>  

Then, generate or use a CSS file for your website. In my case, I created a second CSS file only for the responsive part to simplify lecture of my CSS rules.

<link href="restive.css" rel="stylesheet"></link>  

And then add restive lib to your website:

<script src="restive.min.js" type="text/javascript"></script>  

That’s it for the configuration/install of Restive.

You then need to set up Restive to manage the different screen sizes that we will use:

$( document ).ready(function() {
$('#page').restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280'],
force_dip: true
});
});

The breakpoints option is used to define breakpoints.
The classes option is used to define classes to be added to the JQuery selector.
force_dip set to true tells restive.js to consider pixels as device-independent (this is important for retina devices).

And that’s it. Easy isn’t it?

You can now define CSS rules by using classes defined and generated by restive.
For example, in my case, I decided to hide the left column of my website when the device has a 480 width resolution:

.css-480 > #header{
display:none;
}

You can now start your own responsive website by following this little tutorial.