Don't turn 'mobile first' into a hollow slogan

Nowadays you hear it blowing from all sides: 'mobile first is the approach to be used for building new websites, applications and everything else that is digital'. Not surprisingly, if you know that since a number of years mobile devices are more numerous than classic computers. The majority of searches also take place via mobile devices. So the importance of a responsive website should not be underestimated. The question is whether every designer should jump on the bandwagon of the mobile first approach?

• Because you don't have the place to show everything on mobile devices, you are forced to make choices when it comes to content. You have to think carefully beforehand and analyse what is really important for your website visitors and make it appear as good as possible on a small screen.
• Moreover, it is also a lot easier to work from a mobile design to a desktop design. After all, designing pages is a cumulative process, in which each new step builds on the steps taken previously. It is easy to expand systematically, rather than having to delete elements. 
• But there is also a drawback. The interfaces designed for mobile first are less distinctive. You design mainly at the detail level and there is no room for extras or details that make your website more beautiful. So your website is usable and contains the essential information, but is less distinctive from competitors.

The American web designer Brad Frost wrote a book about what he - and meanwhile many others - believe the design process should look like, the so-called atomic design. He, too, thinks that colleague Stephen Hay put it best when he said ‘We’re not designing pages, we’re designing systems of components’. Designs should be able to keep up with the rapidly changing digital landscape of Internet devices and content types without losing momentum. Anyone who missed the boat to the mobile approach a few years ago may now be in danger of going under. And the old design process has also gradually become obsolete. Agility, cooperation and adaptability are central nowadays, while the interfaces between design and development are getting bigger and bigger.

Frost's atomic design process looks more or less like this:

1. The atoms: Atoms are the basic building blocks from which everything and everyone is made up. When you extend that line to web interfaces, it corresponds to the HTML tags such as form labels, inputs and buttons. It can also include more abstract elements such as colour palettes and fonts.
2. The molecules: When you combine several atoms, you are dealing with molecules. Atoms stick together to form new building blocks with their own function. In web-language, this way you could merge the form label, input and button into a single form that is immediately usable in concrete terms.
3. The organisms: Just like the atoms form a molecule together, the molecules in turn can build an organism together. In this way the different parts are eventually merged into one whole, like a web page. For example, a top bar can contain various components such as a logo, a search function and a list of social media channels, or different products are displayed one after the other to offer an assortment. Either way, you can turn small blocks into a larger whole.
4. Templates: Once you have been able to build good organisms thanks to your atoms and molecules, you can choose to save this form as a template. In this way, you already have the right way of building, without having to fill in everything concretely. With these templates you also get a concrete view of the design of the web page, although of course a lot can change until the final design is on the table.
5. The pages: The end point of the design process. Once all the building blocks have been clicked together and the templates have been completed, you will have a page in mind that users will also see. Now the tests can only really begin, as you already have a fairly true picture of what the final product will be.

Systematic building is therefore certainly worthwhile if you want to build a good website. Put all those atoms and molecules together well to form solid organisms, and so steam on towards templates and pages that are becoming more and more complex and extensive. In any case, the solid foundation will remain for any other platform you develop afterwards. Convinced about our mobile first approach? Calibrate is happy to advise and assist you!