Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

CSS et Mobile First : procéder par amélioration progressive

CSS et Mobile First : procéder par amélioration progressive

Le Web mobile est un environnement de développement en plein essors et nécessite une attention particulière de par les contraintes qu’il impose.

Penser responsive est un bon début pour rendre l’expérience utilisateur accessible sur tout support, mais peu encore se soucient du temps de chargement qui fait voler en éclats le rapport coûts/bénéfices d’une intégration adaptative.

Voir la démo Télécharger la source

La dégradation progressive en première réponse au responsive

La première vague de designers qui ont répondu à la portabilité de leurs œuvres s’est ruée vers une solution facile qui était la dégradation progressive. Elle consiste en supprimer les effets et éléments moins essentiels d’une page en fonction de résolutions décroissantes.

Cette solution royale pour des designs déjà accessibles sur bureaux ne demande que de rétablir les largeurs en pourcentage, et de modifier quelques valeurs ou propriétés CSS pour laisser le tout s’adapter au support de l’utilisateur, comme ci-contre :

article { float: left; width: 31.25%; margin: 1.0416666666%; } /* 3 colonnes(proportions de 960.gs) */
@media screen and (max-device-width: 640px),
@media screen and (max-width: 640px) {
	article { width: 47.9166666666%; } /* on passe à 2 colonnes */
}
@media screen and (max-device-width: 320px),
@media screen and (max-width: 320px) {
	article { float: none; width: auto; } /* on passe à 1 colonne */
}

Quelques exemples : www.juslisen.com, 10k.aneventapart.com, webdesignerwall.com.

(Bien entendu, je n’évoque ici que l’adaptation du design, et non du contenu en lui-même, qui soulève bien d’autres problèmes qu’un débat a tenté de résoudre ici même).

Comme le souligne Luke Wroblewski dans son ouvrage Mobile First chez A Book Apart, la navigation sur mobile croît sans cesse, au point qu’on peut espérer dépasser le milliard d’internautes mobiles d’ici à 2013. La priorité leur revient due aux performances limitées de leurs smartphones, et à ce jour, comme après chaque découverte, nous sommes à l’étape d’optimisation et de démocratisation des avancées.

L’amélioration progressive en réponse au temps de chargement

Lorsque vous appliquez la dégradation progressive, vous ne donnez pas moins de travail au navigateur mobile. En fait, vous lui en rajoutez, d’autant de « couches » que vous superposez. Le CSS est d’abord interprété comme pour un affichage bureau, pour ensuite, étape par étape, apporter des correctifs et rendre l’affichage adapté au mobile. Le bilan est lourd, une feuille complète et 2 ou 3 quarts de feuilles ont étés interprétés successivement.

L’idée est alors de penser d’abord à l’interface mobile, puis d’apporter à chaque palier de résolution une valeur ajoutée à l’expérience utilisateur, traduite par une réorganisation des éléments, l’apparition de contenus moins essentiels, une division du contenu en colonnes etc.

Avec quelques media-queries à notre secours, on parvient à quelque chose du genre

article { margin: 1.0416666666%; } /* 1 colonne */
@media screen and (min-width: 320px) {
	article { float: left; width: 47.9166666666%; } /* on passe à 2 colonnes */
}
@media screen and (min-width: 640px) {
	article { width: 31.25%; } /* on passe à 3 colonnes */
}
Amélioration Progressive screenshot 1

Cliquez sur l'image pour agrandir

Chaque support ne chargera que ce qui lui est destiné. Un mobile, pourvu d’un piètre processeur, ne devra alors interpréter qu’une infime partie du CSS. La tablette, un peu plus performante, appliquera sans rouspéter la couche supplémentaire qui lui est destinée, et ainsi de suite.

Nous avons donc offert ainsi la solution optimale répondant à chaque palier de besoin.

Notions à prendre en compte : un peu de bon sens

