CSS media-query : how to design for in 2020

Wow, where do we begin? I’m currently going through a complete redesign of my site that was hit very hard from the last Google update, so I figured I’d share some thoughts and welcome feedback and suggestions on the topic.

I’ll say up front, media-queries have nothing to do with the recent Google update (as of this writing, 2/22/2020) but there have been enough Google updates since I last rewrote my site (6 years ago?) that it warrants a complete rewrite and anyone designing a new website knows how media-queries impact responsive design. I’m not going to get into the advantages of respnsive designs, media-queries are only a part of it – in this article I will share my thoughts on how to minimize media queries to keep your CSS rules in control, but by all means – if you have an opinion on how to do it better, I’m all ears!

In today’s world (or at least my world), there are 3 types of screens and I really don’t care about anything in between. You have your mobile at all times, your tablet for when you want to lay back and relax, maybe read a book or watch a video without having to squint at your phone. And finally, your laptop or desktop pc, for those at work or simply those who want a larger screen for extended use or any other reason.

Next comes the complexity of portrait vs. landscape, and perhaps my most selfish preference and reason for my decision. My experience has always been about viewing readable content in any view, primarily in portrait view – AND – any time that something was hard to read on my phone or table, my mind is trained to rotate the device to landscape mode.. There is no other logic to follow here. My expectation is that content that I view in portrait view should be ‘blown up’ or easier to read in landscape mode. There is NOTHING WORSE, than trying to view something in portrait mode that is smalle, and when you rotate to landscape mode – it’s either the same size or smaller becuase an extra column was added on the right side!

With this frustration, I’ve firmly decided that only 3 media queries are needed, all content on a cell phone (portrate or landscape) should be 1 column, with landscape being a ‘blown up’ version of the content, easier to read. For the same concerns, the fact that tablets have wider screens, they should have 2 columns (when applicable (header and menus should still span only 1 column) so that the main content takes up say 70% of the screen but it’s acceptable to put links or ads on either side. For laptops or Desktop PC’s, you can go with a 3 column approach (or more) depending on the content, whatever looks best.

The key theme here being, the content on any device should always have the same CSS layout (whether its 1, 2 or 3+ columns). Users should expect a larger size of the content when they rotate their screen to landscape for easier reading. However, the real problem to solve is the min-width breakpoints. I won’t go into why I’m talking about min-width CSS right now and I don’t have an article to link you to so if you’re wondering why, you should Google “mobile first CSS design”.

With this said, the pixels on the screen to pixel ratio almost daily as new phones come out so it’s impossible to be absolute day to day. And I won’t even get into device pixel ratio other than with my next comment. Nowadays you will find smartphones with move pixels than a tablet, and yes, I’m talking CSS pixels AND physically. It’s just the nature of technology. SO – designing for mobile friendly (min-width CSS) and the assertion that I will only design for 3 “platforms” (mobile, tablet, pc/laptop), tells me that I should error on the side of new technology, so my mid-width should include the latest devices available “today”.

What does that mean? The 3 major min-width recommenations today are:

Mobile Landscape: up to 812px

Tablet Portrait: up to 768px

Laptop Displays from 1366px and up

Tablet Landscape up to 1168px

There are many other breakpoints but I’m trying keep the logic simple.

In my opinion, all cellphones should display a website in 1 column. My Samsung S8+, 3 years old now, is considerd 798px wide in portrate mode. So based on the industry recommendation sabove, do I go with 768 as a max so that tablets can display 2 columns or with 812 so that most cell phones (and some tablets) display in 1 column? My thought is that 1 column works much better on smaller tablet screens than 2 columns on mobile screens. So with this logic – I’ve decided to implement the following:

Default CSS: mobile first (anything less than 820px for most cell phones, display content in single column as of this writing)

@media only screen and (min-width: 820px) and (max-width: 1199px) (smaller tablets, display content in 2 columns)

@media only screen and (min-width: 1200px) (larger tablets, laptops and pcs’s, display in 3+ columns)

Again, minimizing your media-queries minimizes your CSS code, but more importantly, in most cases, when your users rotate from portrait to landscale (mobile or tablet view), they will have a positive experience!

I hope this made sense and wasn’t overly complicated to figure out. I will try to simplify/rewrite when I have time but I hope that this helps you in some form.