Building for mobile first

By Nathan Donaldson

Tags: , ,

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.

  • The Base CSS will target: Mobile ( + Legacy browsers )
  • The Media Query CSS will target: Tablet, Laptop, Desktop ( Supported by modern browsers )

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.

Resources

Boost’s mobile app development

How Agile mobile app development delivers lasting results, fast

Integrating mobile app and website development: SuperGold case study

Gamified mobile app development gets NZ on the global stage: GS1 case study

Make a bigger impact tomorrow

Talk to us today