Mobile-first. Just another trend?

What is the mobile-first approach and what does it mean to be mobile-first?

Mobile-first is an approach to responsive design; they were made for each other. While responsive design uses the graceful degradation methodology, a mobile-first approach takes on a progressive approach.

It basically means your project’s design approach prioritises on mobile from the very beginning. Features are added later for larger screen sizes. Hence, all the design decisions evolve around how it looks on mobile-first. As of now, mobile consists of smartphones and electronic tablets.

All of them are different. Mobile platforms have different screen sizes with different resolutions, different bandwidth with different connection speeds and different specs with different capabilities.

However, not all projects have to take this approach. There are some applications that are just not meant to be viewed or used via mobile. This includes systems that are used for work which require the computing power and extended capabilities of a desktop machine, or systems that need a large screen size to display a large amount of critical information.

So why mobile-first?

A mobile’s small screen real estate means limited space which forces you to prioritise your content and visuals. In other words, only the important insights and information are shown on screen. Small screen real estate also allows developers to focus more on interactions, both micro and macro, and only give way to essential features. This basically allows room for a better UX. At the same time, mobiles are probably one of the first or only devices that many users access the internet on, especially in Southeast Asia.

Mobile-first in everything. — Google chief executive Eric Schmidt

Eric Schmidt, Google’s Chief Executive has announced at the Mobile World Congress that they too are taking the mobile-first approach. He also mentioned that the programmers at Google are now changing their approach to developing and coding for mobile-first, which is a big change. Products by Google now will not just have a desktop prototype but also, a mobile-version of it. Based on what Schmidt said during the event, mobile must be taken into account and it needs to be of higher priority in your coming projects.

Some pros and cons of mobile-first approach

Pros:

Helps in Google’s search ranking results

Google prefers mobile-friendly websites and these sites are given higher ranking signal by them. This is pretty straight forward; either you hop on the mobile-first bandwagon or lose all your credibility.

Speed

The mobile-version of a site will be developed with a minimal of everything; screen size, plugins and more. As the contents of the page is skimmed downed, it results in a lighter load which gives the site a faster load time and users are happy. Win-win situation, right?

More streamlined and polished end-product

As everything is built from the ground up, a hierarchy of content is established since the beginning. User journey will be smoother as the content and layouts are streamlined.

Cons:

Desktop-version of the website comes later in the process

Since it is built from the bottom up this means that prototypes and wireframes of the mobile-version of a site comes first. This can be an issue for the customer as they have to wait for a prototype later in the process and put the trust on the developer to deliver whatever is expected.

Developers have to take a 180 degree turn

On a development point of view, web developers need to adjust how they approach work. This may be uncomfortable for some because of the steep learning curve but as a developer, learning something new is something that they do on a daily basis so this shouldn’t really be a huge problem.

Taking shortcuts and abandoning the desktop experience

Though not all, many apps and programs that use the mobile-first approach tend to cut corners when it comes to creating a user experience via desktops. They either just make the real estate bigger to fit the bigger monitors or abandon a few key features on the desktop-version. This not only confuses the users, it also creates an inconsistent and unreliable experience for them.

How can it be done?

To have mobile as the starting point of your design and development process can be very odd especially if you have been developing and designing based on the graceful degradation approach for a long time. Here are some points on how to tackle the mobile-first approach:

• Asking the right questions

The first and most important question to ask is, if a project actually needs or is suitable with this approach? Some argue that the mobile-first approach is not practical and is straight up dumb as it doesn’t work and solve problems for some systems. That’s because it’s not meant for all systems.

Another question that should also be addressed is, how are the users using your project’s system? User research can really help in this decision-making. It also holds the most valuable information which is the pain points that occur to users throughout their user journey.

• Study and identify content hierarchy

Content should reflect and relate throughout the different platforms in terms of level of importance and how it is represented on the site. Some important elements that content holds are:

Size — size here refers to everything from the size of the images to the size of the page itself. Size also closely relates to aspect ratio which plays an important role in the progressive enhancement approach.

Font — size and weight of a font is important as they depict the level of significance in a content. The right font + right size + right weight = great UX showmanship.

Colour & contrast — colours have the power to influence the users’ mood. Pairing the right colour with the proper contrast provides great readability and contributes to a better UX.

Position & alignment — the difference in the position and its alignment of content from mobile-version to desktop-version should be seamless. This ensures familiarisation even on different platforms.

• Develop visual hierarchy

Determine how content & its elements are displayed according to level of importance. It results in the overall visual impact that the page produces.

• Breakpoints

Since this is a mobile-first approach, breakpoints are built for the smallest form factor first. The prototypes and wireframes are then used to generate for larger screens. It is important to never disregard and take for granted the important elements of the content which makes a great UX.

• Test on real device

Observe the behaviours of the site on an actual device. Ditch the computer screen and open the browser on your mobile then see if it runs how it is expected to.

The future of mobile first

The number of mobile phone users are rising every year. As of July 2017, the market share for mobile platforms have outnumbered the desktop and tablet market shares. This has contributed in the high usage of mobile web browsers.

The approach to mobile-first and the requirements may change in the future as the mobile technology evolves while mobile devices increase their capabilities and open doors to more possibilities.

The age of mobile has come and along with it, a lot of opportunities to be discovered. Mobile-first is undoubtedly the way to go right now and in the coming years as the number of users are definitely going to sky rocket. But we should never treat it as the be-all and end-all approach to cater to all users, especially since new technologies are created every so often.