Il manque encore quelques précisions pragmatiques pour savoir assigner de manière pertinente le CSS efficace à vos éléments. Quelque chose qu’on oublie aisément lorsqu’on dégrade, c’est de supprimer les pseudo-éléments :hover pour les mobiles et tablettes pour la simple et bonne raison qu’ils ne sont pas visibles.

En amélioration, ces éléments seront donc à placer sur le format bureau de votre design, et non à l’origine, sur mobile ; à noter que c’est d’autant plus primordial si vous utilisez des transitions/transformations :

a.social { display: block; width: 30px; height: 30px; /*...*/ }
@media screen and (min-width: 640px) {
	a.social { transition: all 0.3s ease; }
	a.social:hover { transform: rotate(30deg) scale(0.9); }
}
Amélioration Progressive screenshot 2

Les transformations ne seront pas chargées sur mobile

Enfin, une question que beaucoup se posent sûrement, c’est de savoir quelles sont les largeurs à partir desquelles on « passe au palier supérieur ».

Je vois apparaître beaucoup de résolutions d’appareils dans les medias-queries, et personnellement, je pense que ça n’a pas de sens. Vous ne faites pas un site de 1024 pixels pour un écran de 1024 pixels de large ? Pourquoi faire un design de 480 ou 640 pixels ?

Commencez par analyser vos besoins avant de figer vos paliers. Définissez un seuil de clarté à partir duquel l’ajustement fluide ne suffit plus, à partir duquel vous réorganiserez vos éléments ; celui-là même qui donnera sa valeur au min-width de votre media-query. Vous aurez alors quelque chose de cohérent et de pertinent, plutôt que de vous contraindre à penser aux résolutions d’écrans, qui changent de mobile en mobile.

Pour illustrer mes propos, je vous ai concocté une maquette. Je définis mes paliers de lisibilité en fonction de la taille de l’image. Lorsque j’ai 2 colonnes, je dis qu’elles sont appréciables de 200 pixels à 300 pixels (largeur maximale de l’image), ce qui correspond à un palier de 418 pixels à 626 pixels. Je vous invite à lire les commentaires de la feuille de styles pour le détail des calculs. Afin de vous rendre compte, le mieux est que vous testiez par vous-même en ajustant la taille de votre navigateur :

Amélioration Progressive screenshot 3

D’accord, le formulaire pique les yeux, je vous le concède.

Voir la démo Télécharger la source

Conclusion

La première étape pour penser mobile, c’est penser optimisation des performances.

L’amélioration progressive est une solution qui demande d’inverser l’ordre des priorités et d’être assez flexible pour penser d’abord au petit écran, mais permettant d’alléger de beaucoup l’interprétation de vos feuilles de styles sur nos pauvres petits smartphones surmenés par notre avidité technologique. Ce n’est là, bien sûr, qu’un pas vers l’optimisation globale d’un site web pour mobiles, mais qui mérite son attention. J’aimerais enfin mentionner l’article de Raphaël Goetter sur le sujet qui complète ce qu’il y a à dire sur l’optimisation des CSS.

Merci à vous qui m’avez lu jusque là, à Matthieu Bué pour sa patiente contribution, et à l’équipe du WDFR pour m’offrir cet auditoire.

(Les images sont tirées du jeu Rayman Origins, empruntées à jeuxvideo.com)

A propos de l'auteur : Nicolás Torres

