Avant on travaillait nos sites en version desktop. Avec l’arrivée des smarphones, nous avons vu le jour des applications mobiles naitre. C’est pour cela que le mobile-first à toute son importance. D’ailleurs, les tailles d’écrans sont très nombreuses, surtout chez Android.
Mobile-first ?
Comme l’indique le terme “Mobile-first”, on commence par penser par le mobile en premier sur une grille de 8px (Grid 8). Autrement dit, on travaille la plus petite taille d’écran possible. D’où le terme de mobile-first, le mobile en premier. La meilleur base est la taille de l’iPhone SE (320 x 568 px).
Attention, chez Android l’unité est le dpi, car on fait appel à la densité de l’écran. Voici un petit récapitulatif pour comprendre :
ldpi
La multiplication
0,75x
Exemple pour 20 x 20 pixels (px)
15 x 15 px
mdpi
La multiplication
1,0x
Exemple pour 20 x 20 pixels (px)
20 x 20 px
hdpi
La multiplication
1,5x
Exemple pour 20 x 20 pixels (px)
30 x 30 px
xhdpi
La multiplication
2,0x
Exemple pour 20 x 20 pixels (px)
40 x 40 px
xxhdpi
La multiplication
3,0x
Exemple pour 20 x 20 pixels (px)
60 x 60 px
xxxhdpi
La multiplication
4,0x
Exemple pour 20 x 20 pixels (px)
80 x 80 px
Et au fur et à mesure, on travaille vers les tailles les plus grandes. De plus, les tailles d’interfaces se diversifie de plus en plus car pour un même projet, vous pouvez aller d’une taille de montre connectée, en passant par le mobile, la tablette, l’ordinateur pour fini par la télévision qui ont des résolutions de plus en plus grande.
Pensez petite ergonomie
Les éléments peuvent être traités en découpage, on parle d’atomic design.
Les atomes sont des éléments insécables, comme le texte, une couleur, une forme…
Les molécules sont un ensemble d’atomes comme un bouton.
Les organismes sont un ensemble de molécules comme une tabbar.
Grâce aux organismes, vous pourrez créer un design system complet avec l’état de tous les éléments dont vous avez besoin dans la création de template de votre page. Vos mieux travaillez en pourcentage.
UX Writer
Le texte est aussi important. Il faut adapter votre ligne éditoriale en pensant que sur le mobile, la majorité des utilisateurs ne lisent pas les textes. Veuillez à privilégier les illustrations et animations, suivi des titres avec peu de caractères, une petite description sur deux à trois lignes maximum et pour finir par un bouton. Les mots doivent être très court et les paragraphes doivent aller à l’essentiel.