From mobile-friendly to mobile-first

Dieter Huber

Director, Mobile

8 min tiempo de lectura

When telephones were first invented, their one and only purpose was to help people communicate over long distances. Nowadays, their mobile versions are multi-purpose mini-computers more than voice communication devices.

Smartphones have not only become an essential part of our lives, but they have also come to be the center focus of many businesses success. In order to have a successful website and app design for smartphones, designers need to consider the mobile-first approach, and why it is so important to emphasize it over and over again.

What is mobile-first design?

In order to explain mobile-first design, its important to understand what the previous approach consisted of. Websites were initially designed for desktop, and then through responsive design, the sites adapted to fit the screens of different devices like tablets and smartphones. Otherwise, users had to zoom in and out on their phones and scroll through the web pages.

 

With mobile-first design, the shift means designing a web product and apps for mobile before adapting them for desktop. But mobile-first strategy also consists of products that use the functionalities that are built into smartphones, such as GPS, cameras and data collection. These functionalities enable app designers to think big and include otherwise unavailable options.

 

Essentially, building a more interconnected community through the mobile channel is one of the central areas of mobile-first design. Users benefit from easy, instant solutions that are always at hand, save time, offer new experiences and the possibility to share them with others. These types of connections increase revenue as well as build loyalty.

Mobile has become the main channel

In 2014, The Independent reported that there were more mobile devices than humans in the world. Shortly thereafter, in 2016, The Guardian reported that mobile web browsing had overtaken desktop for the first time. Now, the worldwide mobile market share has reached 52.1%, in comparison to that of desktop, which has dipped to 44.2%.

 

These stats portray something very clear: The mobile channel is slowly taking over. How did this happen? Mobile devices are abundant in the Western world, and over in Africa and Asia the markets are rapidly expanding. Consumers want everything to be delivered directly to them and fast too, and telco catches up. Accessibility proved to be extremely important, as well as social media were barely offline nowadays and appreciate staying connected with family and friends 24/7. Moreover, social media app integration with digital payments enabled in-app checkout (Instagram paved the way) that changes the way we think of shopping. The journey from visual inspiration to purchase is now shorter and truly seamless.

 

Another area of significant mobile change is media and entertainment: all content everywhere is the way to go for todays busy consumers. Digital banking, online shopping, VOD, AR experiences, endless applications of AI combined with Big Data, and digital disruptors in hospitality and transport turned our mobile devices into super powerful and integrated life companions.

Simplicity for enhanced UX

When a designer goes for mobile first, they have to center their attention on clarity. This means providing the best visual frame for the content being offered, whether the content is items on an online store, or just information. Yet, a byproduct of simplistic design is an enhanced user experience.

 

Simplicity is just more convenient. Users nowadays have short attention spans, and want to get from discovery to purchase or information as quickly as possible with minimal filler stages. Whats more, simplistic design often makes a website or app more enjoyable to use.

 

A design approach which emphasizes simplicity has some core attributes that need to be considered. Apps and websites have to be easy to navigate, with clear textual content and well-thought design. Furthermore, since the space is limited, there needs to be a significant attention to detail, focus areas and readability. Every design choice needs to have a reason behind it.

 

The popular news outlet Huffington Post is one example of a great mobile-first design. The development strategy emphasized the way modern users interact with content: Easily skimmable content was the focus. Also, the app has less words on the homepage, making for an easy collage-style selection of articles for the user to click on. The design isnt too busy, and also includes a menu button which displays all the topics that the outlet covers.

The era of e-commerce

E-commerce is quickly becoming one of the main ways that people purchase products or services worldwide. Estimates suggest that, in the US alone, there will be over 230 million e-commerce shoppers by 2021.

 

 A mobile-first approach is essential for the ever-growing e-commerce industry. Apps that offer products or services need to be designed in a way that makes it easy for consumers to quickly purchase what they want. This means having web pages that load quickly on mobile phones with optimized images, great server response time and minimal amount of redirects. The apps also have to integrate other services like payment platforms, which allow consumers to purchase quicker. E-commerce, especially in fashion, is moving towards maximizing simplicity by copying the user-friendly clear design for mobile on desktop versions.

 

The online shopping giant Zalando, for example, shifted its focus to mobile after realizing that 57% of its shoppers were using the Zalando app to make purchases. Each individual department within the company holds regular workshops where the mobile-specific goals are established and communicated to the Zalando mobile team. This is the kind of initiative that comes from a business that embraces mobile as the main endpoint.

 

Mobile-first is a design mindset that caters to all businesses, big and small. Its pure agility in times of restless race and ingenious functionality that we all love so much. Mobile-first is essentially user-first and thats why it works.

¡Desafialo todo!