Think Mobile First !
Le courant de pensée “Think Mobile First” (penser mobile d’abord) prend de plus en plus d’essor pour de multiples raisons, notamment :
- L’utilisation de mobile explose
- Le Web mobile va à l’essentiel
- Le Web mobile permet bien plus
Think Mobile First, c’est quoi ?
Cette philosophie est pour le moins séduisante puisqu’elle nous oblige à repenser nos codes et carcans de design web : commencer par le plus dénominateur commun (le mobile), puis enrichir progressivement pour les écrans larges; or les éléments inutiles n’ont pas de place dans un écran de 480 pixels de large !
L’idée, bien que récente, n’est pas nouvelle. Elle a été introduite par Luke Wroblewski (dont le livre “Mobile First” sera très prochainement traduit en français), reprise dans plusieurs conférences de webdesign mobile, et traduite sur Pompage.net.
Oui mais…
Le principal écueil de cette méthode est qu’elle repose généralement sur de la détection via des fonctions CSS3 MediaQueries, non reconnues par Internet Explorer 6 à 8.
Il existe bien entendu des polyfills (alternatives) tels que Respond.js, mais je ne suis guère fan de tout ce qui surcharge les requêtes, les traitements et les performances de navigateurs déjà mal en point.
Vers une solution idéale ?
Du coup, j’ai peut-être une solution qui devrait fonctionner assez bien partout, quel que soit le navigateur…
Première étape : par défaut, les styles CSS pour la version mobile
<link rel="stylesheet" href="styles.css">
Deuxième étape : des styles enrichis pour les écrans larges
Cette feuille de style pourra bien entendu comporter des media queries internes sous forme @media (min-width: 1200px) par exemple pour faire des distinctions et des styles différents selon les tailles.
<link rel="stylesheet" href="styles_big.css" media="screen and (min-device-width:640px)">
Troisième étape : cibler Internet Explorer
Puisqu’il ne reconnaît pas les mediaqueries avant IE9, on lui charge la feuille CSS “big” via commentaire conditionnel. Seul Explorer de bureau est ciblé; IE mobile se contente de la feuille de base mobile.
<!--[if lt IE 9]> <link rel="stylesheet" href="styles_big.css"> <![endif]-->
Tout réuni
Au final, on obtient :
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles_big.css" media="screen and (min-device-width:640px)"> <!--[if lt IE 9]> <link rel="stylesheet" href="styles_big.css"> <![endif]-->
Au final, nous avons 2 feuilles de styles appliquées. Les avantages principaux étant non-seulement de ne plus avoir à se soucier de savoir comment détecter les mobiles, mais également de ne pas leur faire charger des ressources inutiles pour eux.
Que pensez-vous de la philosophie générale et de la technique proposée ?
EDIT : suite à de nouveaux rebondissements, il s’avère que cette méthode nécessitant deux fichiers CSS n’est pas forcément la plus performante pour les mobiles. Ce billet sera sans-doute remanié en conséquence.
