Je ne suis pas fan de Mobile First

(… mais presque)

L’un des plus gros reproches que l’on peut faire au Responsive Webdesign, c’est de considérer les plateformes mobiles comme des étapes secondaires que l’on traite à la fin du projet, après avoir réalisé le design, l’intégration et le développement de la version “bureau”.

Dans cette optique, la question primordiale de la performance web se pose de manière flagrante : toutes les données masquées (display: none), ainsi que toutes les grosses ressources demeurent chargées – pour rien – sur terminaux mobiles.

Mobile First ?

Et ainsi est née la philosophie “Mobile First” (et un bouquin), qui incite les concepteurs à se concentrer sur le plus petit dénominateur commun, le smartphone, puis à enrichir au fur et à mesure que l’écran s’agrandit, dans le but de ne pas charger inutilement de lourdes ressources aux terminaux n’en nécessitant pas.

Selon Saint Mobile-First, le smartphone doit être la priorité à toutes les étapes (ergonomie, design, webperf, intégration, développement) et ce, dès en amont du projet web.

Dans la pratique, bien que les avantages de cette philosophie sont parfaitement indéniables, j’ai du mal à la respecter point par point…

Point de vue Design

Commencer son projet web uniquement par des zonings et maquettes de smartphone me met mal à l’aise : ça ne me semble pas “naturel”, et de toute façon nos clients s’attendent encore à voir des visuels sur “bureau”.

En attendant que des outils massivement employés tels que Photoshop puissent pondre des maquettes fluides en pourcentage et en “em”, je pense que la seule solution viable est de produire trois types de maquettes en parallèle : smartphone, tablette et bureau.

Point de vue Webperf

En terme de performances web, considérer le smartphone comme point de départ n’est pas une aberration mais cela implique plusieurs suppositions :

  • Que l’on soit sûr de savoir détecter un smartphone (via sa taille ? via le touch ? via sa connextivité ? via User Agent ?)
  • Qu’un smartphone soit moins performant qu’un ordinateur de bureau ou un portable
  • Que la bande passante d’un smartphone soit toujours moindre que celle d’un ordinateur de bureau

Bien que la plupart de ces suppositions soient vraies, il n’est pas rare que la définition d’un smartphone HD soit supérieure à celle d’un écran de bureau, et il m’arrive souvent d’être en 3G (voire Edge) sur mon laptop en partage de connexion.

Bref, en attendant de pouvoir détecter facilement la connectivité des mobiles, ce raisonnement sera toujours un peu biaisé puisque le postulat est souvent « si c’est petit, c’est forcément que la bande passante est faible ».

Point de vue Intégration

Pour finir, j’ai du mal à intégrer une page en pensant “mobile d’abord”.

Je prends un exemple que je connais bien, le menu ne navigation de mon site perso…

L’ergonomie, les fonctionnalités et le design du menu de navigation sont radicalement différents entre sa version mobile et sa version bureau :

  • Si je débute par la version mobile en enrichissant pour bureau (styles de base, puis styles en min-width: 1025px par ex.), je vais devoir écraser tout mon (gros) lot de styles de base
  • A l’inverse, si je débute par la version bureau en dégradant pour mobile (styles de base, puis styles en max-width: 1024px par ex.), je vais aussi devoir écraser tous mes styles de bureau

Dans les deux cas de figure, j’ai un gros boulot de réécriture de styles, de prise en compte des priorités CSS, de soucis de maintenance, voire d’arrachage de cheveux.

Au final, mon choix sera vite fait : ce ne sera ni “Mobile First”, ni “Desktop First”, mais “Ex-aequo” tout simplement. C’est à dire que je vais scinder en trois media queries exclusifs qui seront traités en parallèle dès le départ :

  • des styles de base, commun à toutes les surfaces
  • des styles pour mobile (max-width: X)
  • des styles pour bureau (min-width: X+1)