Responsive Web Design: The Use of Media Queries

Have you ever wondered why different websites we visit probably each day has a different layout on different devices like mobile phones and laptops?

The answer is not far-fetched. What makes it look differently is called “responsiveness”.

There are four ways of achieving responsive web design..

First, The use of Media Queries

Second, The use of Flexbox

Third, The use of Grid system

Fourth, External framework e.g Bootstrap

In this article, we will delve into the use of Media Queries to achieve responsive web design. We will answer these four questions viz

1. What is Media Query?

2. What consists of a Media Query?

3. How can you choose a breakpoint?

4. Why is it important to use media queries for responsive web design?

Let's give answers to this question.

1. What is a Media query?

Introduction: A media query is a CSS technique that allows you to apply different styles and layouts to a webpage based on specific characteristics of the device or screen it is being viewed.

2. What consist of a media query?

Media queries are a key part of responsive web design. A media query consists of the media type, which tells the browser what kind of media is being used (either print or screen). It also has a media feature, which is a rule that must be passed and acts as a criterion for the styles to be activated. Different features such as “max-width”, “min-width”, “orientation”, “ hover”, etc.

The feature we tend to detect most often to create responsive designs is the viewport width, and we can apply CSS if the viewport is above or below a certain width or an exact width using the max-width, min-width, and width media features.

These features are used to create layouts that respond to different screen sizes. For example, a web designer creating a web page might decide to change the color of an h1 element. Originally, if the CSS style for this element was set to the or of blue and wants to change to red if the viewport width becomes smaller, a media query can be used to achieve this. Using media query, the media type can be the screen, the media feature let's say max-width of 600px, and the property of the h1 element, colour set to red. What this query means is that, if the h1 element is displayed on the screen with a viewport lower than 600px, then the h1 element colour should change to red. Now, if these conditions are met, the colour change is activated.

In practice, using minimum and maximum values is much more useful for responsive designs so you rarely use width alone.

There are other media features. You can test for the orientation which takes the value of landscape or portrait. A standard desktop view has a landscape orientation. Testing for orientation can help you create a layout that is optimized for devices in portrait mode.

We also have the hover media feature where you can test if the user can hover over an element. Be reminded that touchscreen or keyboard navigation does not hover but mouse or trackpad does.

With all of the different possible media queries, you may want to combine them or create a list of queries that could be matched. For example, if the font size of a paragraph element on a mobile view is 25px and you want the font size increased to 75px on a standard desktop view. In this case, you can combine different queries and apply CSS rules to them. The media query for this exercise can be setting the media type to screen, the media feature min-width to 600px, and the landscape orientation, then applying the CSS rule I.e. font-size: 75px. So if these conditions are met, the font size of the paragraph element changes from 25px on a mobile view to 75px on a standard desktop view.

3. How do you choose a breakpoint?

In the early days of responsive design, designers would attempt to target very specific screen sizes. As a result of this, a lot of the sizes of screens of popular phones and tablets like Nokia 3310 😁😁 were published so that designs could be created to neatly match those viewport.

But now, there are far too many devices with a huge variety of sizes to make that feasible. A better approach is to change the design at the sizes where the content starts to break in some way. The points at which a media query is introduced are known as breakpoints.

However, you can take two approaches to a responsive design. You can start with your desktop or viewport view and then add breakpoints to move things around as the viewport becomes smaller. Or you can start with the smallest view and add breakpoints as the viewport becomes larger.

The second approach is described as mobile-first responsive design and is quite often the best approach to follow.

4. Why should you use Media query?

For at least three reasons.

a) For device adaptability

b) Improve User Experience

c) SEO benefits

a) For device adaptability: So you could be thinking why it is necessary for a website to be adaptable?

b) Improved User Experience: How would you feel if you visited an e-commerce website to purchase a pair of glasses and you realize that the font size of the “buy now” button appears so large that you need to keep your phone at a certain distance just to click since you do not want to destroy your eyeballs on account of buying a glass?

c) SEO benefits:  Google, for instance, considers mobile-friendliness as a ranking method, meaning that responsive websites have a better chance of appearing higher in search engine results(SERPs) when users search on mobile devices.

Conclusively, there is no right or wrong way to use media queries, you should experiment and see which works best for your design and content which provides an optimised user experience across various screen sizes and resolutions.

The goal is to make your users have a wonderful time on your website. If it is unresponsive, use media queries