Why Mobile First?

Unlock the mysteries of when and why to apply Mobile first css technique

Photo by Ron McClenny on Unsplash

Mobile first means developing, designing or writing the styling code for the online web experience or user interface for mobile (or a smaller screen size) before developing it for the desktop (or any other larger screen).

Before jumping more into the topic, assuming you are familiar with following concepts. If not, I have added a brief explanation for each:

• Responsive Web Design (RWD): is an approach that suggests that design and development should cater user’s expectations when accessing a web page on a device irrespective of screen size, platform and orientation.
• Cascading style sheets (CSS): is stylesheet language used to describe the presentation of a document written in HTML or XML.
• Media queries: a technique introduced in CSS3, that lets developers to write css for a particular width, orientation, or device. The @media rule is used to achieve this.

Why “Mobile first”?

Considering the users/customers of a website, the following reasons make sense as to why we should consider “Mobile First” approach:

• Number of mobile users are a lot more than desktop, it would be more beneficial to target a larger group of audience for your business.
• Due to lack of space the focus is on the content and hence the design is simple and to the point, filtered to the required items only.
• Navigation is simple again, since a large menu cant be placed in a small screen.
• An optimised experience will enhance the opportunity of engaging with users and extend the reach of web page.

But why is that mobile first approach is recommend over desktop first from a developer’s point of view?

Mobile first approach reduces code length since it requires lesser media queries, which in turn reduces code complexity. The code is more clear and robust (that is, there is no glitch when resizing between viewports sizes, like going from portrait to landscape or visa-versa).

Reason being, Mobile first css approach does not need to deal with the layout or positioning of the HTML elements on the webpage, since mobile layouts are stacked rows; whereas desktop layouts are not, like in the example below:

Desktop vs Mobile layout

Mobile first will only deal with the base css like font-family, colors, border, background, padding etc. Because of this, it’s easier to start with mobile first and then adapt to other screen sizes, but harder other way round.

The default behaviour of block elements is that they take up the entire width of the screen anyway, this simplifies the css for mobile. In a Desktop first you will start writing css to position the elements next to each other, and then override this css for mobile and position them back to width size 100%.

An example code below shows you this difference, using “float”. Notice the use of “min-width” instead of “max-width” to achieve mobile first.

Desktop First css:

.main {
  //css for large screen
  float: left;
  width: 60%;
  //css for smaller screens
  //Note that we have to write two css rules to make the layout work
  @media (max-width: 800px) {
     float: none;
     width: 100%;
  }
}

Mobile First css:

.main {
  //css for smaller screen
  //Nothing is required here because we can use the default css
  //css for larger screens
  //Notice min-width
  @media (min-width: 800px) {
     float: left;
     width: 60%;
  }
}

This was just a simple example, where we saved only two lines of code, Imagine how much time and effort you could save on a larger website.

When not to use “Mobile first” ?

Mobile first has its perks but cannot be applied to all situations. If the desktop and mobile design are entirely different, then mobile first css technique fails.

Consider the following situation, In desktop the button is part of the web page appearing at the end of the form, in mobile it sticks to the bottom of the screen or viewport.

Desktop vs Mobile button position design

In this case it makes more sense to style it for the desktop first and then add mobile styles to stick it to bottom of the viewport, as shown below:

Button css would go like this: 
.sign-up-button {
  //css for larger screens
  background-color: green;
  color: white;
  padding: 20px;
  /* others styles for width, position goes here*/
  //css for smaller screens.
  @media (max-width: 800px) {
    position: fixed;
    width: 100%;
  }
}

Summary

We learned about two approaches of writing css, the key behind choosing between them is:

1. Figure out what are the base styles (font, color, background etc) that will not change, irrespective of device width, and then style them first.
2. For every other element, have a look at the design or wireframes, check which technique(Mobile or Desktop first) will cause lesser or no overriding of css.
3. Mobile first uses “min-width” media query when compare to Desktop first, which uses “max-width”.

Happy Coding! 😃