Make your website mobile responsive within 30 minutes

After mobilegeddon things in mobile search engine have rapidly changed. Now if you have a responsive web design then you have better chances to rank higher in Search Engine result pages. Otherwise, getting a decent ranking on mobile search engine will not be easy for you, even if you have great amount of backlinks. So today we will talk about how we can make a website mobile responsive within few minutes.

This small tutorial will take references from reputed web developer’s site like w3schools and Codecademy. We will also talk about bootstrap.

Viewport

First thing first, Viewport is basically the visible area of a web page which a user can see. So according to the size of the screen, the size of viewport will change which means that your html elements have to change their size according to the width and height of the screen in order to make a responsive web page or if they are not adjusting themselves by viewport size, then your web page is not responsive which means lower ranking in mobile SERPs.

Before the introduction of mobile devices such as Smartphones and tablets  all the webpages were build for just desktop PCs but when people start surfing internet with mobile devices, obviously it was not easy for mobile browsers to show the whole page with a comparatively smaller width and height than a computer screen.

To fix this, browsers of mobile devices scaled the size of webpages to fit them on the screen. This was a quick but not a perfect fix.

But with HTML5, there was an introduction of a better fix for the problem. And that was a method to let web designers play with the viewport, through the <meta> tag.

And that was a very necessary introduction indeed. Now before starting a webpage or even if you have an already developed webpage you should add this <meta> viewport element before closing head tag. (i.e. </head>).

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

[/php]

• You can read more about Viewports here.

Box Sizing

If you have a website that has many columns for example you have a three column webpage which has 3 different areas, then you should make sure that all your HTML elements have the box-sizing property set to  border-box.

This will tell the browser to also include padding and border in the total width and height of the elements.

This is just a small but a severe change that will help you to make your webpage responsive on all devices. Just go to your CSS stylesheet and add this before all the CSS styling:

[php]
* {
box-sizing: border-box;
}
[/php]

Media Queries

Media query is a new CSS technique which was introduced in CSS3.

This helps a web developer to tell the browser that how a web-page should look on any special width or height. For example, how must a webpage look when the device width and height is less than 1024×720 respectively or how should a webpage look on 620 width and 300 height.

You will need to use @media rule to only include the block of CSS properties if the certain condition is true. For example, only add this styling when width of webpage is more than or equal to 500px.

So if you want to style your webpage for devices which have less or equal width to 500px, then use this CSS rule:

[php]

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

[/php]

This CSS rule is very helpful for any web developer. Consider that you have a div which has 500px width on a normal desktop device, but on a mobile device you want it to have a width of 200px, if this is the case then you can easily use the @media rule to tell the browser to show that div with 200px width on mobile devices.
For instance, your CSS styling should be:

[php]

div {

width: 500px;

}

@media only screen and (max-width: 500px) {
div {
width: 200px;
}

[/php]

Bootstrap

Bootstrap is a famous HTML, CSS and Javascript framework which ease the difficulty for a web developer when it comes to creating mobile friendly webpages.

You can easily develop a responsive webpage with great design by just using Bootstrap. To use Bootstrap just add these two lines of code before your </head> tag:

[php]
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

[/php]

Now if you want to learn Bootstrap then you can have several choices. You can learn from Codecademy or w3schools or any other platform that you like. However, I will recommend both w3schools and Codecademy. Codecademy does not have a comprehensive tutorial for Bootstrap but you will have a basic introduction in their CSS tutorial.

However, w3schools has a separate tutorial for Bootstrap.

Testing

Now it’s time to test our webpage to see that whether it is mobile responsive or not. For that we will use a Google mobile friendly test tool. Just visit the page, enter a web page URL, click on analyze button and let the system analyze your website. After few seconds a result will appear on your screen. Hopefully, you will get a desired result if you have followed the instructions given on this page, if you have any difficulty then let me know. Till next time, Good Bye.