Luke Wroblewski a donné son nom à cette pratique en 2009, mais la logique était déjà évidente. Les téléphones étaient devenus le principal moyen d'accéder à Internet, et concevoir d'abord des interfaces pour ordinateurs obligeait les concepteurs à condenser la complexité sur de petits écrans par la suite. L'approche « mobile first » inverse cet ordre. On part du plus petit écran, on détermine les éléments essentiels, puis on étend la conception aux tablettes et aux ordinateurs.

Cette contrainte est productive. Un écran étroit impose une sélection rigoureuse. La navigation se réduit à un menu. Le contenu s'organise en une seule colonne. Chaque fonctionnalité doit justifier son espace. Les concepteurs privilégient les zones tactiles intuitives, envisagent l'utilisation à une main et anticipent les connexions lentes. Lorsque l'interface s'étend à un écran plus grand, l'espace supplémentaire est utilisé pour aérer l'interface et afficher des panneaux secondaires, plutôt que d'être encombré d'éléments superflus.

Pratiques fondamentales

• Commencez les wireframes à la largeur d'un téléphone.
• Priorisez impitoyablement la hiérarchie du contenu.
• Les cibles tactiles de conception doivent avoir une valeur minimale de 44 pixels.
• Passez ensuite aux tablettes et aux ordinateurs de bureau.

La conception adaptative et l'approche « mobile-first » sont souvent liées. L'approche « mobile-first » définit la priorité, tandis que la conception adaptative gère l'ajustement aux différents points de rupture.