Mobile First est une philosophie de conception qui consiste à designer d'abord pour mobile, puis progressivement enrichir pour les écrans plus grands.
Philosophie :
- Design mobile d'abord (contraintes)
- Tablette ensuite (enrichissement)
- Desktop enfin (version complète)
Approche CSS :
/* Base : Mobile */
.container { width: 100%; }
/* Tablette */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { width: 1000px; }
}
Avantages :
- Priorisation : Focus sur l'essentiel
- Performance : Chargement optimisé
- Réalité : 60%+ trafic mobile
- Créativité : Contraintes = innovation
Mobile First ≠ Mobile Only :
Version desktop reste importante et enrichie
Concevoir avec contraintes = meilleur produit