An Introduction to Mobile First Design

People should always have access to all content on all devices, all the time. The trick is showing that content in an intuitive and user-friendly way. This is the story of how Iterate was born using mobile first design.

    Ryan Velgersdyk
  • Jun. 21 2013
Lightbulb, Phone, Tablet, Desktop

Walk into any buffet. It’s amazing. This is America, dang it, and if you want to have crab cakes and pizza, the who am I to say differently. I won’t judge, it’s your choice.

Now go to a website on your mobile phone. Not nearly as amazing as the jumbo buffet you just visited. It’s practically un-American. Websites will often scale back content in order to fit the mobile canvas and start adding in the content THEY think you need, taking away your freedom of choice.

Why should the size of your devices dictate the content you get? You may have a smaller plate in the buffet line, but that doesn’t mean you want fewer options. You just have more of a challenge in stacking your plate.

That’s where mobile first design comes in.

Defining Mobile First

Mobile-first design is exactly what it sounds like: a process that focuses on designing for a mobile device. Instead of designing a desktop site and rearranging it for mobile, we’re doing the opposite – designing a mobile site and enhancing the experience as the screen size becomes larger.

Mobile Wireframe

We began with the mobile version of the site in wireframes.

Yet, there’s more than just the standard mobile design process, where a site is mocked up in one size and built as specified. Mobile first design — and responsive design in general — relies on fluidity between breakpoints. We create guidelines for a mobile device, tablet and desktop, then fill the spaces in between. The first step is mobile, but we need to remember each small step along the way.

Which means rather than simply say “mobile first,” we need to understand “conceptualize first,” where we develop concepts and loose structures that are then filled in by creating — and iterating — a set of progressively complete prototypes.

There are tradeoffs between mobile and desktop design. Mobile design influences the desktop design. Desktop influences the mobile design. We must determine, at some point, how those meet in the middle.

This takes a little longer, but these in-between phases help us focus on how design transition from one state to another, saving ourselves the problem of committing to a design that might not work on all devices.

The Structure

We’ll use design of this blog as an example. For this project, we used wireframes to start thinking about how a fluid responsive layout might function.

We started off with a short “wish list” of things for our blog. We knew we wanted a prominent area for the authors picture and a short biography. We also wanted a way to display footnote information without scrolling to the bottom of the article.

These wireframes did not dictate design — they instead helped us determine the best content and design hierarchy for a mobile device. From there, we were able to wireframe out to a full desktop site.

Full-width wireframe

The full-width version of this template, which shows an expansion upon the mobile width.

The Look

Typically you’ll be designing based on some sort of brand guidelines. Whether that’s an actual brand style guide or just off of existing product design, printed materials, etc. there will be something that will help govern the look of your design.

The first step is mobile, but we need to remember each small step along the way.

This blog was a new concept for us, and we had a blank canvas. Good or bad, we started out our design phase by designing its brand. Voila, the logo was born and we had a starting point for our design.

For those of you who already have a brand in place, you already have elements you can use. A helpful tool in these situations is something called “style tiles.”

Mobile versions of the site design

We iterated through several versions of the mobile-view before expanding to full-width.

According to Samantha Warren of Styletil.es, style tiles are “a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.” In other words, we’re selecting patterns, fonts, colors and design elements for the entire site at once for use in our wireframes and iterations, while also maintaining a loose structure that can be adapted for those awkward points in-between breakpoints.

Collecting the brand guidelines in one place in a style tile will help you determine hover states, spacing, and other crucial design elements without committing to the rigid structure of a Photoshop mock. Pretty much anything you can do in CSS, you’ll be making that decision here. This isn’t just an overall feel of the design — and it sure isn’t the final design. Instead, it’s essentially an extension of the site style guide.

The Transitions

To begin combining structure and look, I still like mocking up in Photoshop. This allows me to quickly adjust the look of the site and test adjustments to the style boards without tinkering with the mechanical side of the code. You, however, may design in browser, or design through prototypes. The same guidelines apply.

Our first mock was for the mobile homepage. It was tweaked and tweaked again until the aesthetic and wireframe synced. We mocked up a tablet and desktop view for reference — not to set breakpoints, but to show progression of the responsive layout.

For example, we found it would be foolish for us to scale the header graphic as the width grew. Instead, we had to set a point where it would stop expanding and readjust the layout according to the wireframe. There was a cycle of revisions from desktop to mobile and tablet and back until everything worked as planned.

Having a plan of action and working in a cycle of revisions helped us create a fully thought-out design that displays all content at any size.

The Process Never Ends

The goal for this site in particular was to create something as fluid as possible that kept the same aesthetic throughout all sizes, making it recognizable no matter what. We were able to do this by developing a loose structure based on the mobile layout, and working out toward the full desktop design.

However, reworking the design doesn’t end on launch. Like Jared Spool said back in 2003: “The redesign is dead.” We’ll continue to work on design tweaks, content issues and new breakpoints as we adapt and change the site’s content and purpose.

Just like the site that you created must be adaptable, so must you. There is no better test than a fully functioning site to show you where your problems lie. Adjust these issues as they come to light and keep the iterations coming.