What Makes a Website Responsive?

By Responsive DAD     |

We are going detail into how responsiveness works in a website and look into the code that makes it so. The knowledge level for this is in range of a novice developer, so everyone can pitch in, because you and I know everyone has a developer in them.

So, what is responsiveness and what makes a web page Responsive? These are fundamental properties in web development and let’s answer these questions one by one.

What is responsiveness?
Responsiveness is the website’s ability to adapt to the dimensions of any device viewing the website. Whether the user uses a 42” ultra HD monitor or a 3” internet access smart phone, the website he sees will be legible and easy move through. The sizes of all elements in the webpage will shrink or enlarge according to the device screen dimensions. The layout also will change according to what device is used to view the website. There are a number of related terms like “flexible”, “liquid”, “fluid”, and “elastic” to relate to the form of layout being used.

responsive_post_inner_image_1
Let’s look at some examples:
In the above image taken from its wiki page, we see that the same webpage on different devices. As screen size decreases the amount of content visible on the screen also decreases. And also, the layout of the content changes. If you look closely you will also see that the content size of images and paragraphs reduces considerably from large screen devices to small.

In another example (cool illustration BTW):

responsive_post_inner_image_2

so now you know what responsive is, now comes the more important part of the question, how do you make a website responsive?
How do you make a website Responsive?
There are many ways you can follow to achieve a responsive design, you can use a custom plugin or js library to do it. You make get responsive attributes from the framework or ecosystem you use. You can get responsive designs also from custom css coding. We bring you the easiest and widely used method to make a website responsive, by using “Bootstrap” plugin and accompanying css and html coding. Firstly, we need a method by which your websites are zoomed and fit into the screen dimensions.

For this we use an html code like so:

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>

This makes the webpage zoom in and fit to screen resolution rather than being illegibly small. The Next code segment makes the website work on different types of browsers:

<meta http-equiv=”X-UA-Compatible”  content=”IE=edge,chrome=1″>

The other code segment we use is a tag to show that the website is mobile device friendly:
<meta name=”HandheldFriendly”content=”true”>

responsive_post_inner_image_3
Note that these are meta html tags that profile additional information to the parser in processing the webpage and written inside <head></head> section of html page. Now we link the js and css files of bootstrap into the html code you can use a cdn link to do so or a local file to use the plugin. This tutorial shows you the different options to do this.
Bootstrap uses classes to form its grid structure, unless specified in the css the grid takes
shape of the content that it has inside.See below column classes being used to make the grids. As code the 3 equal code will look something like:

The html content can range from image tags, video tags, iframe tags or any kind of html tag; the content inside it will shrink to grid size or enlarge on small screens. These are fundamental steps you need to take to make your website responsive.To get custom development of websites as per your designs you may use our efficient services. Visit us at:http://www.responsivedad.com/ know in detail of our services at:
http://www.responsivedad.com/about/
Credits & Additional information you may need in the following links:·

Responsive Web Design Wiki·

HTML Responsive Web Design – w3schools.com·

Bootstrap TutorialBootstrap Examples