How I design 'mobile first'

I never found designing websites for mobiles really attractive, compared to designing for big displays. Pretty much any design gets better when you add:

  1. Lots of white space
  2. Contrast in size

Since you don’t have that luxury to apply that on little smart phone displays, what’s the fun in designing for mobile? After designing and building this website the mobile first way, I realized it’s all about creating a good experience for visitors on any device. It’s more work than it used to be when 1024 x 768 pixels was the standard, but it sure is rewarding to see a design fluently adapt to the size of its window and work perfectly on any device. Doing it mobile first helps to achieve that.

What is mobile first?

Strangely, even in Luke Wroblewski’s Mobile First book I can’t find a definition of the term ‘mobile first’. To me it simply means starting design and development of web content for small devices first and enhancing it for larger screens later. With that come some requirements, but also opportunities that can greatly improve the user experience.

How I do mobile first

Message first

Designing for mobile makes you focus on what’s most important on each page. Forget slideshows, mouse hover effects and banners. Put the core info on top and make sure it’s visible at least partly when the page is loaded. I’m not talking about reintroducing the fold, but about immediately giving website visitors the feeling they get what they’re looking for.

Example

On a mobile device, each of my project pages shows a larger version of the thumbnail from the project overview< (edit: I removed the link to the page that no longer exists). I assume that when people click the thumbnail, they want to see the design up close, so I offer that immediately. From a layout perspective, that’s not really nice, so visitors with a large enough display get that image a bit lower on the page.

Example of how content order changes depending on display size
Depending on the size of the users' browser window they will see the image before or after the project details.

Basic styling first

You don’t get to make complicated layouts on a small screen, so typography and color play a much more important role than on a large display. On any display size, these two have to be right, because bad typography and an ugly color scheme can’t be compensated by some cool layout. Designing mobile first forces you to get the basic styling right without getting distracted by details and fun features.

Example

One of the first things I did to create a style fitting the requirements for this website, was picking fonts and a color scheme. These were applied in a base stylesheet, working best at a small window size: less than 480 pixels wide. I optimized the character size and column width for readability: ten to twelve words per line. I may have failed to get that right, if I had started with a larger, more complicated layout where more factors have to be considered.

Simplicity first

Continuing on the previous example: yes, I like drawing nice, complicated grid layouts with lots of side bars, widgets and whatnot. But if the message comes across clearer without that stuff on a mobile, why would you need it on a desktop computer? For this website I started with a single column layout for mobile devices. I wrote the CSS and tested it in a narrow browser window on my laptop. When things looked ok, I made my browser window wider to the point where things didn’t look ok anymore. Then, for that window width, I added CSS adjustments for character sizes and margins.

Example

Dragging my browser window wider, at a window width of around 600 pixels, some things started to look off. I noticed that the buttons of the top navigation menu got huge. For mobile, they’re set to 50% window width, which obviously doesn’t make sense for larger displays. I created a break point with a CSS media query at the point where I was sure the labels in the buttons would fit in a single row and set the width of the buttons to 25% there.

Step by step, I repeated this cycle of increasing window width and adding styling. Some text was put in columns, like the details in project descriptions. I found there was no need to add sidebars and widgets at larger window. Had I started sketching layouts for large displays, I may have come up with ideas (side bars, mega menus, etc) that were much more work to implement.

Mobile CSS first

Mobile first makes as much sense for writing code as for the design, because the layouts for large screens tend to be more complicated than the single column designs on a mobile. As mentioned, designing for small devices first and scaling up later, may lead to the realization there’s no need for a complicated grid layout at all. That definitely cuts time writing CSS for it.

That said, creating a fully responsive website takes way more time writing and testing than one that’s optimized for a single, fixed screen size.

Example

My CSS, based on the Bones WordPress theme, is organized as a base stylesheet, to which styling for larger screens is added progressively with media queries. This is good because:

  1. The CSS for small screens stays light, and gets heavier for larger screens that generally come with computers with more processing power and memory.
  2. The CSS is clean, because the extra styling for big screens is separated from the base style sheet that is applied to all devices.
  3. It's intuitive to write. You don't have to override the complex styling for big displays by applying higher CSS specificity for all attributes that need to be changed.

Conclusion

I’m glad I didn’t discard mobile first to the buzz word pile. The experiences I described above, convinced me that designers, developers and product owners alike can benefit from making the shift to mobile first.