Should you go mobile first?

The full question sounds like this:

Should you build your website/web-app mobile first and scale to desktop?

Why do we need another article about this, it has been covered a lot of times already?

To make things clearer, I’m only interested in the site structure, building the CSS around it and how it changes from one device to another. Not the PWA or other things that will take the mobile first approach and make it more like a mobile app.

It might be an obvious answer for a lot of you, but to my shame, it wasn’t for me. I didn’t see a reason to go mobile first in my approach. I’ve created lots of sites with the approach of desktop first and scaling down on mobile as I went along. We even had a full workflow where we have the desktop site ready, test it and after that, we move to mobile.

This workflow might’ve been influenced by the designers I worked with or the clients that focused on the desktop version first.

It all changed after I read Responsive Design: Patterns & Principles by Ethan Marcotte. I recommend this book if you are a web developer, especially front-end.

I was amazed by how much more can be accomplished if you have a different perspective when creating the site. And it so happened that I read it during a complex project where we had a lot of parts and elements that were structured to be re-used throughout the site.

Understand the design/project

It starts by getting a better understanding of the design or the project as a whole. You need to get as many details from the client and designer. They might think the site as page by page, but this is not true anymore. The site has pages but those pages are created by elements, and those elements are the ones that need your attention.

What is relevant for the user on a small device?

• On your newspaper site, you want to show the featured story on mobile and have it display as the first thing, not obstructed by anything else.
• If you have an e-commerce site you want to show the featured product(s) that are available on sale.
• Your book author might want to have a clear way to display the next event or book signing that she’ll attend.

This means understanding your project, getting to know exactly what matters, the core of the project. On mobile, you need to be able to deliver what’s important and not just fill the screen with everything. Providing the right content will keep the user engaged with your site, and it will also help you fix performance issues.

Working with elements

As you look over you will find elements that repeat themselves on different pages.

Once you identified the elements, you can start building the components. Get those components to live in their own space and create a structure just for them.

Then get them styled not in a relationship with the page or other elements, but as a standalone unit that will be placed on a page.

Why are elements important?

First of all, it’s like working with data: you want the actual data, not for it to be wrapped into something that needs to be adjusted when you want to display it.

You want the actual value from a field. Same with elements.

You want an element that does the Featured Story for the newspaper, Product on Sale for your e-commerce, Next Event for the author, that you can re-use wherever you like.

Having elements or components that will come together on a page will help you better manage the outcome.

Mobile Content

On a mobile first approach, the content on mobile devices is specially catered for mobile. You don’t just use what it’s on desktop but on a smaller screen.

There is an important difference here because you will need to take into account the fact that people might browse on 3G connections that are not that fast. This will make every extra resource that is loaded to take some extra seconds for the end-user.

We’re getting a better understanding of how the images are delivered and if you have to just hide content or eliminate it on mobile devices.

As you’re set on creating elements/components, you have to make sure that the media files you use are correctly optimized for screen size and enable/disable certain elements on mobile altogether. Don’t load them just to hide them on mobile.

Today this is even more powerful and easy to achieve with JS frameworks like Vue.

Isn’t mobile first the same as a responsive website?

Yes and no, mostly no. It’s kind of the same thing when you talk about the methods used (you’re still using a CSS framework for example), but it has very different outcomes.

I see the responsive way of creating sites as going from big to small and with this approach comes the idea of hiding elements on certain smaller screens or just move them around to fit. Nothing wrong with this, mobile has less space to display content.

But what do you hide on mobile?

You’re now faced with a problem that you didn’t have in mind at the beginning. You’re not aware of what is vital/relevant for your user on mobile.

The mobile first approach aims to solve this issue. You’re starting the site scaling from small to big, not downgrading the content. When you start with the small screen idea in mind, you realize what is important and what must be shown on the page. It’s not just about moving the content around so it will fit.

I’m aware that responsive is the easy way to do it. When you have a site that is already in use for some while and it has traffic on it, it’s the safe step to make it responsive, move things around to fit and just remove some elements on mobile.

I would love to cover more on this subject and break each idea into an article on its own, but for now I just wanted to offer a glimpse of what I took from that amazing book.

I really recommend reading the book. it’s around 100 pages with a lot of relevant examples and solutions from the real world. It might change the way you think about your current projects.