What Is The Difference Between Mobile First and Desktop First Responsive Strategies?

If you are new to CSS you will quickly hear about mobile-first approaches and desktop first approaches.  If you are a little unsure of the difference between them, or, how you write media queries to cater to one or the other then this article is for you.

Desktop First

I think historically when people start learning about design and writing a little bit of CSS people tend to start with a desktop-first approach.  You may find a tutorial you like that looks ok, sit down in front of your computer and start coding away.  To test that your code works, you load up Chrome and check if your code compiles as expected.  Usually, this is done on a large monitor or laptop screen and then you optimize and refine your work until you are happy with the result. 

As 50% of online traffic usage comes from mobile devices, shortly after you have your site looking fresh on your desktop, you'll start to tweak it so it looks good on a mobile device.  

When you approach a website project with a desktop first approach, you start writing your CSS for large screens.  You then write media queries to shrink the design to look good in smaller screens, which is done using the max-width property, like so:

.html {
  @media (max-midth: 600px) {
     font-size: 1rem;
  }
}

Mobile First

In a mobile-first, the workflow is flipped and you will write your CSS to work on a smaller screen first and then a larger screen after. The ethos behind mobile-first is that, as designers, careful consideration should be given first to what components and content are absolutely essential.

In a mobile-first approach, you write your media queries using 'min-width,

.html {
  @media (max-midth: 600px) {
     font-size: 1rem;
  }
}


As the industry trend is now writing your CSS in a mobile-first approach, then there are obviously a number of benefits, the biggest one probably being that the end website code usually results in smaller, more efficient and faster code. Basically, your website will load faster on a mobile and a little longer on a desktop. As your mobile will likely have a slower connection this is an optimal approach.

Going mobile first puts an emphasis on the content rather than a nice aesthetically looking design, which, if you're like me, is usually what I want. I tend to use my phone when I'm on the tube, in the pub etc.. and when I'm using a website I'm usually trying to find information and I want to use it easily. When I'm at home, or at work I'll use a laptop and in that context, I want something that has good content and looks good.

 

Whats The Different Between min-width and max-width?

If you are a little unclear about the differences between max and min widths, let's go over some examples. Let's say you have three breakpoints on your website, 0-600, 600-900, 900-1200, 1200+.

If you write a max-width media query set to 600px, e.g. is width <= 600px, then your CSS will render when the viewport size is between 0-660px, any viewports that are larger than 600px will be hidden, simples!

Let's say you write a second media-query with a max-width of 900px, or, the width is <= 900. If someone viewed your page on a device with a viewport of 700px, then both of your media queries will be valid and all the CSS rules contained within them will be rendered.

This brings up the question, how are styles applied when there are conflicting styles defined in different media queries?  In our example, let's say in the mobile media query (600px) a font-size of 1rem is set and in the tablet media query (900px) a font-size is 2rem, which rule is shown?  The answer is simple, media queries don't add any importance or specificity to your selectors.  The style that will be rendered will be the last style defined.  This is why the recommended approach to writing media queries is to write them at the end of your selectors, not at the beginning. 

Min-width works the opposite way around.  In a mobile-first/min-width media queries approach you create a media query set with a min-width of 600px, e.g. is width &gt;= 600.  Your styles would only ever be rendered on devices that had a viewport greater than 600px.  

In this approach, you write all your desktop and tablet CSS within a media-query which will only get applied when appropriate.

Which Should Approach Should You Use?

As almost every project I work on is for large organizations, every site I build needs to work well on desktop and mobile and the mobile experience needs to be optimised, personally, I'd recommend starting with a mobile-first approach. 

I always tend to find it hard to be creative whenever I've needed to design something.  I'm a lot better at building something rough and then iterating a design over and over again until I've nailed it, which mobile-first allows me to do.  

Depending on which website you read, designers will have different opinions.  Some people who have been writing CSS for years will have come from a desktop approach and this is what they will favor, as desktop first feels like wearing an old pair of trainers to them, they take comfort in it.

Picking which approach that works for you may be dependant on the purpose of the site and your personal taste.  If you're not planning on your website users accessing your site on mobile then why worry? Ultimately the approach you take doesn't matter half as much as ensuring you consider both mobile and desktop throughout your build, rather than just at the end.


submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top