No Time Dad

A blog about web development written by a busy dad

An Introduction to Mobile First Design and Media Queries

Overview

I mostly ignored the term “mobile first” for the longest time. I have seen frameworks like tailwindcss and Bootstrap tout themselves as mobile first, but I never really knew or took the time to understand what the meant.

The basic idea with mobile first, as the name implies, is that you start designing your page or component on a small viewport first then add additional breakpoints (media queries) to handle larger screens. You’re basically build your layout for mobile first, then work on adjusting that layout as the screen size increases towards tablet, desktop, or any other extra large screens.

I think tailwindcss does a really nice job of making this concept easier to understand due to their use of utility class. Take the div below as an example:

<div class="bg-red sm:bg-blue">...</div>

What this is saying is that if the viewport is smaller than the sm definition then the background-color of the div will be red. And for any viewport larger than the sm definition the background-color will be blue.

The magic that makes this happen is done by setting the min-width property on the @media query. An example min-width media query would look like this:

@media (min-width: 640px) {
  .sm:bg-blue {
    background-color: blue;
  }
}

What the above media query is saying is:

When the viewport is 640px wide or more, change the background-color to blue.

So, if you’re using a mobile first framework or want to take a mobile first approach in your work, you should start by creating your site with your viewport set small like a mobile device and expand out the size and design from there. If you watch any of the Tailwind Labs or any of Adam Wathan’s (the creator of tailwindcss) videos you’ll see that they usually being a project with the dev tools open and the device display set to mobile.

Mobile First Example

As a quick example of mobile first design we’ll create two divs; a container with a child box element.

<div class="container">
  <div class="box"></div>
</div>
.container {
  height: 300px;
  width: 100%;
  background-color: lightcyan;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  padding: 6rem;
  border: 8px dashed darkorange;
  border-radius: 0.5rem;
}

As it is right now, no matter what size the viewport is the border will always be darkorange. We’d instead like it if the border changed colors as the viewport increases in size. To do this, we’ll add two @media selectors to our css.

Our html will remain the same, but our css will now look as follows:

.container {
  height: 300px;
  width: 100%;
  background-color: lightcyan;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  padding: 6rem;
  border: 8px dashed darkorange;
  border-radius: 0.5rem;
}

/* New media query! */
@media (min-width: 640px) {
  .box {
    border: 8px dashed darkorchid;
  }
}

/* New media query! */
@media (min-width: 780px) {
  .box {
    border: 8px dashed darkseagreen;
  }
}
<div class="container">
  <div class="box"></div>
</div>

Now when we are on screen less than 640px the border color will be darkorange, but once we expand the viewport to 640px or more we’ll see the border color change to darkorchid. If we keep expanding the viewport to 780px and beyond the border color change to darkseagreen (which is probably what you see now in the example below if you’re viewing on desktop).

For the example below, if you do happen to be on desktop, you can view the color change by re-sizing your browser window as described above.

Is Mobile First a Good Idea?

Maybe. I’m not sure. I honestly just forget to do it sometimes, but when I have remembered to start with mobile first I have found that my layouts are a bit better. I think this is because designing for mobile is hard, and getting it out of the way first sort of takes away some of the cognitive load needed if you had to do it later. I feel like there is a lot more to think about when designing for mobile, and especially if you are designing for the transition from desktop to mobile. I guess I’ll need to practice mobile first a bit more and see if it really wows me.