Mobile first principles, what does it actually mean?

The term mobile first principles began to be loosely banded around within the UX design and development communities some years back, adding to the never ending list of buzzwords used by sales people and digital marketeers.

Taking a mobile first approach to wire-framing and then designing a website, forces you to make the tough decisions around content hierarchy; prioritising more important content first, that should be most prominent on smaller screens, less important content is then made accessible as the screen real-estate grows. Mobile first design is also important when making decisions on which UI components should be visible at various screen sizes.

Mobile first principles could and should be applied to CSS media queries

So, how should you structure your media queries and what constitutes a bad / unmaintainable structure? As responsive web development has evolved there have been many approaches to css structure, along with an abundance of frameworks and methodologies such as OOCSS, SMACSS and BEM, however not as much noise is really made about media query structure.

CSS media queries, the wrong way!

I remember the very first responsive website that I built about 7 years ago and getting into a real mess with my CSS structure; the main problem was how I was structuring my media queries, because I was doing something like this for all of my css, in a single file:

To be fair to myself, it was my first responsive site and even the most experienced developers at that time were still hashing out the best way to organise their css, but doing anything like the above made things very difficult to stay on top of. This is not to say that a min-width and max-width rule combined isn’t useful or shouldn’t be used, more that these types of rules should be used very sparingly for certain edge cases and ranges should certainly not overlap.

Always try to use min-width queries

Adopting mobile first principles for your css essentially means layering your media queries upwards, starting with the base styles, selectors are then overridden as you progress up through your min-width queries. Given that your selectors have the same level of specificity within the scope of your component, you can rely on the cascade at higher breakpoints to change the declarations accordingly.

When to use max-width queries

Ideally max-width rules should be used for large parts of css that would never be required at a higher breakpoint, a good example of when to do this is when you have separate mobile and desktop navigation components. As these are usually quite different, overriding all of your mobile menu styles when styling the desktop menu would be an unnecessary pain, that’s not to say that you couldn’t inherit styles across both menus from an additional generic css class of course.

An example LESS template partial using mobile first media queries

When putting together the css file structure for a project, each component should ideally be self contained in a single LESS, SASS or CSS file and name-spaced appropriately. The LESS partial below is representative of the kind of boilerplate I use for most files in a project:

 

Article

LEAVE A COMMENT

Notify of
avatar
wpDiscuz