El mobile first en el disseny web

No és cap sorpresa que el mobile first s'hagi convertit en un d'aquests conceptes imprescindibles per a tots els projectes de disseny web. En 2015, quan Google va anunciar que s'havien realitzat més cerques des de mòbils que des d'ordinadors, el panorama digital va evolucionar.

Tant és així que, des de la Teva Web agència de disseny web Barcelona, portem diversos anys veient la importància de crear o adaptar les pàgines web a les necessitats de l'entorn mòbil. En conseqüència, repassem aquest concepte per veure la seva relació amb el disseny web actual.

Perquè parlar de mobile first ja no és una tendència. És més aviat un nou requeriment per a totes les pàgines webs. I és que si no tenim això en compte, estarem deixant de banda a més del 50% de les cerques realitzades a Internet. Així que més val aprofitar-ho!

Què és mobile first

Per a començar a parlar sobre el mobile first, és important que primer definim què és. Com el propi nom indica, es tracta de donar prioritat al mòbil com a plataforma principal. És a dir, basar i enfocar tots els plantejaments de disseny web i funcionament al mòbil.

El mobile first és un concepte que pertany al disseny web i designa l'optimització en telèfons mòbils. Per tant, si parlem de mobile first, ens referim a un disseny web que dona prioritat a com es visualitza una pàgina web en mòbil.

Seria probable que algú ara es preguntés si això és just o si no hauríem d'enfocar el disseny web a com el veiem a través d'ordinador i ja després adaptar-ho a mòbils, optant per un disseny responsive… Però qui tindria raó? Anem-ho a veure.

Per què és important que un disseny web sigui mobile first

El principi pel qual es regeix el disseny web mobile first, és que sempre que hàgim de fer un esforç, la primera passa a fer ha de ser la seva optimització per a mòbils. I, posteriorment, adaptar-ho a la resta de visualitzacions.

Això té una lògica: el que funcioni bé en mòbil, es podrà adaptar fàcilment a ordinador o tauleta. Però aquest principi no funciona sempre de forma inversa. Si tenim en compte que les cerques mòbils són les principals, això cobra major sentit.

Especialment, les pàgines web amb un enfocament B2C (a consumidor-persona, a diferència d'aquelles dirigides a serveis o productes per a empreses), les cerques mobile passen molt per sobre de les realitzades a través d'ordinadors.

La importància del mobile first per a Google

Sí, el mobile first és un principi important per al posicionament en Google. Sense anar més lluny, l'eina Page Speed sempre avalua en primer lloc el rendiment d'una pàgina web en mòbils.

Tenint en compte que a Espanya és el motor principal, sempre hauríem de tenir present les prioritats de Google, i aquestes es dirigeixen, com no, al telèfon intel·ligent. El disseny web mòbil es basa en:

1. Donar prioritat al contingut i la informació important
2. No invertir temps de programació en funcions no adaptables
3. Oferir un bon rendiment en tots els mòbils
4. Informació de fàcil i ràpid accés
5. Dissenys i funcionalitats pensades per a mòbil
6. Evita imatges de molta grandària que no harmonitzin
7. Codi simplificat, que carregui ràpid i eviti errors
8. Fonts i tamanys pensades per a les pantalles mòbils
9. Botons i menús a la mesura de les pantalles petites

Si tenim en compte aquests principis del disseny web mobile first, ja tindrem una gran part guanyada i evitarem possibles problemes futurs. Recorda que és important complir-los tots i oferir un contingut de qualitat a l'usuari!

Mobile first responsive

Nota important: un disseny mobile first hauria de ser responsive. És a dir, que s'adapta a totes les pantalles des de les quals es vagi a visualitzar la pàgina web. Diferenciarem: una cosa és donar prioritat a el mòbil i una altra permetre que s'adapti.

Per tant, una no discrimina l'altra… Tot el contrari. Un bon disseny mobile first és responsive, perquè es vegi en tots els mòbils possibles. Com també en els ordinadors.

I mobile friendly?

Aquest és un altre concepte per a avaluar si una pàgina web és “amigable” amb les pantalles dels mòbils. És a dir, si el disseny del meu web respecta una sèrie de principis que fan que es visualitzi bé en un mòbil.

Tornem a Google, com de costum. Existeix una eina anomenada Prova d'optimització per a mòbils, en la qual pots posar la url del teu web per a saber com de mobile friendly és i veure si complim amb els principis establerts.

Els factors principals és el fàcil accés al contingut, si és responsive (s'adapta a la pantalla) i es pot llegir amb claredat, la seva velocitat de càrrega i les grandàries dels botons que apareixen en la web. Lletres petites, webs lentes i amb contingut que es mou, seran penalitzades.

Els principis del disseny web mobile first

Ara que ja coneixem els fonaments del disseny web mobile first, podem entrar una mica més detalladament a explicar-lo. Els principis per a tenir un disseny mobile friendly, es basen en les següents recomanacions.

• Temps de càrrega: experiència de navegació ràpida, on els elements apareixen ràpidament i el text no es mou durant el procés
• Imatges d'alta qualitat: per a evitar que es vegin borroses en les pantalles d'alta definició dels mòbils. Això sí, que no pesin massa, ja que alentiran la càrrega de la pàgina.
• Grandària de la font: ha de poder llegir-se, sense que l'usuari hagi de fer zoom per a poder veure còmodament un text. El mateix amb els botons, no pot passar que els apretem sense voler o que no funcionin.
• Disseny web responsive: com vèiem abans, el disseny es visualitza i adapta correctament a totes les pantalles, tant de mòbil com d'ordinador.
• Contingut audiovisual: fàcil d'entendre, directe i que enriqueixi l'experiència d'usuari en la nostra pàgina, augmentant el temps d'usuari i interactivitat.
• No saturis la visualització amb pop-ups i ofereix formularis amigables, per a tenir una experiència i disseny web satisfactoris.

Si tenim en compte aquests principis del disseny web mobile first, ja tindrem una gran part guanyada i evitarem possibles problemes futurs. Recorda que és important complir-los tots i oferir un contingut de qualitat a l'usuari!

Com el mobile first millora el posicionament

Arribem el final i culminem amb la cirereta del pastís. Com podies imaginar, el disseny web mobile first i responsive té un impacte en el posicionament de la nostra pàgina web. Com he manat dient, sempre mana Google. Però més enllà d’això:

• Els visitants d'una web tendeixen a abandonar aquelles pàgines que triguen més de 3 segons a carregar
• Moltes de les compres es realitzen a través de mòbil, encara més tenint en compte les funcionalitats de les plataformes de Facebook (Meta)

Arribats aquí, només ens queda recordar que un disseny adaptable és obligatori, ja que afecta la nostra visibilitat i impacti directament en els resultats. No hem de concebre un disseny mobile first sense que sigui responsive.

Per tot això, pensar en un disseny web mobile first ens permet donar importància a la realitat, amb versatilitat i oferint la millor experiència d'usuari possible. Per tot això, més que una tendència, una necessitat!