Building for mobile first

By Michael in Design Development Other on December 19, 2013

What is a mobile first approach?

Instead of creating a website for the desktop first, then scaling it down for mobile devices, we should embrace the constraints of mobile first and enhance the desktop design in a later stage. This allows us to address common issues with legacy browsers and help remove bloated CSS code.

Mobile First - Desktop Last

How does organizing Mobile First CSS benefit legacy browsers?

During my R&D ( Research & Development ) on a Friday afternoon, I started experimenting with organising my CSS in a Mobile First approach, which consists of writing the mobile base styles first, then implementing the Media Queries to change the layout based on the screen size for larger devices.

Note: CSS ( Cascading Style Sheets ) are read by the browser from top-to-bottom, if the browser doesn’t support the code ( eg. Media Queries ), it will ignore those styles.

By creating our Mobile First CSS, we have created a layout that will work well on legacy ( older ) browsers, without having to bloat the stylesheet with additional CSS to fix specific browser layout issues. These browsers, such as ie6-ie8 don’t support media queries, so they will be served with a minimal, but usable layout based on the mobile view.

The following diagrams and CSS code snippets show how to setup the Mobile First CSS approach.

Base CSS – Fluid Layout

Our Base CSS ( Fluid Layout )

/* ===============================
Base CSS
=============================== */
.exampleClass { width: 100%; }

Note: The class / property above is an example and won’t create the illustrated layout.

Media Query CSS – Responsive Layout

Our Media Query CSS ( Responsive Layout )

/* ===============================
Media Queries
=============================== */
@media only screen and (min-width: 500px) {
.exampleClass { width: 50%; }
@media only screen and (min-width: 850px) {
.exampleClass { width: 540px; }
@media only screen and (min-width: 1500px) {
.exampleClass { width: 75%; }

Note: The class / property above is an example and won’t create the illustrated layout.

The key difference here is the use of min-width rather than max-width. The best way to understand this is by getting stuck into the code! So get started.