Responsive Web Design: The Art of Media Queries

In this dynamically growing digital world, Responsive Web Design becomes highly essential. Users visit your website from an array of devices and browsers, but the problem arises if your website fails to respond to any of them. That problem can be handled with the help of Responsive Web Design Technique.

Read Also: 5 Tips for Having a Responsive Web Design

What is Responsive Web Design

Responsive Web Design makes sure that your website works for all the devices and browsers of different size and resolution. It also assures that your website is smart enough to resize and adapt itself according to the type of device it is rendered to.

In the age of increasing smartphone usage, web design companies design and develop websites in a way that they are optimized to be used on iPad, iPhone, Android and other platforms. Professional web designers and variou platforms such as Wordpess- a web design company, use Responsive Web Design to provide a better user experience.

Related Blog: Best Tips To Improve Your Responsive Web Design

How does it work

Let’s have a look at Web Design Application created by Ethan Marcotte – who is also the first person who defined Responsive Web Design.

Related Blog: Responsive Web Design – How Does It Work


As you can see in above image, every single piece of content on the website renders perfectly, irrespective of the device’s screen resolution or size.

The professional web designers should know how to leverage fluid, proportion-based grids, flexible images and media, and CSS Media Queries to create a responsive website.

Flexible Layout/Fluid Grid uses proportional sizes to fit to every page, Flexible Images and Media uses CSS to make sure that images or media do not overflow out of their containing elements, and Lastly, the most effective one – CSS3 Media Queries are used to detect browser resolution and act accordingly.

The Art of Media Queries in Responsive Web Design

Media Query is a CSS3 technique that allows a web page to use different CSS styles based on factors such as screen-resolution, view port, device size, and orientation. These factors are termed as media rules.

Basically, a media query consists of a media type and can contain one or more expression which resolve to either true or false.

  1. Media Type defines the type of media or device on which the particular CSS rule should be applied to. There are four options of media type – all, print, screen, and speech. Mainly the media-type “screen” is used which includes tablets, computer screens and smartphones.
  2. Expressions/ Media Feature helps to further target devices based on different device features such as width and height. The ones which are used more often for Responsive Web Design are max-width, min-width, max-height, and min-height.
  3. CSS Style Rules are the CSS rules listed inside the curly braces of media query.

Let’s consider media query examples for different viewports:

As you can see in media queries above, all of them have: media type as “screen” for various types of devices, media expressions as min-width and max-width, and curly braces which include CSS styles for a particular query.

There is another way of using media query using link tag as follows:

<link rel=”stylesheet type=”text/css media=”screen and (max-device-width: 480px) href=”css_classname.css” />

Though here it becomes a tedious task to write media queries for all devices you support for your web application. It’s preferable to use the inline style.


To sum up all, Responsive Web Design acts as a foundation for your presence on the web, handling a wide range of scenarios smoothly. It not only makes your website work well on different devices but also helps you stay ahead of the competition in the world of digitization. With increased mobile usage, the technique of Responsive Web Design is also improving every day.



Why should you have Mobile-Friendly websites

Mobile Friendly Website

A mobile-friendly website is more than just a necessity today. To be successful in this competitive market, it is important you follow your customers. You need to go where they are, bud into their day-to-day activities, trying to improve your brand recall. Mobiles are taking over desktops heavily too, especially when it comes to internet usage. Google recently reported mobiles have taken over desktops in terms of search traffic, a big change for the new century.
When all your customers are using phones to access everything, from payments to movies, it becomes paramount for you to offer that option to your customer. According to Smart Insights, 33% of your customers begin browsing with a branded website, making web content as important.

Checking stuff on the go is very easy, and an option many of your customers already use. Customers are likely to come back to your website too if you have a mobile-friendly website, according to McKinsey & Company. If you do not have a mobile-friendly website, you’re losing out business and customers. They would rather go to your competitor.

Better Customer Access

Your customers want you to go mobile-friendly, mostly because they are either using their phone or tablet to visit your website. With responsive websites and intricate code, you can easily track your customer’s movement on your website, providing you deeper insight into what they like and what they don’t. There’s a good chance that more than 50% of your web traffic will come from Mobile. If you do not have a mobile-friendly website, half of your customers are not serviceable.

Mobile Friendly Test

Better Visibility

Google, too, has made massive changes to its algorithm. Mobile-friendly websites now rank higher on the search engine, potentially improving your visibility. A higher rank definitely ensures a better visibility, while a low score would put you right at the bottom of the pit, on a page never visited by your customer. Google’s own tool helps you check how mobile-friendly your website is.

Better Turnover

While attracting customers to your website and improving your ranking, you are also increasing your business. This goes especially for e-commerce websites, with mobile shopping taking over desktop shopping. A mobile-friendly website would lead to better sales and conversions. A good website would compel customers to come back.

Mobile Shopping Taking

Going mobile-friendly is a necessity, for if you don’t, you might just end up ignoring more than half your customers.
Websites which are not mobile-friendly are quickly becoming defunct, making way for those which are. The new digital age required you to adapt, as it does require out of your customers.