A Guide for Building Mobile Friendly Responsive Websites

More websites are being loaded on smart phones and tablets than on computers. StatCounter, a research company which tracks more than 2.5 million websites said that more than 50% of visitors are from mobile and tablets. Some countries like India have over 75% of internet usages through mobile devices. This data proves the significance of making your websites mobile friendly. Adding responsiveness to your website can grows traffic and increases Google ranking. Google love mobile friendly responsive websites. To improve the mobile environment for publishers as well as users Google has started the Google AMP. To know more about Google AMP check our article on “The Simplest Way to Implement Google AMP in Your WordPress Site”. If your website is not mobile friendly yet, then follow our guide in making mobile friendly responsive websites.

A Guide for Building Mobile Friendly Responsive Websites

Why are Mobile Friendly Responsive Websites Important?

Mobile friendliness is the basic requirement of modern website. If your website display beautifully on any screen sizes, then you are increasing your range to mobile and tablet audiences. This can result in more sales and conversion rate. Mobile-friendly design will glorify the user experience. Google has added responsiveness as a major factor in its ranking algorithm. So you get more visibility in search results. In many ways mobile friendly and responsive websites can also save time and cost of site management.

Taking Mobile Friendly Test

You have to test your website on a wide range of screen sizes. Google has a tool called mobile-friendly testing tool that helps you to test if your website is actually mobile-friendly or not. All you have to do is enter your URL and run test.
mobile friendly responsive websites

Tools that You May Need

Browsers like Firefox and Chrome have developers tool to help web developers in their work. The Chrome Developer Tools, and Firefox Developer Tools can be really useful. You can easily examine, edit and debug HTML, CSS and JavaScript on desktop and mobile. The next thing you need is the editors or IDE to edit website files. There are number of text editors like Notepad++  and Sublime Text which are lightweight and easy to use. If you want little more advance editor tool then you can use IDE like Eclipse, NetBeans IDE, Aptana Studio PHP Editor and Codelobster.

If you are using WordPress then you may need to set up your WordPress in local development environmentIf you are editing any theme then we recommend you to create a child theme to protect your original theme. You can see our articles “How to Create Child Theme in WordPress” for more help.

Step 1# Set Viewport for All Devices.

Viewport is user’s visible area of a web page and it varies with the device. We can use a meta tag inside the header part to control the viewport. Simply paste this code in the header of your page.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

The “width=device-width” sets width of the web page to follow the screen-width of the device.

Step 2# Building Webpages in Grid-View

Grid view is the idea of dividing any webpage into many columns or grid. A responsive grid view has generally 12 columns and total width 100%. You can easily place elements within this grid format and this will shrink or expand according to the screen size. Start by setting the box sizing property of all elements to border-box.

* {
    box-sizing: border-box;
}
Creating Column Class

Since we want to build responsive grid-view with 12 columns, we need to create 12 classes representing each number of columns. For calling the single column we are naming it “col-1” class. If an element lies in two columns we call it “col-2”. Similarly if we have to place any element in 4 columns we call “col-4” class and so on.

Next we need to calculate the width of each column.

  • Width of one column in percent: 100% / 12 columns = 8.33%
  • The width of two column in percent: 8.33* 2 = 16.66%
  • The width of 6 column in percent: 8.33*6 = 50%

Now using these basic understanding lets create each column classes.

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Now we float all of these classes to the left and give them a padding of 15 px.

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid #ccc;
}
Creating Row Class

Now we can create a class called row to hold the columns. Columns class should always be called inside row class. Using ::after selector we can put the float clear tags in the row class. Here is code to define a row class.

.row::after {
    content: "";
    clear: both;
    display: table;
}

Now with all these CSS classes set we are ready to build our website in grid view. Here is how we use col-* and row class in HTML.

<div class="row">
<div class="col-3"><p> Your content with 25% width </p></div> <!-- 25% -->
<div class="col-9"><p>Your content with 75% width </p></div> <!-- 75% -->
</div>

Now any elements you keep in this format becomes responsive. But the design still does not look good in small devices. To overcome this problem we use media query in our next step.

Also Read:   How to Add Bootstrap to WordPress Themes

Step 3# Use Media query to create break points.

@media includes a certain block of CSS properties which are applied only if certain condition is satisfied. So when the screen size reaches certain dimension we can apply different property to our classes.

I will be adding a breakpoint at 767px. So when the screen size is less than 768px we can assign the column width to be 100%. Simply append these codes in your CSS file.

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Step 4# Making your images responsive

Making images responsive can be done with a simple line of code. Just add this to your CSS file.

img {
    width: 100%;
    height: auto;
}

If you have any videos then you can also adjust them in similar manner.

video {
    width: 100%;
    height: auto;
}

If any this code did not work for any particular image or video may be your previous CSS styles are overwriting it.

Step 5# Giving Final Touch

Your design should be look good and be user friendly in mobile. There may be many elements from your website that become meaningless and unusable in the mobile. It is always better to hide those elements. Make the cross browser testing for all devises. You may also need to adapt the font sizes in the mobile screen. The menu is a very important part any website. You have to make sure your menu is responsive.

Using Frameworks that offer Responsive Design

The process of making mobile friendly responsive websites becomes much simpler and accurate with the help of a framework. Frameworks speed up the development process. It has various advantages like browser compatibility, solution to common CSS problems, clean and tidy code that follow good practices and many more. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing mobile friendly responsive websites. Foundation is another exceptional front-end framework.

mobile friendly responsive websites

Using plugins to make website responsive for WordPress

It can be tricky and may need lots of hard work to achieve the mobile friendliness in your website. If your website is in WordPress then you have one extra benefit of using plugins. Plugins can simplify the complex task of achieving responsiveness. Here are a few plugins you should check out.

You can also use only those themes which are mobile friendly. If you are downloading themes or plugins then always use latest themes and plugins that are updated frequently. The older versions of themes and plugins are likely to cause many kinds of problems including lack of responsiveness.

Conclusion

Websites has to full fill a lot of criteria to be fully mobile friendly responsive websites. Your website should load fast in mobile. It must be easy to navigate, text and pictures must load correctly, forms should submit properly and user experience should be great. The purpose of this article is to give basic idea about how to make mobile friendly responsive websites. You may need more effort and research than mentioned here to achieve your goal of making mobile friendly responsive websites. We hope this article helped you. Thank you for reading our article.

The following two tabs change content below.

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post