If you’ve tried your hand at coding a responsive website, you’ve run into this issue: You change one tiny, simple CSS property, and it alters the layout on different screen sizes.

This forces you to check and double-check that the newest margin value hasn’t wrecked the site for tablets or phones. Of course, you can easily fix this issue with specific overrides for different screen sizes. But over the course of a project, CSS files become filled with exceptions to problems. Then there are exceptions for the exceptions, which then later have an exception for the exception’s exception.

It gets complicated quickly, and you end up fighting your own code, consuming a lot of project hours, and slowly losing your sanity.

But fear not! Mobile first development is here to save you from headaches, exceptions’ exceptions, and slow page loads.

What happens with desktop-first dev

Initially developing for the desktop version of a responsive website goes against the natural flow of a CSS document. CSS files read linearly from top to bottom, so every CSS property gets overwritten by any new styles applied further down the document.

By developing for large screens and then adding the mobile styles further down the CSS document, two problems appear:

1. Any changes made in the desktop styling (higher in the document) will change the way the mobile site appears if the new style is not explicitly overwritten for the mobile site. Creating extra lines of frivolous CSS consumes a lot of project hours and goes against the principle of DRY code.
2. Mobile devices begin loading a page by rendering all of the desktop styling. Once the hefty desktop version has finished rendering, the mobile styling is applied. This loads extra resources, which means that mobile devices take even longer to deliver a fully loaded page.

This is where mobile-first development comes in to save the day. This method encourages correct CSS order (mobile to desktop from top to bottom), ensuring that a device only applies the information it needs when it needs it.

Let’s take a look at some solutions to these problems.

What mobile-device rendering looks like

Images are easily the biggest contributors to a website’s size, taking forever to download if a device isn’t connected to wifi. Removing extra images from your mobile styling is the best thing you can do to improve a site’s speed.

Moving to mobile first means serving only a few small images to mobile devices. In the example below, I’ve created the same CSS document implemented with both desktop- and mobile-first methods.

If you’re using the desktop-first method, mobile devices would render in the following order:

1. Read the first style.
2. Download the large (soon-to-be-replaced) image.
3. Render the element.
4. Read the mobile style.
5. Download the small image (replacing the large one).
6. Render the element again.

However, if the mobile-first method is used, the device renders in this order:

1. Read the first style.
2. Download the small image.
3. Skip the desktop-only styling (since it doesn’t apply).
4. Render the element once.

Not only does the website have fewer steps to run through before serving a finished page to the browser, but it also removes the extra calls to frivolous images that aren’t used!

Note that media queries will change from max-width to min-width with mobile-first development. Max-width queries will apply to all devices smaller than 1000px, while min-width queries will apply to devices greater than 1000px.

Swapping to min-width creates a barrier that prevents the new styling that we write for larger devices from ever affecting what the site looks like on smaller devices. This increases the load speed of your responsive websites while ensuring that anything you change within the desktop-only media query won’t affect your mobile layout. It’s a win-win!

Stop fighting yourself

Let’s say we’re working on a project that has its CSS file commented into three main parts: desktop, tablet, and mobile.

Unfortunately we’ve followed the desktop-first method, and the site is loading slowly for phones. We’ve tried sizing down images, adding browser caching, and even minifying the HTML (gross). But the site still slugs along for first-time visitors, and it needs fixed.

Since we built our site with the desktop-first method, our CSS would look like this for our .header element:

Our goal is to thin down the amount of styling that’s being sent to mobile. To begin, we need to do an inventory of what’s being applied to an element, taking note when we’re overwriting our own styles.

First, let’s swap over to a mobile-first approach. We’ll make mobile our default, non-media-queried styling (note: Don’t do this in production, it will break the site and make your clients grumpy).

Let’s take a look at our imagery again since that has the largest impact on our site’s speed.

Since we’re not loading a background on mobile devices, we can delete that property. We’ll add the imagery for larger devices later when it’s actually needed. The same goes for the margin-bottom property, leaving us with only two properties that actually need applied for mobile!

Moving on to the tablet section, we’ll need to move the background attributes and padding from the desktop styling up into the tablet styling, since tablet is the next section that will be rendered.

Remember, our goal is to only overwrite a property if it changes and only add new properties when the change needs to happen, as shown in the image below:

Much better! By examining how a mobile device would render our freshly optimized CSS, it quickly becomes apparent how much of an impact mobile-first development has on smaller devices compared to the desktop-first method.

Work smarter, not harder

Developing desktop-first creates more issues than it fixes. “Swapping to a mobile-first development method allows you to work smart, not hard. ”

While developing responsive sites, keep in mind that by default, everything that is not inside of a media query will display. By making the default (non-media queried) styling cater to mobile devices, we allow the smallest amount of information possible to be sent to the device that is most easily affected by the size of websites.

Desktop and tablets are hooked up to a fast internet connection 99.999 percent of the time, allowing large amounts of information to be passed at high speeds. Phones are the most likely to load information over slow internet connections. Gearing your stylesheets to accommodate the most sensitive devices enables you to serve the best possible website to customers.