Remember the days when mobile internet was just coming into use?

People used to check nothing but important information like train schedules, weather updates, etc. while on the go. The main reasons behind this limited usage were slow internet connection, high cost of bills and most importantly a very poor user experience. It was not until recent times that a handful of website owners and business houses thought of coming up with a separate mobile version of their website. This approach certainly provided a better user experience, but came with its fair share of disadvantages and overheads.

Current Situation of Mobile Users

The number of mobile devices, presently available in the market, grows exponentially with the passing of each day. This massive growth compliments the rising curve of mobile internet users as well. Current statistics show that the mobile internet usage is set to grow largely by 2015, with an increase of 16% since 2010. It is predicted that in near future the number of mobile internet users is going to surpass that of desktop internet users.

These separate mobile sites have reduced functionality and content, which may not be pleasing to all the users. Suppose a user has accessed the desktop version of a particular website, and later opened the same page from his phone. He may miss out on the information he is expecting and feel irritated. Moreover two different sites will lead to two different designs, build and management. This increases the cost of development as well as the time and might fail to provide the desired user experience.

Another major issue with mobile devices is their significant difference in size. Even if we design a mobile version successfully, we won’t know how it will scale for different sized devices.

When all these reasons sum up they give rise to the concept of Responsive Web Design (RWD). As we go further with our discussion we will see what is Responsive Web Design, why will we use it and when it is necessary.

What Is Responsive Web Design?

RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port), using media queries.

Why Will You Use Responsive Web Design?

Responsive Web Design offers a single site with one URL and one source of content. It has a flexible layout that adjusts to variable screen sizes and gives a better user experience.

1. Recommended by Google:

Google recommends that “webmasters follow the industry best practice of using web design, namely serving the same HTML for all devices, using media queries to decide rendering on each device.” In simpler words, Google believes it to be a best practice to use Responsive Web Design by using media queries. We will be coming to media queries in detail, later. But as of now, understand that media query forms the central part of the backbone for responsive web design.

2. One Website, Many Devices:

One source of content is enough when we are using Responsive Web Design. Irrespective of the size of the viewport of the device, the same content can be used everywhere. This allows to have a single URL for the site whether we open it from a desktop or from a mobile browser. It is particularly helpful for optimizing the website and having a good SEO. Also having one website makes it easy to manage the content.

Responsive Web Design is the best choice for websites if we want to reduce trouble and extra work. Initially, Responsive Web Design may cost a bit more but in the long run it will always prove beneficial for you.

Understanding The Psychology Of Mobile Users

Don’t let the mobile users scroll down through unnecessary information. Working on a desktop is completely different as you have a lot of space and a bit of extra information won’t do much harm. Using a mobile device means the user wants to get things done on the go. There are two things which we need to keep in mind for mobile users:

• The user doesn’t have plenty of time. He will expect to have all the things he needs in front of his eyes. Even scrolling down for multiple times may affect the user experience
• The screen size of a mobile device compared to that of a desktop is really small. We need to prioritize our contents

How To Achieve Responsive Web Design?

There are a few ways using which we can make our website fully responsive

• Flexible Layout
  • Fluid Layout
  • Flexible Grid
• Media Query

Flexible Layout is the easiest way to start with the responsive design. What we do here is mention the width of the container elements in percentage. Now if we resize the screen, the container elements will adjust their width according to the new screen size. But making the wrapper elements responsive won’t solve our problem. We have to place the inner components cleverly to make the page completely responsive. Below is an example code snippet of how we can make the container elements responsive.

HTML :

<body>
    <div class="wrapper">
        <div class="responsive-container">
            Responsive Web Design
        </div>
        <div class="responsive-container">
            Responsive Web Design
        </div>
    </div>
    <div class="wrapper">
        <div class="responsive-container-small">
            Responsive Web Design
        </div>
        <div class="responsive-container-small">
            Responsive Web Design
        </div>
        <div class="responsive-container-small">
            Responsive Web Design
        </div>
    </div>
</body>

CSS :

body {
    margin: 0;
}

.wrapper {
    margin: 15px 5px;
    text-align: center;
}

.responsive-container {
    display: inline-block;
    width: 49%;
    background-color: #cbc;
    padding: 40px 0;
    text-align: center;
}

.responsive-container-small {
    display: inline-block;
    width: 32%;
    background-color: #D4E3C1;
    padding: 40px 0;
    text-align: center;
}

 

 

 

We can use the CSS properties, display: table and display: table-cell to position our divs. Another approach of making a page responsive is using Bootstrap. It provides a fluid grid layout system which automatically adjusts the position of the container elements as the screen is resized. Discussing Bootstrap is beyond the scope of this article. But it is highly recommended for use in responsive web design. The best place to learn Bootstrap is from their website.

Media Query is the main weapon for getting a grasp on responsive web design. It lets you change the styling of the page according to the size and characteristics of the viewport.
Media Query Syntax:

body {
	background: #ccc;
}

@media all and (max-width: 768px) {
	body {
		background: #cbc;
	}
}

And when you check this in your browser, what you get is:

 

 

The above code sets the background color to be #ccc whenever the viewport size is more than 768px. As soon as the viewport size becomes 768px or a lower value the background color is changed to #cbc.
‘max-width’ is just one of the many features that media query has to offer. The other noteworthy features are :

Height & Width Media Features

@media all and (width: 320px) and (height: 780px) {...}

Using Minimum & Maximum Prefixes

@media all and (min-width: 320px) and (max-width: 780px) {...}

Orientation Media Feature

@media all and (orientation: landscape) {...}

Aspect Ratio Media Features

@media all and (min-device-aspect-ratio: 16/9) {...}

Resolution Media Feature

@media print and (min-resolution: 300dpi) {...}

These features can be used depending on the requirement. More than one feature can be used in a single stylesheet. Knowing the syntax and features are obviously not enough to use media query. Below are the few habits which we should keep in mind while working with media queries.

• There are no fixed breakpoints. 320px, 480px, 768px, 1024px are not the only ones and in a lot of scenarios we may not even need separate rules for these breakpoints. The best way is to let our content and design determine the breakpoints for us.
• Don’t just stick to width. There are several other features like orientation, aspect ratio and so forth. Take advantage of them.
• Mobile first. Make this your rule of thumb. Always start your design for the mobile version and treat the layout as an enhancement. The wider your screen becomes the more modifications you can implement on your design. The advantage is that it makes your code smaller and more maintainable. There are older versions of mobile browsers which don’t support media query. Using mobile first approach will provide support for these browsers as well.
• Make use of relative units. Suppose, we have mentioned the font-size to be 12px. This size is okay for a mobile browser but when someone is looking at the same text on a desktop browser it will appear too small. In this scenario we mention the font size in percentage or ‘em’ so the font-size adjusts with the change of the browser size. Not only can we use relative units for font-size but also for the width of a particular div or an image or even in case of media query features.

I hope this article will give you a brief idea on responsive web design and how to achieve it. I hope that starting now, you can write media queries for your own webpage and make it work effectively on different devices.

If you liked my article then do share it. Any additional queries and feedback are welcome.