All You Need to Know About Responsive Web Design

Last updated
July 28, 2021
Categories
Read time
12 min

54.8 percent of global traffic comes from mobile devices. Let’s stop here for a second and reread the phrase. Basically, in 2021 half of all the traffic comes from smartphones, tablets, and other similar devices.

This means that if you have your website designed for computers only, you’ll lose half of the traffic that comes to your webpage.

It’s pretty sad, we know. But there is an easy way to fix this: through a responsive web design. Don’t get confused with the term here; we’ll help you to figure it all out.

So without further adieu, let’s jump straight to it:

Table of Contents

What is a responsive web design?

For the beginning, let’s make sure we’re on the same page by clearing out some definitions. First: what is responsive web design?

Basically, responsive web design refers to the approach where your website adapts to the different screens and window sizes. In other words, if your visitor stumbles upon your website with their smartphone, they won’t be confused and scared off by all the bulky columns and giant texts, which were obviously intended for desktop users only.

Instead, your website would match the visitor’s screen with the responsive web design approach and stay intuitive and easy to navigate through as it is on a computer screen.

1. How did responsive design become a thing?

Now that we understand what responsive design is, let’s see how it differs from the traditional web design approach.

Back then, in the 1990s, when the first websites were being created, it was almost impossible to access them through mobiles. So logically, the web developers and designers would make them having only the computer screen in mind.

This worked fine until, in 2016s mobile traffic started to boom, conquering half of the global web traffic. The reason is that websites became way easier to access with smartphones, tablets, and other mobile devices.

In fact, people had web access right in their pockets, and they could enter different websites in a metro, on a lunch break, and pretty much every other time: mobiles started slowly to take the place of the computers.

This meant that the traditional web design that was created for the computer screen only was no longer a thing. Many of the websites have underestimated mobile-friendly websites’ power and continued to keep only one version of their page. This decision eventually brought them a huge loss of traffic and potential customers.

So the businesses that were fast to understand that they should switch to a different web design approach ultimately won the game.

But responsive web design isn’t the only way to make your webpage mobile-friendly. There is also an approach to web design called Adaptive Web Design. Let’s understand the differences:

2. Responsive Web Design VS Adaptive Web Design

Both responsive and adaptive designs are mobile-friendly approaches. Back in 2015, Google recommended switching to responsive web design, but at the core of the recommendation was the idea to have more mobile-friendly websites. However, you can get a mobile-friendly webpage with other approaches, too; one of them is the adaptive web design. So what’s the difference?

Responsive web design offers a more fluid approach adapting the website to the size of the screen, and it does not matter what the target device is. It does so by using CSS media queries and changing the style, display type, width, height, etc., for the specific device every time.

Adaptive design is not as fluid. Instead of using CSS queries, it creates distinct static layouts for different screen sizes. So the designers could choose six standard sizes and create a separate design for each. The six typical screen widths include:

-320px
-480px
-760px
-960px
-1200px
-1600px

So the adaptive approach would detect each time the screen size the visitor is using and provide the appropriate layout or the one closest to it.

To make it more clear, here’s a visual graphic illustrating the differences of adaptive and responsive web designs:

Adaptive web design vs responsive web design

It might seem that adaptive design requires more work and takes more time to create. But the truth is, a responsive approach can be way harder for some. For instance, if you use media queries improperly (or entirely ignore them), then you will have significant performance issues with your website’s display.

So,

3. When to use adaptive design?

Most of the time, adaptive design is used to redesign the already existing website. So, if you have a webpage, but it is not mobile-friendly enough, the adaptive method is perfect for you. It allows you to create multiple viewports for the already existing structure.

It’s completely up to you how many viewports you choose for your website; it depends on your brand and budget. However, as we’ve mentioned, going with the six basic screen sizes is the standard solution.

The best way to use this approach is by starting from the low-resolution viewports and then slowly building your way up to ensure that your design does not get constrained by the content.

Boost your conversion rate:
Get a website UI/UX design review!

4. When to use responsive design?

Now, responsive design is more appropriate for the cases when you make your website from scratch.

The majority of websites nowadays use a responsive approach: approximately 1/8 of all the websites now are responsive. Moreover, today designing a responsive webpage has been made easier through popular CMS systems like WordPress, Drupal, and Joomla.

Indeed, the responsive approach does not give you as much control as the adaptive, but it is comparatively easier to create and maintain it. Overall, with this approach, you will need to have all layouts in mind. Here, you would create mid-resolution viewports and then use media queries to adjust your resolutions later on.

As responsive design is more popular these days, we recommend building your webpage with it. The adaptive web design is more appropriate for those who already have their website and don’t want to rethink its strategy from scratch.

So, now let’s understand how you can use a responsive approach for your next website:

How to Build a Responsive Web Design?

To start with, you will need a solid knowledge of CSS and HTML to build a proper responsive webpage. So, our first step is:

1. Responsive web design CSS and HTML

If you want a good, responsive web design, CSS and HTML are all you need to start. These two languages form the design’s foundation, and without them, you can’t do much. In short, they control the layout and content of your page, no matter what the web browser is.

Let’s understand what each of them does separately.

HTML takes care of the elements, structures, and content of your page.
Here’s how you would insert an image to your website using HTML:

				
					<img src="image.gif" alt="image" class=”full-width-img”>
				
			

On the other hand, CSS is used to edit your design and layout elements and include them on your HTML page. CSS is usually included in your HTML document’s <style> section. You could also use a separate stylesheet file for it.

Here’s how you would edit the width of your HTML image at the element level:

				
					img {
width: 100%;
}
				
			

You could also target the specific class “full-width-img” with just a period.

				
					.full-width-img {
width: 100%;
}

				
			

