Responsive Web Design: Why It’s Important

People love their devices. Tablets, smart watches, smart phones, laptops. Now, there is no problem with this. However, as web developers, it makes our job a bit tougher. In order to account for this change in the way people view content, it is paramount that we respond and adapt.

According to data compiled by Statista, nearly 54% of web traffic comes from mobile devices. With over 4.5 billion users of the web worldwide, this is no paltry sum. So, how do we make sure that our websites and the content therein are displayed the way in which we want, and that our viewers are able to access it without doing the dreaded “pinch and flick” zoom? The answer: responsive web design.

The Problem

In its simplest form, a website is simply a collection of HTML elements rendered to a page, i.e. containers, divs, paragraph tags, images, and the like. Now, we have many tools to make those elements appear how we would like. At its core, responsive design is the idea that we need to program these elements to account for changes in the size of the screen of the device being used. For reference, my iPhone 11 screen has a 420×800 pixel resolution. My MacBook Pro with a 13-inch screen has a resolution of 1280×720 pixels. Naturally, this presents a challenge. No matter! We have responsive design on our side.

Media Query

A key aspect of responsive design has to do with CSS. A media query is just as its name suggests: it is a CSS specification that asks the screen which size it is, and structures the HTML elements to meet those requirements. Here’s a quick example.

@media (max-width: 960px)
{
  .body {
     color: blue;
  }
}

Here, our media query is denoted by @media. Within the parentheses following the initial definition, we can set our criteria. In this example, we have set a max width. What this is essentially saying is, “As long as the width is less than 960 pixels, all of the text in the body will be blue.”

We can also set and/or parameters, like so:

@media (orientation: landscape) and (max-width: 960px)
{
.body {
      font-size: 50px;
      color: blue;
    }
}

In this example, we have two parameters. If the width is below 960 pixels AND the orientation is landscape, the font size of the text will be 50 pixels, and the font will still be blue. This makes sense, because now we can control our font size to fit the landscape view, which will fit more content from left to right than if the orientation were portrait view.

One important note: the media queries should always be done at the bottom of your CSS file, because the file is read from top to bottom. If the engine finds two pieces of CSS that have the same parameters, it will take the one on the bottom, and apply it to all style elements.

Breakpoints

With responsive design, we are aiming to shift the way in which our HTML is rendered in a parallel fashion to the size of the screen. For instance, once a screen hits a certain number of pixels, or is within some range of pixels, we can use a media query to adjust the end-user’s view.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
   .body {
     font-size: 50px;
     color: blue;
    }
}

The above example is the standard breakpoint for a mobile device, such as an iPhone or Android. Thus, when the screen width is between 320px and 480px, the font size within the body will be 50px.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{
   .body {
     font-size: 150px;
     color: red;
   }

}

This example is what is typically used for a tablet, more specifically an iPad. In general, most websites can be considered ‘responsive’ by simply setting parameters to meet these two sets of device parameters. However, if you are willing to put in the time, you can also set media queries and breakpoints that set width and other styles for mobile devices and tablets in landscape mode. For the purpose of understanding the basic principles of responsive design, this is not necessary at the moment, but it is something that will become relevant once you begin to work on enterprise-level applications and web layouts, when thousands of users will view your content on a wide array of devices.

Breakpoints are especially useful when considering the desired layout of your website/application. For example, if you have a blogging website, and your content is broken into a grid system of 3 x 3 blocks, you can set breakpoints to change the arrangement of the elements in the grid system, i.e. a 3 x 3 grid becomes a single column. If you have viewed the same website on mobile and desktop, you have seen this before.

An additional note on breakpoints is that they should no longer be fixed. The beauty of responsive design is that we can set parameters based on percentages and other things, like viewport width. These parameters are called Relative Units of Measurement, as they are relative to the size of the screen. This ensures that, no matter the size of the screen, your CSS and media queries will be able to react to the change, and render the elements in a way that makes sense for that particular screen.

Image Formatting with Responsive Design

The final topic that we will review is the difference between the two, primary categories of images: bitmap and vector images.

Bitmap images are made of pixels, and, generally speaking, lose their quality and sharpness the more that they increase in size. The image file types that are classified as bitmap are ones that you see frequently, including JPEG, PNG, and GIF. Every picture that you see online is a bitmap, because it is created of many, individual pixels of color that coalesce, and become the end image that you see.

Vector images are created by software, and use mathematical formulations, shapes, and curves. They are scalable, meaning they will not lose their quality when expanded. Due to the fact that they are created by software, they do not have the same clarity and nuances of an actual photograph.

Each type of image has its advantages. Vector images do not lose their quality as they expand, because the software simply builds the geometric shapes using formulas. However, they cannot match the realistic nature of a bitmap photograph. Bitmap images are realistic, because they are made of many pixels that capture the essence of the image. Due to the fact that they are made up of pixels, they take up more file space, and can only be square or rectangular in shape.

So, I hope that this quick introduction to responsive design was helpful. You’ll be giving your viewers the best format for every device in no time! Happy Coding.