We're big advocates of designing mobile-first. Scaling up is easier than scaling down, simpler code is easier to maintain and easier for search engines to read, it forces us to make tough decisions about content early, and it encourages us to account for a fast-growing segment of web readership.

But the reality is … well, we don't always design mobile-first. Clients still prefer to see widescreen designs when working through problems, and it's harder to sell a tiny version of a grand vision. There is, however, a case for thinking mobile-first outside of design. Here are tips to coding mobile-first, even when you design mobile-second.

1. Reset values for mobile-optimized designs

Resetting values is often the most time-consuming part of coding a responsive design. If a large-screen version of a component is more complex than the small-screen version, it will have more CSS.

To move down to mobile, you have to reset all of those values, resulting in extra CSS. That's why Foundation for Sites begins with a tried-and-true reset file.

2. Use media queries to build up, not down.

Start with the CSS for small screens, and then layer more complex styles for larger screens on top. Selectors at the end of a CSS document override selectors earlier in the doc, so write your mobile styles first, and use media queries to replace them as needed.

/* Default to a small-friendly size
by not using media queries … */
p {
  font-size: 18px;
}

/* … then override it for larger screens. */
@media all and (min-size: 640px) { … }
@media all and (min-size: 1000px) { … }
@media all and (min-size: 1200px) { … }

 

 

Above: Shorter code (on the right) results from a mobile-first approach.

3. Force yourself to focus on components.

Fortunately, mobile-first design lends itself to this technique. Rather than worrying about a given section in the grand scheme of things, focus on making that section great. Scrutinize each component — a header, off-canvas nav, hero art, etc — in context of a small screen. Does it stand well on its own? If not, how can you improve it?

Coding with a mobile-first mindset takes some getting used to, but we think that the smaller, simpler code footprint is worth the transition. If nothing else, it makes us ask hard questions up front — and not under a looming deadline.

---