Blog - Mobile first CSS

During the first week of Mayden Academy our tutor, Mike, introduced the important topic of responsive design.

Responsive web design was defined as an approach to design and development that responds to the user’s behaviour and environment based on screen size, platform and orientation.

This blog considers ways of achieving responsiveness and the importance of a mobile first approach to CSS.

To begin, an important distinction needs to be made: design is not development and development is not design. This means that whilst one may choose a strictly mobile first approach to both design and development, it is also permissible to delineate and design desktop first but code mobile first.

Although this may sound counterintuitive, it is not an unusual approach. When designing a website that will attract both mobile and desktop users, it is often desirable to design the glossy desktop version first, because this is the ultimate showcase for the site. However, this does not mean that the site has to be coded desktop first. Indeed, there a couple of important benefits to coding a desktop first design with mobile first CSS.

Firstly, one has to consider how the browser parses (reads) CSS i.e. from top to bottom. This means that when coding CSS desktop first, a mobile user’s browser will have to parse all the desktop CSS before it gets to the mobile CSS that it needs to render. If the same example had been coded mobile first, the mobile user’s browser would immediately render the first CSS it encounters. As mobile users tend to have less bandwidth, anything that reduces download times, even marginally, is a gain.

Secondly, coding CSS mobile first generally results in fewer lines of code. This is because mobile first elements tend to be simpler blocks. Accordingly, it is easier and shorter to add CSS properties to these blocks (in a desktop CSS media query) than to redefine elements to be simpler for mobile displays. This can be summed up by saying it is expedient to start with default elements in preference to having to redefining elements to display as per their defaults.

In summary, it is perfectly acceptable to design desktop first but code mobile first. Coding mobile first will result in less code and faster mobile parsing