Étudiant de 20 ans à HETIC, je m'épanouis dans le Web depuis plusieurs années déjà. J'apprends et j'expérimente, toujours à la recherche du beau et du bon sens. Vous me trouverez sur Twitter pour discuter et partager !

  • goetter

    Merci pour cet article !

    Concernant l’optimisation des performances, il y aurait moyen de faire un article entier sur le sujet.

    Quelques pistes :
    ✔ Réduire les requêtes (un seul fichier CSS, Sprites, Data URI, JavaScript unifiés, …)
    ✔ Compresser les images du site
    ✔ Ne charger certaines images que sous condition (largeur minimale)
    ✔ Ne charger certains scripts que sous condition (largeur minimale)
    ✔ Employer les Media Queries pour les Vidéos et l’Audio
    ✔ Limiter les scripts et frameworks JS
    ✔ Préférer CSS3 pour des effets de confort (plutôt que JS)
    ✔ Charger vos ressources JS en asynchrone / différé
    ✔ Etc.

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    L’approche est bonne, seul souci, les vieux IE ne comprendront pas les media-queries, et du coup, ils vont se taper la version mobile. Ce n’est pas dramatique, mais c’est un problème !

  • Pingback: Mobile | Pearltrees

  • http://twitter.com/Twikito Matthieu Bué

    Pour les vieilles versions d’IE, puisqu’uniquement sur desktop, on pourrait se permettre les commentaires conditionnés, non ?

  • theotix

    Je ne veux pas troller mais les vieux IE ne son même plus supportés par leurs créateurs, donc je crois qu’on peux laisser tomber.

  • goetter

    Oui enfin là on parle quand-même de IE6, IE7 et IE8… ce n’est pas trop négligeable :)

  • goetter

    Dans ce cas, il faudrait revoir la façon de procéder et utiliser les Media Queries sous forme de link HTML et non sous forme de @media. Non ?

  • theotix

    Pour moi les “vielles version” d’IE comme à dit Twikito, pour moi c’est celles antérieurs à 6.

  • http://twitter.com/geoffrey_crofte Geoffrey Crofte

    Merci pour cet article Nicolas :)

    Juste un point concernant l’aspect fluide, en lisant l’article on a l’impression que la création d’une structure fluide est indispensable pour réaliser un design responsive. (en tout cas c’est l’impression que j’ai eu, et pourtant je sais que ça ne l’est pas)

    Nous sommes bien d’accord : il est possible de faire du responsive sans design fluide ?

    Au plaisir !

  • goetter

    Non. Pour le coup, IE6 à IE8 ne reconnaissent pas les Media Queries.

    Note : si par “antérieur à IE6″, tu parles de IE4 et IE5, alors oui on s’en fiche depuis quelques années.

  • http://twitter.com/geoffrey_crofte Geoffrey Crofte

    Euh… Tu t’occupes encore de IE 5.5 et versions inférieures ?

  • theotix

    ha ok ben c’est IE non mais c’est assez ..chiant.. de devoir prendre en compte un navigateur qui ne respecte pas les standard du web mais que plein de personne utilisent.

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    (un autre Nicolas :) ) C’est tout à fait possible, je trouve même plus facile pour commencer de faire du responsive sans design fluide. En tout cas, c’est comme ça que j’ai appris. :)

  • http://twitter.com/Twikito Matthieu Bué

    Evidemment, mais c’est tout de même bien plus contraignant sans design fluide, vu que les dimensions sont de plus en plus nombreuses, et que ça va continuer !

  • http://twitter.com/stefan_cova stefan cova

    On peut utiliser mediaqueries.js pour les vieux IE
    http://code.google.com/p/css3-mediaqueries-js/

  • goetter

    Pour ma part, je trouve beaucoup plus contraignant de gérer des pourcentages partout. Tout simplement parce que certains éléments ne s’accordent pas avec ce type d’unité.
    Et que penser des padding en px au sein d’éléments dimensionnés en % ?

  • http://twitter.com/Twikito Matthieu Bué

    C’est pas faux. Je crois vraiment que ce sera un parti pris par le designer pour sa maquette. En gros, on a pas fini de se prendre la tête pou faire du responsive design ! Ça ne fait que commencer ! ;)

  • http://twitter.com/noclat Nicolas Torres

    Pour répondre à ceux qui parlent de compatibilité : ce n’est pas l’enjeu dans cet article. J’évoque une technologie moderne en vue de proposer de faire évoluer les réflexions quand au responsive, et non une solution ou un template applicable à tous les projets.
    Cependant une solution serait en effet d’appliquer sous commentaires conditionnels un style spécifique pour IE8 et antérieurs. Une fois le style écrit par amélioration, il est simple de reconstituer le format screen.

    Quant à la question soulevée par Geoffrey, il est bien entendu possible de parler responsive sans parler fluide ! On aurait eu le même résultat avec des largeurs fixes, en fixant des points de rupture adaptés aux dimensions des formats du site.

  • http://www.ccd-design.com Christophe Cussigh-Denis

    Je trouve tout de même qu’on perd en pertinence si on part sur un design non fluide. On retombe dans ce cas dans les vieux travers de faire des mises en pages adaptées spécifiquement à certains devices (typiquement les iDevices). Il faudra dans ce cas adapter les CSS en cas de nouvel appareil.

    En ce qui me concerne je suis en pleine refonte du site mon agence en RWD et Mobile First et nous avons opté pour une technique bien plus simple :

    - Tu élargies ta fenêtre de navigateur. Quand tu constates qu’avec une seule colonne ça devient trop large, tu passes en double colonne. Idem pour les autres éléments (navigation, etc.). Et ainsi de suite. Et tu définis alors dans tes media queries la valeur correspondante (plutôt que de prendre les valeurs types adaptées essentiellement des iPhone et autres iPad)

  • http://www.ccd-design.com Christophe Cussigh-Denis

    Je suis preneur de la technique permettant de charger des scripts ou images sous conditions de largeur minimale ;)

  • http://www.ccd-design.com Christophe Cussigh-Denis

    J’emploi une technique assez simple, qui n’est pas idéale mais qui a le mérite de ne pas faire appel à un JS supplémentaire.

    Exemple :

    [if lt IE 9] — Modifié pour passer dans les com’

    [endif] — Modifié pour passer dans les com’

  • noclat

    On ne perdrait pas en pertinence, on aurait juste plus ou moins d’espace sur les bords en fonction de la largeur de l’écran (et donc du palier de media-query qu’il adopte).

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    Oui, moi aussi j’ai peur là ! A la rigueur, pour rigoler, on peut regarder ce que ça donne sur les vieux IE, mais tester ça…

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    Je suis assez d’accord, d’autant plus que si les mediaqueries sont bien pensées, les pourcentages peuvent être évités (en tout cas, on n’est pas obligé de les utiliser partout).

  • http://twitter.com/enguerranws Enguerran Weiss

    Très bon article, très bonne récap et plusieurs pistes intéressantes à approfondir. Toutefois, on parle de responsive axé mobile. Le responsive n’est pas que l’adaptation / conception aux supports plus petits, c’est également penser aux supports plus grand (écran 27″ et plus, écran de TV, etc…)

  • Pingback: Revue du web 1 : news pour les webmasters | Blog Codeur.com

  • Pingback: Design mobile : différencier web et application ? » Webdesign Friday (#wdfr)

  • Pingback: Template gratuit d'un site au webdesign responsive en single page

  • Pingback: Introduction à la performance pour le Web mobile » Webdesign Friday (#wdfr)

  • sebastien | wordpressdesigner

    @christophe :
    if(screen.width>480) {
    $(document).ready(function() {…});
    }

    exemple trouvé dans le livre de ethan marcotte “responsive web design” (livre sympa mais où ethan dit systematiquement en 8 pages ce qui pourrait être dit en une)

  • Pingback: [Dossier] Comment créer un site web moderne tourné vers le futur ? | Webcercle

  • Pingback: Responsive design, la conception adaptative d’un site web | Blog de l'agence Oréalys

  • Pingback: Web mobile : introduction et glossaire Montserrat Agence de Communication

  • Pingback: T42 : le projet qui a pour ambition de faire évoluer le web | PUShAUNE

  • Pingback: Le « Responsive Web Design », quésako ? › Jérémy Barbet › Web & UI Designer

  • Pingback: Methodology in Mobile First | Creative Technologist Reference

  • Pingback: Adela (d3kk1) | Pearltrees

  • Pingback: Site Inspiration | Pearltrees

  • Pingback: projet | Pearltrees

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !