Traditionally when websites were built with an eye to make them accessible by devices, the mobile specific changes and edits were made after the desktop version of a site was built. However in recent years the process of designing and developing mobile device optimized sites has radically changed and thanks to visionaries such as Luke Wroblewski, the development of websites using the Mobile First methodology has allowed developers and designers to change the way we built web device friendly websites.

What is Mobile-First Web Design?

Put simply, Mobile First is a process that was outlined by Luke Wroblewski in his highly regarded and highly respected book “Mobile First” which is part of the A Book Apart series. The Mobile First approach is often entwined with a Responsive Web Design solution, forcing the designer or developer to consider what a mobile device users will see before designing solutions and outcomes for larger device screens, including laptop and desktop screens.  A Mobile First approach encourages the identification of “vital elements” and allows designers to concentrate on ensuring the vital elements work well on smaller screens and devices with mobile internet bandwidth.  As the site scales up from mobile, it can enable rich elements, interactivity and new User Interface (UI) and User Experience (UX) elements for devices with larger screens and faster internet access.

What’s the Technicals behind Mobile First?

Mobile First is the process building a website for small and mobile device screens first, working up to tablet device screens and subsequently desktop, laptop and large screens. The execution of Mobile First is handled by processing a website’s appearance through Cascading Stylesheet (CSS) files which are processed in a top down direction. This in turn means any code at the bottom of the CSS file will override code at the top of the file when they are intended to be applied to the same element on a website.

Why Mobile First?

Mobile first changes the way traditional designers and developers think when they build a websites, regardless if it’s a revamp of an existing site or a brand new one. Our every own Giles Talbot used the mobile first approach when he was tasked to produce the Lean Labs website. It is Talbot’s view that Mobile First’s encouragement of considering Mobile device’s first, allows for a more well rounded solution for multiple devices:

“The reason you start with mobile first is the restrictions it gives you, the screen space, the screen size, the real estate. You strip back all the fluff, everything that isn’t needed is remove and as the screen size increases, you can add your ornate finishes and enhance the experience for the bigger screen.” - Giles Talbot

How Has Lean Labs used Mobile First?

Talbot shares with us the process he worked through when building the Lean Labs website using a Mobile First approach:

“At the start of the project, We (Lean Labs) checked our analytics for mobile traffic to check if Responsive Web Design was worth doing. We then looked at content strategy, created content that we were happy with and felt it clearly highlight who we were as a company and broadcasted our message clearly to visitors. Then we created a sitemap. We then did some basic kick off questions: ‘What are some sites we like visually and experience wise?’ ‘What do we want our visitors to experience when they come to our website?’ ‘What are some of the dos and don’ts we want to implement and avoid?’.

We then looked at personas. This is when we created fictitious people that highlighted ideal and realistic visitors that would visit our website. We considered what it was they were looking for, their interests and important factors like their job role and location. From there, we were able to think about what parts of the site will affect them, which sections of the website will attract them and we thought about what our website could offer them in their job role. My advice for this is to do this earlier on, probably at the start of the content strategy as it really helped paint a picture of what we were trying to achieve with our site.

Then from there, we built a prototype using HTML, CSS and the Twitter Bootstrap framework. The prototype really helped us to get a feel of how the site’s layout and structure looked and felt like in a browser without getting bogged down in aesthetics.  We added all the content we had been working on into the prototype and from there we worked on creating style tiles.

Styles tiles are where we piece together textures, patterns, shapes, shades colours and graphic ideas onto a small mood board which we use as a basis when we build the style into the prototype. This is where we thought about the aesthetics of the website and started to explore the interaction and experience of the user when they come to the site. In addition, we started to think about what imagery elements could be used to support the content and where they would be position in relation to the content.

After that we moved into the final sprint where we would add new graphics and tweaks elements until we were happy with it. When we got this point we already had a solid working website and we were just making tweaks to suit our tastes. It was amazing to see how quickly everything came together and made easier to finalise parts and notice where we need to work on other parts. If we didn’t build the site using the Mobile First approach, there’s no way it would have came together so well.”