Over the years, mobile devices have become very important, and you really have to take them into account when designing a web. Here are some mobile usage info:

– There are around 1.2K million mobile users in the world.
– In the USA, 25% of mobile users are only mobile users (They seldom use PC).
– Mobile apps total 10.9K million of downloads.
– Mobile device sales have increased by 85% around the world.

The normal process in web development has always been, designing the web for browsers on PC and, subsequently, adapting this web to different devices (tablets, mobile, etc.), known as responsive web design.

For some years, there has been another trend, which improves and perfects the design of a web, mobile first. This is just starting with web design first on mobile devices. In this way, we can decide whats the minimum that must be included in the web and what you always have to see.


As we advance in screen size, we can adapt the different parts and add more information.

When can we use it?

It is completely advisable to use it for the start of any design project of any web, since, as we previously mentioned, it helps us to improve (it is easier to fill from a basic design, than to clean up from a complete web design.) the design as well as to provide more agility, not having to waste time at the end in adapting a web to mobile devices.
But it is not always possible to make use of it, since, for example, we find customers who already have their web designed and up and running, and what they want is to adapt it to mobile devices.

Advantages

– Content is prioritized over everything else
– Create a user experience that favors mobile users
– It reduces the download times of your webs most important resources
– It offers the same user experience on all platforms

Disadvantages

– Requieres more effort and time for its development from scratch
– Necessary to have a team who knows how to apply it

As we can see, it offers more advantages than disadvantages, although it needs an initial investment of time to know how to use it.

Work methods

As we have said, the way of working will be different, first satisfying the requirements for mobile devices. As a first step, it is necessary to decide which views or screens the mobile version will access, since it is normal that not all views of the desktop version are indispensable in the mobile version. It will also be necessary to select what elements are necessary and ideal, eliminating everything superfluous. Normally, a different header and menu is usually also designed. In general, all content must be adapted: typography, width of elements, placement of elements (usually vertically and never horizontally, favouring the type of mobile screens), substitution of links by buttons, etc. And finally, we must confirm that the entire design fits perfectly. For this validation, it will be necessary to test the design in the different devices, being able to help us from different simulators and emulators.

Written by Pedro Sanchez