By Nathan Donaldson
Tags: Design , Development , Other
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.
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.
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.
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.
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
