What is responsive website design?

April 4, 2017

What's the goal?

The idea behind responsive web design is to give developers the ability to make a single website look good on every device. This is becoming increasingly important due to the amount of searches being made on mobile devices. Google says there are more searches taking place on smartphones and tablets than on desktops in 10 countries. This number has since increased making it impossible to ignore the need for a "responsive" website.

Why is this important?

When users pick up their smartphones and make a search for products or services that your business offers you want your website to be visible. Without a responsive website, customers can become easily frustrated while moving on to the next opportunity causing you to lose leads and sales. There are also search engine optimization penalties which could cause your website not to rank on mobile devices.

So... how does it all work?

There are a few factors that affect the responsiveness of a website, however, the one most ubiquitous and the one I will elaborate on is a media query. A media query is code that tells the browser how to render content within a document based on certain variables that are defined (e.g. media, width, height, color, etc.).

‍

Let's take a look at a practical example of how a media query can effect the display of a website:

‍

‍

Now let's see what the issue is:

‍

When the same website is viewed from a smartphone, it becomes difficult to read.

‍

We'll add a media query to tell the browser to make each of the columns 100% in width when viewed on screen sizes smaller than 501 pixels:

‍

This line of CSS/Sass tells the browser to make the width of each column 100% when the screen is smaller than 501 pixels.

‍

The result:

‍

Here is the website after the media query has been added.