Approche de conception qui commence par l'écran le plus petit avant d'adapter vers les écrans plus grands. Proposée par Luke Wroblewski en 2009, dans un contexte où le trafic mobile dépassait le desktop. Mobile first force à prioriser le contenu et les fonctionnalités essentielles : l'espace restreint interdit le superflu. L'approche inverse (desktop first) produit des versions mobiles tronquées et frustrantes. Le mobile first influence aussi le CSS : les media queries ajoutent de la complexité vers le haut, pas l'inverse.
Dessiner les maquettes sur une largeur de 375px avant le desktop. Prioriser les contenus par importance : ce qui n'est pas essentiel sur mobile ne l'est probablement pas sur desktop. Écrire les CSS en mobile first avec des min-width dans les media queries. Tester les interactions tactiles : les zones de tap, les swipes, les gestes à une main. Vérifier la performance sur réseau 3G : le mobile first ne concerne pas que la mise en page, mais aussi le poids de la page.
Le Financial Times a adopté une approche mobile first pour sa refonte de 2017. Le temps de chargement sur mobile est passé de 12 secondes à 2 secondes, et le nombre de lecteurs mobiles a augmenté de 15%.