Intive Blog

Responsive design & media queries 101: What are the most useful media queries? (A personal approach)

It has been a long time since browsing and internet information consumption became practices which are not performed exclusively from a single device, which forces each site to adapt to different formats and sizes. That is, to be fully responsive. As a user, I expect to be able to use a page in all three “modes”: mobile phone, desktop and intermediate – whenever I do not want to use the maximized windows on the desktop computer. Consequently, when matching it with Bootstrap (an open code framework developed in 2011 that allows us to create responsive sites easily), we will have the following sizes:

  1. Mobile phone: max-width 767px.
  2. “Something Intermediate”: Bootstrap features two: 767px < width < 960px < width < 1200px.
  3. Desktop: min-width 1200px.

 

Technical background

I will now remain in the user role. So, the first demands I think of are: “Hey, a mobile phone, no matter it is FHD with a 1080px width, I want it to belong to the first group (mobile phone) and a monitor, although it has the same resolution as a mobile phone, I want it in desktop mode”.

It happens that physical 1px is not necessarily equal to 1px in CSS. Each vendor/device/user agent defines this relationship in the property devicePixelRatio. On the mobile phone, if there is devicePixelRatio === 3, the 1080px are transformed into 360px, and thus falls in mode 1. A curiosity: Where does my device fall in? I invite you to click and check the small ruler at the top.

We can see here the concept of device-width = physical width / devicePixelRatio.

The browser, by default, takes the physical width. Here is when the meta tag viewport helps us specify how much the width would be. We can choose any value (px, cm, in…) but, to make everything come together, we should set the device-width. That is why you see this line of code everywhere within the:

 

What happens then?

Going back to our first statement, I trust “Bootstrap” knows what they are doing, but I do not find it totally convincing that the first breakpoint is at 768px. Most mobile phones fall into a smaller width than 400px, whereas the smallest tablet starts at 480px, so I would use that one.

With intermediate values, it depends on the site content and the need to be displayed in different ways ranging between 480px and 1200px. Although I am not a tablet user, when researching about the available measures in the market, I find coherent the measures Bootstrap suggest: 768px, 960px y 1200px o 1280px.

Regarding the desktop size, I think it is appropriate to support as from HD monitors, namely, 1280px.

Finally, it is important that the “mode” is modified when the mobile phone is in landscape mode:

Also when the –Mac- user has a retina display (otherwise it would be too small):

 

The most useful media queries

  • For mobile phones: up to 480px
  • Intermediate sizes as required: 768px, 960px y 1280px
  • Desktop: bigger than 1280px
And, please, do not forget the meta tag.

I hope my experience as a user comes in handy. I want to share some links I hope you find as interesting as I did:

For those willing to go beyond responsive design and move forward regarding good practices for web design, I highly recommend the following links:

Sebastián Bogado

He was a full stack developer at intive – FDV. He worked with the Javascript stack on many platforms (Smart TVs & Smartwatches, NodeJS, hybrid mobile apps, and -of course- the browser).

Add comment