Want to know how to use media queries to develop responsive mobile-first CSS stylesheets?

Media queries load CSS styles conditionally based on the size of the current user’s browser. Media queries aren’t new to CSS, but there’s still a lot of website developers doing them wrong when their goal is mobile first development.

Min-Width vs. Max-Width Media Queries

Max-width media queries are popular, but they shouldn’t be.

Drupal — a popular content management system (CMS) — even bakes in their built-in “responsive” features using max-width media queries.

Max-width media queries work for responsive websites, but they are in no way shape or form mobile-first. In fact, max-width media queries load all the styles up front — code bloat — and then conditionally toggle additional styles to overwrite the original styles — more code bloat.

Below is some basic CSS code to create a 3-column responsive website layout.

In this example, the website starts as a desktop website and through media queries adapts into a single-column mobile website.

 // All of this code loads on mobile. ALL OF IT.
.container {
  width: 100%;
  position: relative;
}

.container::after {
  display: table;
  content: '';
  clear: both;
}

.col {
  position: relative;
  float: left;
  width: 33.33333%;
}

@media screen and (max-width: 1024px) {
  .col {
    float: none;
    width: 100%;
  }
}

Min-width media queries aren’t as popular, but they’re the way CSS should be.

Min-width media queries aren’t intuitive to many website developers, but once you think about what’s actually happening it all starts to come together.

Min-width media queries load only the required styles first and then allow you to layer additional styles on top of them.

You literally load only the CSS you need and add extra as you need extra.

Min-Width Media Queries are Mobile First

The idea behind mobile first development is when you’re developing mobile-first responsive websites you’re only loading what you need for mobile devices.

You’re not loading anything you don’t need.

It’s similar to “just in time” manufacturing principals. If you don’t need the code or functionality right this second then you don’t need to waste time loading that code onto your page.

Strategically writing CSS (or SASS/LESS) for using min-width media queries will let you achieve mobile-first — at least for your website’s front-end styling.

Load mobile AND THEN load desktop styles instead of loading desktop styles and then trying to overwrite them for transforming your website into a mobile experience.

Here’s an example of crafting same responsive user experience as the max-width media query code example from before, but this time doing it mobile-first. The result renders the same layout, but it’s going to load less code on mobile devices — mobile devices don’t have as much processing power as a desktop PC, so a website or image loading on someone’s phone won’t load as fast as it will on your office computer, so better is faster and faster is important.

 // NONE of this code loads on mobile because it DOES NOT NEED TO.
@media screen and (max-width: 1024px) {
  .container {
    width: 100%;
    position: relative;
  }

  .container::after {
    display: table;
    content: '';
    clear: both;
  }

  .col {
    position: relative;
    float: left;
    width: 33.33333%;
  }
}

Multi-Column Responsive Website Layouts Require More Code Than Single-Column Website Layouts

Multi-column responsive website layouts require more code than single-column responsive website layouts. Think about it…

Most mobile websites are a single column. There’s not enough width on a 320px wide smartphone (i.e. an iPhone 3 sized screen) to fit more than a single column of legible text. Historically, that’s how website designers and digital marketing agencies have created responsive websites.

On the other hand, most desktop websites are comprised of complex multi-column layouts.

You can do more complex stuff when there is more real-estate to work with on screen.

Which do you think takes more CSS code to create, though? A single-column mobile layout or a complex multi-column desktop layout?

Right, a complex multi-column layout.

Transforming Desktop Websites into a Mobile Websites is Responsive, but Not Mobile-First

Knowing it takes more code to create a desktop layout…

Why would you load all of the code in the main part of your CSS on a mobile site?

If you’re creating a desktop site first then the only way to transform it to a mobile site is by overwriting the desktop site’s styles.

That’s a lot of duplication of effort.

Single Column Mobile Sites Require Zero CSS

For the record, if you don’t do any CSS styling then 9/10 HTML markup elements will naturally sit one on top of the other — in a single column. It looks exactly the same as most mobile layouts. With no styles.

…so, once again to hammer home the point… if it takes NO STYLES to create a mobile website layout… how could you think it would make sense to load ALL YOUR STYLES and then load an entire second set of styles to undo all your styles to create a mobile website layout?

It doesn’t.

Responsive Websites are Different Than Mobile-First Responsive Websites

Can you transform a desktop website into a mobile website and call it a responsive website? Yes.

Should you transform a desktop website into a mobile website and call it a mobile-first responsive website? Absolutely not.

Responsive is one thing. Mobile-first is entirely different. But, it matters.

With mobile browsing continuing to rise, developing your website with mobile-first techniques is increasingly more important. For mobile-first website development, the goal is to minimize code-bloat which in turn increases page speed, decreases load time, and makes for a better user-experience.

Happy website visitors make happier customers. Be a better website. Do more business.