To understand what Mobile First is, is it enough to just translate?

The Mobile First theme has been mentioned in various places where I am present, especially in interviews, and my response has always been the same: "Mobile First is starting programming for mobile HEHE..." This response is not incorrect, however, it is incomplete. So I decided to study what Mobile First really is, and I discovered that it is a development philosophy.

Usually, we develop a website in its main version for desktop and adapt it for mobile, following the Mobile First philosophy, we develop thinking about mobile users, bearing in mind that a mobile phone generally has fewer processing and network resources compared to a computer. In addition to the end user experience, Mobile First brings several benefits to the website, and that's what we'll discuss in this publication.

A little theory

Luke Wroblewski published an article called Mobile First, where he presents the idea that consists of developing with mobile in mind and adapting to desktop, not the other way around. The article was published in 2009, and the Mobile First development philosophy has been adopted by various companies such as Google, Twitter, Facebook, and many others.

When we enter a website and encounter a mountain of information and a layout that does not adapt well on mobile, we easily give up on continuing to navigate on this site, this is the point that Luke wanted to bring, we must take into account that the user may be accessing the site on 3G with 1 signal bar, surely putting a 1080p video is not a good idea.

One point that Luke himself confirmed is that search engines prioritize performant mobile sites and penalize those that are not, so if you want your site to be found, you should develop with mobile in mind.

OK, we understand that we should develop thinking about mobile beautifully and performantly, but how can we do this?

Using subdomains

• Many companies are adopting subdomains to separate the mobile site from the desktop, for example: m.site.co.uk, site.co.uk, this way you can develop the mobile and desktop site separately without worrying about the desktop layout on mobile and vice versa.

Using media queries

• It is interesting to use media queries to apply the Mobile First philosophy. Regardless of the language you are using, if you can implement CSS, you can use media queries.

  @media (max-width: 600px)
  {
    .facet_sidebar
    {
      display: none;
    }
  }

Using Javascript

• We can use JavaScript to include checks that show or hide a component in the mobile version, or even control component versions, one designed exclusively for mobile and one for desktop.

What do we gain by applying this philosophy?

• Focus on delivering a great experience for mobile users: It is no news to anyone that the popularity of mobile phones and tablets increases every year, ensuring an easy and agile experience for these folks will surely make them come back or even share with someone else.
• More simplicity in the project: Of course, this is relative, however, I defend this point because it is much simpler to adapt a mobile site to desktop, we have more hardware resources, a much larger dimension, so this can save some sprints.
• Better ranking: A mobile-accessible site gains some points with search engines, a tip that Luke Wroblewski, Product Director of Google, confirmed in a talk.

Conclusion

Mobile first is an interesting philosophy, of course, it is not a guarantee of good development and it is not the only option for developing a website. There are some factors to consider when deciding to adopt this philosophy, but studying this topic certainly reminds us of the importance of putting ourselves in the shoes of all types of users, those who have an RTX 3090 with 32GB RAM, meaning they won't suffer when it's necessary to load a heavy site, but we need to think about those who are on a mobile phone with extremely unstable internet.

The implementation examples I gave are extremely objective, with the intention of presenting a proposed solution, but if you want to discuss more about it, do a POC or even a part 2 of this article delving into practice, feel free to contact me, let's have a chat!

If you enjoyed the content or have any feedback, leave it below, thank you and until next time 👋🏽.