The importance of responsive design

What is responsive design?

Responsive design is a method of building a website where the main focus is to ensure all of the content is optimized for a wide range of screen sizes and will adapt automatically depending on the device used to view the website. This has become increasingly important over the last decade as mobile devices get better and more available every year.

There are a few ways to achieve this, I’ll give a brief overview of a few commonly used methods.

Why is this important?

For a long time, people didn’t walk around with powerful computers in their pockets. If you wanted to access the wonderful world of the internet you needed a desktop computer or a laptop.

Well, as everyone is well aware things are much different these days. By the end of 2020, there were an estimated 4.6 billion users on the internet and a staggering 56% of these users accessed the internet using a mobile device.

I love my laptop, and I believe there will always be a need for larger screen sizes. But as far as innovation goes, I can only assume that the use of mobile devices will be on the rise for quite a while.

Statistics on responsive design

73% of web designers think that one of the greatest reasons a visitor will leave a site is a non-responsive design.

With so many users, the popularity of social media ( which is mostly used on mobile devices ), and the rate of growth over the last 10 years this issue will continue to grow. The mobile-friendly websites will be the ones that see the best results.

94% of users will judge a website by its responsive design.

Everyone knows the importance of first impressions, and it’s no different while surfing the web. If your website looks bad, loads slowly, or doesn’t function correctly when being viewed on a mobile device, it simply will not perform as well among your consumers.

Google will rank your site higher for being responsive

Not only will your website perform better with your users, but it could also be the difference in them finding you in the first place.

Google will prioritize mobile-friendly sites, which is just another reason for YOU to prioritize it.

Most common methods

CSS

CSS has some solutions to the responsive problem. CSS Grid is the first solution to attack the layout problem and is might more lightweight than a framework like bootstrap.

It is a two-dimensional grid system that allows you to customize columns and rows to your liking, and easily make changes using media queries.

I’ll take a moment to show you an example layout with CSS Grid.

<section class="grid">
  <div class="item-1">one</div> 
  <div class="item-2">two</div>
  <div class="item-3">Three</div>
  <div class="item-4">Four</div>
  <div class="item-5">Five</div>
</section>

Once everything is fixed up with a class name, we can add the CSS that allows us to lay these items out in a grid format.

.grid{
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: auto auto;
}

After setting display to grid, you can then specify the size and quantity of columns and rows. The result of this code would make two columns 200px wide, and evenly distribute all of our elements within them. The height of the columns is set to auto, so it will resize to fit the fifth element.

Bootstrap

Bootstrap is a popular Front End Framework used to design websites.

Their grid system is a flex-box grid system used to build layouts using a mobile-first design.

They use a combination of containers, rows, and columns that are responsive based on breakpoints you set in your code.

You get the freedom of 12 columns across the page which you can group to make larger columns, along with a total of 6 predefined classes that you can customize with sizes ranging from xs to xxl.

For equally sized columns, you can stick to the “col” class

<div calss="container"
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Or to specify how much space a column takes up, you can use the size classes mixed with numbers to specify the size of the grid you desire.

The total number per row will always add up to 12. So you could use two “col-6” classes that would take up half of the screen each, three “col-4” classes, or a “col-8” next to a “col-4.

You can also specify a different breakpoint for different screen sizes.

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>

A layout like this would start each column at 50% and change to 33% on a medium-sized screen like a laptop or desktop.

This allows you to truly customize your breakpoints for every scenario, it’s a great system that can save you many lines of code once you are familiar with it.

Other Frameworks

There are plenty of Frameworks like bootstrap to look into, most of them use a grid-based system but they all vary in their own way.

Some of the most popular names are Foundation, Materialize, Semantic UI, and Material UI.

They are all worth checking out, and you may find that you like some more than others. As with anything, there are pros and cons to each, and sometimes a framework just won’t jive well with your design style.

Future of web design

The world is changing faster now than it ever has. I believe there will be a massive shift towards mobile websites and mobile applications.

We live in a time where speed and convenience are the number one priority and everyone has a smartphone.

The businesses that cater to those needs and understand the importance of being mobile-friendly will without a doubt outperform those that do not.