Chose promise chose due, je vous présente plus avant la dernière CSS de ce site, et un petit retour d'expérience sur une approche mobile-first.

Reprenons les objectifs énoncés dans le billet précédent et détaillons !

Lisibilité

Pour le dire clairement, j'en avais marre d'entendre que mon site était pas assez lisible, et moi-même je recherchais avant tout un confort de lecture tous périphériques confondus.

En postulat de base, j'ai fixé la taille de fonte à 16 pixels, et utilisé la police Roboto, très agréable à lire sur petit écran comme sur un grand. D'ailleurs, sur les grands écrans, la taille se porte même à 17 pixels, rien que pour vos yeux (fatigués s'entend).

Côté contrastes, bien sûr, les valeurs des couleurs ont été choisies en utilisant les outils habituels. Allez lire « Les contrastes de texte sur Openweb », cela m'évitera de devoir tout ré-expliquer ici ce qui a été mieux expliqué là-bas.

Le principal point qui bloquait sur mes précédentes CSS était le nombre de caractères par ligne, trop élevé. Cette fois, je l'ai réglé très simplement par un max-width: 40em; qui, d'après plusieurs essais, permettait un bon compromis (les grandes lignes ne me gênent pas, ce qui me handicape fortement pour comprendre que des lignes plus courtes sont plus agréables pour la plupart des utilisateurs).

Sinon le mot d'ordre était : de l'air, de l'espace, aérons ! Vivent les padding et autres margin à grands renforts d'em.

Bien évidemment, j'ai repris divers éléments de mon « nano-framework » CSS autoproclamé, RÖCSSTI.

Une CSS mobile-first

Disons-le tout clair, à l'instant où j'écris, cette CSS est la seule que j'ai conçue en mobile-first. Donc, pardonnez-moi d'avance si je dis des évidences ou des bêtises.

La première chose qui est bizarre en mobile-first, c'est justement de fonctionner à l'envers. Quoi qu'en disent certains puristes, en milieu professionnel, je pars toujours de la version desktop pour atteindre la version mobile. Non pas que l'approche mobile-first soit mauvaise, mais elle est peu répandue (mes clients ont parfois déjà du mal à penser « petit écran », alors « petit écran d'abord »…).

Donc vos CSS d'habitude jonchées de @media (max-width: 640px) { voient plutôt arriver des @media (min-width: 400px) {. C'est une habitude à prendre.

Le but du jeu est de définir le cœur de votre CSS pour le mobile, un tri rigoureux s'impose, vous ne devez garder que le strict nécessaire, et le cas échéant, fixer d'entrée de jeu des règles qui vont servir (là, il faut bien faire attention à éviter les redéfinitions). Pour cela, RÖCSSTI ainsi que ma précédente CSS m'ont bien aidé pour ne pas perdre de temps à cause d'oublis.

Le principal ennemi du mobile-first, c'est… notre écran quand nous codons ! Comment penser petit écran alors que mon propre écran ne l'est pas ? Il y a bien l'option « je fais un changement dans ma CSS et je teste de suite sur un petit écran », mais c'est pénible.

J'ai trouvé un très bon allié en la Web Developper Toolbar, notamment grâce à l'option Redimensionner > Modèles Adaptatifs.

C'est vraiment très pratique, ainsi, l'impact d'une modification peut être vu très rapidement dans plein de résolutions. On est d'accord, cela ne remplace pas des tests, mais c'est vraiment un outil très bien.

La règle d'or : il faut à tout prix être bien satisfait d'un palier pour envisager une résolution supérieure, quitte à chipoter et fignoler.

Des performances

L'approche mobile-first va de pair avec une contrainte forte de performances. Pour cela, pas trop de souci, les Data-URL se sont chargées d'afficher les quelques rares images (ces images PNG ont été fortement optimisées avant d'être transformées), et sinon les propriétés de CSS3 viennent générer les quelques effets pour embellir ce thème quelque peu épuré.

Côté CSS, c'est un poids très raisonnable : 3,2 ko minifiée et compressée (avec donc des gradients et des Data-URL aux codes particulièrement lourds).

Afin de diminuer le poids du JavaScript par rapport à l'ancien skin, je me suis orienté vers jQuery In parts (jQuip), largement suffisant pour mes besoins, et bien plus léger que jQuery.

Au final, les chiffres sont assez satisfaisants, cela donne sur la page d'accueil :

• selon Web Page Test, le first view est à moins de 2 secondes et le repeat view est à moins d'une seconde sur un navigateur de type desktop,
• d'après le même test, le poids total de la page est à 58 ko pour 8 requêtes.
• Côté mobile, selon Mobitest et Web Page Test, les temps de rendu sur mobile sont en moyenne en-dessous de deux secondes et demi. L'approche mobile-first y est pour beaucoup !

Je pourrais encore améliorer en me passant totalement de JavaScript ou en optimisant plus son utilisation (ce qui est tout à fait possible), mais cela viendra dans un second temps. Avoir beaucoup travaillé les performances lors de la précédente refonte m'a fait gagner énormément de temps. Le gros du boulot étant déjà fait, je n'avais qu'à me concentrer sur ce que je faisais de nouveau.

Du responsive

Je n'avais pas d'idée précise en démarrant la CSS, j'ai légèrement tatonné selon les périphériques, mais les choix sont venus rapidement : le contenu impose les adaptations avec les contraintes de lecture. Par exemple, les images de mon portfolio passent côte à côte passés les 500 pixels pour une raison simple : elles font toutes 200 pixels de largeur. En prévoyant une marge de sécurité entre ces images histoire de faire respirer le contenu (il y en a deux maximum par réalisation), le tour est joué.

C'est le même principe pour la gestion du menu et des images du portfolio sur la plus haute résolution prévue : en prévoyant une marge de sécurité, j'ai pu facilement m'amuser avec CSS pour les faire sortir du contenu. Du coup, le site profite facilement des meilleures résolutions.

La propriété qui m'a énormément aidé est la suivante : max-width: 40em;. Au lieu de raisonner en largeur fixe, j'ai raisonné en largeur maximale. Du coup, cela m'a beaucoup facilité la vie tout en solutionnant mon postulat de lisibilité de facto.

Après, j'ai ajouté petit à petit les effets CSS3 à partir de certains paliers pour soulager les plus petits écrans de rendus non indispensables.

La grosse (et bonne) surprise a été la gestion du zoom global : le site répond très bien au zoom global, avant comme arrière.

Et Internet Explorer dans tout cela ?

Disons-le assez franchement, les vieilles versions d'Internet Explorer ont été le cadet de mes soucis. Les visites sur mon site sont à 10% pour IE toutes versions confondues, et la version 9 et 10 représentent 60% de ces 10%. Autrement dit, j'ai considéré que les vieilles versions d'IE étaient quantité négligeable. Et les autres skins sont toujours disponibles si ça dérange.

Dans un second temps, je pourrai ajouter quelques classes conditionnelles pour améliorer le tout sous les IE inférieurs au 9, c'est tout à fait envisageable et faisable, le ciblage par classes conditionnelles n'interfèrant pas avec la CSS « normale ».

En conclusion

Faire une approche mobile-first est un exercice de style intéressant (si vous me permettez ce jeu de mot). Cela nous invite à casser les habitudes « je démarre en desktop et je cache des contenus » pour dire « je construis au fur et à mesure ». Cette approche est très efficace : les « petits écrans » se retrouvent à rendre le strict minimum au lieu de se taper le boulot à double, et ce sont les plus hautes résolutions qui encaissent une CSS plus « lourde ». Je mets « lourde » entre guillemets, car vu le poids de la CSS, c'est vraiment peanuts.

Ce n'est pas difficile en soi, c'est une petite gymnastique intellectuelle à prendre. Je n'ai pas pris énormément de temps pour la réaliser, c'est l'affaire de 2 bonnes journées de travail.

À mon humble avis, cette approche sera standard dans quelques années, le temps de se débarrasser des navigateurs qui la gênent fortement (IEs inférieurs au 9) et d'éduquer nos clients ainsi que nous-mêmes à cette manière de travailler. Elle a le mérite de mieux équilibrer les rendus et les performances entre les divers périphériques.

La sensation qui m'a motivé tout le long était l'impression de faire une CSS plus efficace, une CSS bio en quelque sorte.

Si vous voulez étudier la CSS, je vous invite à la lire ici : ND Mobfirst non minifiée. Attention, des morceaux d'humour débile peuvent s'être glissés dedans.

Par contre, une chose me sidère : j'ai écrit la base de la structure de ce site il y a presque 9 ans, même si je l'ai légèrement modifiée depuis, la structure n'a que peu évolué. Vous ne trouvez pas in-cro-yable que le code que j'ai pondu (avant même que le Web Mobile existe) me permette de faire de telles choses 9 ans après ? L'expression « je développe des sites pour les navigateurs du futur » prend ainsi une sacrée dimension.

Songez à cette pérennité quand on mettra en doute les standards du Web.