Mobile-first vs. Desktop-first

This is a common question, and one we need to answer before we get any deeper into our project.

Instead of picking one or the other, I advocate for taking the path of least resistance.

A quick example:

/* mobile first */
.column-layout {
  display: grid;
  gap: 1rem;

  @media (width > 600px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop-first */
.column-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);

  @media (width < 600px) {
    grid-template-columns: 1fr;
  }
}

In this case, the path of least resistance is mobile-first, because we don't have to overwrite anything within our media query, but instead, we're adding complexity.

And because mobile layouts tend to be much simpler, mobile-first tends to be the path of least resistance.

That doesn't always mean it is though!

Examples of things that can be more complex at smaller screens:

Navigations
Horizontal scrollers that only "activate" at smaller screen sizes

My general rule of thumb is, I don't want to be overwriting a ton of CSS I've written inside a media query, if I can avoid it.

Breakpoints

Figuring out what breakpoints to use can be hard, and even a little subjective.

Some people like using the breakpoints from Tailwind or Bootstrap, but you have to remember these are very generic breakpoints.

They aren't bad, by any means, but you probably don't need as many as they use, and you also don't need to use those very specific values either.

Play with your browser in responsive mode and find something that works well.

Don't use too many breakpoints

I always advocate for using breakpoints that work for your design, but don't use a 750px in one place and a 768px in another, and then a 745px somewhere else.

All of those can be wrapped up into one single value, which will make your life a lot simpler.

Intrinsic layouts

This, of course, assumes you even need a media query and breakpoints at all!

The concept of Intrinsic Layouts, which is a term coined by Jen Simmons, is when we can use modern CSS and provide the browser enough information so it can figure things out all on it's own.

A common example of this is using Grid's auto-fit syntax, where the browser determines how many columns there can be at any given size, based on the minimum size you provide it.

.grid-auto-fit {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

There are a lot of very useful intrinsic patterns out there, another which we'll see in the next lesson.

← Previous Next →