You could also use CSS to control your design beyond its height, color, and width. This is how responsive web design CSS is practiced, but to fully make your website responsive, you will need to combine it with the technique of media queries.

2. Media Query

Media Queries are an essential part of CSS3. They help you render content and adapt it to various factors such as screen size or resolution. As this quality lies at the core of responsive design, you need to know how to implement media queries correctly.

But first, let’s understand how they work. Before the browser loads and displays your webpage, it retrieves the media information via the media queries. Here, your media queries provide it with a customized display that matches the properties of the device the browser is on.

Media queries make the responsive design so easy because they do not demand that you specify the appropriate screen sizing and resolutions for each device.

Media queries work similarly to the “if-clauses.” So, it’s basically checking if the screen’s viewports are wide enough or too wide and then executing the appropriate code.

Here’s an example:

				
					@media screen and (min-width: 780px) {
   .full-width-img {
    margin: auto;
    width: 90%;
    }
}

				
			

Basically, what this code says is:

If the screen is at least 780 pixels wide, then the images categorized with the “full-width-img” class will take up 90%, allowing the screen to be automatically centered by evenly wide margins.

3. Fluid layouts

The modern web design heavily relies on fluid layouts. With the fluid layouts, your layouts resize when the window size changes. So instead of using the standard fixed pixel width, this new approach defines areas of your page using percentages.

In short, instead of creating a 960 pixels content area, your developer would create a layout that takes 80% of the screen. The columns, too, could be sized accordingly. You could have two 15% space-taking columns, for instance. These percentages allow your designed layouts and elements to shrink and expand according to the screen size.

Here’s the CSS that shows the differences between fixed and fluid layouts:

Fixed:

				
					content { width: 960px; }
.left, .right { width: 180px; }
.middle { width: 600px; }
				
			

Fluid:

				
					.content { width: 80%; }
.left, .right { width: 18%; }
.middle { width: 64%; }
				
			

Now, let’s touch upon another important topic in responsive web design:

4. Bootstrap

In responsive web design, Bootstrap is what makes the whole process easy.

It is one of the most popular open-source, front-end toolkits that helps to customize responsive websites quickly and simply. Bootstrap features various Sass variables, mixins, prebuilt components, responsive grid systems, and more.


Bootstrap does not demand you expert knowledge of web design. It is accessible to professionals and experts alike. But it does not mean it isn’t flexible. On the contrary, with Bootstrap, you can quickly build a website according to your requirements.

To start your responsive website Bootstrap journey,

Let's first set it up:

To start using Bootstrap, simply insert the below code in your webpage:

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

It is the meta tag that tells the browser that you are about to build a responsive website. How? It asks the browser to set the website’s width according to the device width and set the scale to 1, which is the default website scaling.

Now, it's time to hook up:

Don’t get too excited: we’re talking about hooking up the Bootstrap. For that, you need to link your Bootstrap libraries by using the code below:

				
					<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet href=css/bootstrap-responsive.css">
				
			

Put the following code in the index.html file, which is below the viewpoint meta tag.

Remember that you will need to download Bootstrap into your development folder and then extract it for the code to work properly. By doing this, you will create two folders in your main development folder. It should look something like this:

All left to do from here is start…

The building process

There are five major components for the responsive website:

  • Navigation
  • The information area
  • Section with contents
  • Right sidebar
  • and the Footer

Let’s start with the first item,

Here’s a code example for creating the navigation bar:

				
					<nav class=”navbar fixed-top navbar-expand-md navbar-light bg-light”>
<div class=”container”>
<a class=”navbar-brand” href=”#”>Responsive Bootstrap Website</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarCollapse” aria-controls=”navbarCollapse” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarCollapse”>

/* left navigation links */
<ul class=”navbar-nav mr-auto”>

/* active navigation link */
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home
<span class=”sr-only”>(current)</span>
</a>
</li>
 
/* regular navigation link */
<li class=”nav-item”>
<a class=”nav-link” href=”#”>About</a>
</li>
 
/* more navigation links*/
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Blog</a>
</li></ul>
 
/* right navigation link */
<ul class=”nav navbar-nav ml-auto”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Login</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Register</a>
</li></ul>
</div>
</div>
</nav>
				
			

Next, you need to get your information up, which is pretty easy, thanks to the jumbotron class. Also, don’t forget to use the div tag to keep things organized.

For our third step, we will need to create content using the col-md-* structure. Once done, we will get our right sidebar ready and finally make the footer that provides business information and other copyright details.

And that’s it: your basic responsive website is ready with Bootstrap. We hope this article helped you figure out the basics of responsive web design so that you can create more mobile-friendly websites from now on. And most importantly: enjoy the traffic to your webpage and witness the boost of your conversion rates!

General FAQ

The main benefits of responsive web design are its flexibility, cost efficiency, wider reach, and better user experience. They also allow your webpage to be more SEO-friendly.

It depends on which agency or designer you choose to trust your responsive web design. If the designer has a long and impressive experience, then it might get a little too costly. However, you can always find affordable solutions. 

Yes, it is. You just need to get some advanced programs and designs to transform your current website into a more responsive one.

Leave a Comment

Your email address will not be published. Required fields are marked *

About Passionate

Passionate is a full service digital agency specializing in providing design, development, marketing and hosting solutions for startups, SMEs and brick & mortar stores.

At Passionate we pride ourselves on our meticulous attention to detail, speed of delivery and the genuine advice we provide throughout the process! Thanks to the broad set of expertise of our senior experts we are able to plan and work on multiple aspects of your project simultaneously optimizing the overall timeline and cost. 

Share on:
Facebook
Twitter
LinkedIn
close

I hope you're enjoying this blog post!

If you want my team at Passionate to help your online business excel, just book a call.

Double your conversion rate in 6 easy steps

Get the most out of your website with our free PDF: