Mobile-first vs Desktop-first

Published: March 28, 2016By Sebastian

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

Mobile First Responsive Design

The skills you’ve learned in this desktop-first tutorial are also applicable to mobile-first. From a technical point of view, there are two small differences with mobile-first design:

  1. Global styles, those not inside media queries, are focussed on making the site look good on small screens. Where as with the desktop-first approach, global styles are designed to make the site look good on larger desktop screens.
  2. Media query styles are added to make the site look good on larger screens. Consequently, min-width is used over max-width in the media queries.

Here is the basic structure of a desktop-first stylesheet:

/* General selectors and styles designed to make the site look good on DESKTOP screens go here. But they affect all devices, and must be overridden by media queries targeting INCREASINGLY SMALLER screens */

@media (max-width: 979px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
}

@media (max-width: 767px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
}

And here is the basic structure of a mobile-first stylesheet:

/* General selectors and styles designed to make the site look good on small MOBILE screens go here. But they affect all devices, and must be overridden by media queries targeting INSCREASINGLY LARGER screens */

@media (min-width: 767px) {
    /* Selectors and styles affecting screens WIDER THAN 767px (Tablet) */
}

@media (min-width: 979px) {
  /* Selectors and styles affecting screens WIDER THAN 979px (Desktop) */
}

@media (min-width: 1200px) {
    /* Selectors and styles affecting screens WIDER THAN 1200px (Large Desktop) */
}

The mobile-first approach is advisable if you are starting out with:

  • A blank stylesheet or starter theme with no media queries.
  • A theme that already uses the mobile-first approach.

Mobile-first is considered best practice. The end result for mobile tends to be better if the site was initially designed for mobile – designed with the constraints of small screens in mind.

Mobile-first can produce faster page load on mobile. One example of this is background images. If you set a small image globally and a large image inside a media query, mobiles only download the small image. If you reverse this, mobiles download the large image as well as the the small image. This is what happens with the desktop-first approach.

Using Mobile-first Media Queries in Microthemer

mobile-first-mqs

Microthemer’s default media queries are desktop-first oriented. But if you like the mobile-first approach you can use a mobile-first set in Microthemer.

  1. Click the  Edit media queries icon under the MT logo.
  2. In the Default screen width for “All Devices” field, enter 320. This makes it easy to see how your general styles affect mobile devices.
  3. Click the Load an alternative media query set link.
  4. Choose the Mobile first device MQs set.
  5. Decide if you want to overwrite or merge the new mobile-first set with your existing media queries. Note, if you overwrite, you will lose any styles you applied to your existing media queries.
  6. Click the UPDATE MEDIA QUERIES button.

Mobile has taken over desktop. So it’s reasonable to prioritise this group of users when starting a new project. But redesigning your site from scratch can cost a lot of time. This should be weighed up against the advantages of mobile-first design. For many, it makes business sense to add extra mobile styles to an already functioning desktop-oriented site.

Close