What is a Responsive Web page?

To put it simply- a responsive web page is a page that responds differently to different screen sizes such as desktops, laptops, tablets, mobile phones, etc.

If you have created a web page on let's say your laptop and haven't focused on making it responsive, there is a high chance when you open the same webpage on your mobile phone it is going to look really bad.

The reason for this is simple- the HTML elements that make up your webpage will no longer get enough space to render on a smaller screen size (a mobile phone) as they were getting earlier.

Before we move on to how to do it, let's look at some advantages of it-

• The first one is obvious, a responsive web page will be easily readable by a larger group of users as they can be accessing your website on any kind of device.

• The second one is a little bit more interesting and has something to do with SEO (Search Engine Optimization). When we do a Google search for something, Google (or any search engine) runs an algorithm in the background which scans millions of websites and sorts all of them in order of what it thinks to be the most relevant to the least relevant as per our search keywords. That's how we usually get what we are looking for on the first page of the search result itself. The way it decides which website to put at the top and which one to put at last has so many factors but one of them is to check whether a website is responsive or not. And that's fair enough! Because any search engine's primary objective is to rank those websites better that provide maximum value to a user. So, the takeaway is if you want your website to rank better and better in Google's search results list, you want to make your web pages responsive. (Try Mobile-Friendly Test provided by Google to test your websites)

Now, how to make a responsive web page?

One way can be to design separate web pages for different screen sizes. But that clearly would be a highly redundant and inefficient way.

The other way would be to design a web page in such a way that looks good almost everywhere which is what should be done. You can implement them on your own mainly using CSS (Media query and stuff like that) which is somewhat hectic but it gives us fine-grained control over everything. Or perhaps the smarter way in most of the cases would be to leverage the power of frameworks like Bootstrap to achieve the desired result with much lesser effort. Having said that, it's always good to know the underlying concepts even when using a framework to better understand what's happening behind the scene. In case you don't fully understand what a framework is you may want to check out this- What is Bootstrap? Why use it?

The other thing is where to test how the webpage will look on different screen sizes?

Again, one way is to get it rendered on each and every possible screen size device. But that would be such an impractical thing to do.

The other way and the much simpler way is to design the webpage on a single device and then resize the browser window to different sizes to simulate how our webpage tends to respond to them.

Equipped with all the basic stuff of responsiveness, we are now ready to see how Bootstrap facilitates responsive behavior with its powerfully implemented classes. And for that, we need to dive deeper into a very important concept in the next post called visual breakpoints in Bootstrap.

Meanwhile, if you want to know more about responsive web design this video might be useful- https://www.youtube.com/watch?v=zF6VSky4SIc&ab_channel=JesseShowalter