Sur Smashing Magazine : Responsive Webdesign – présent et futur de l’adaptation mobile

Après plusieurs mois de recherche sur le sujet et plusieurs relectures, mon article qui dresse l’état des lieux de ce qui est aujourd’hui faisable en terme de responsive webdesign et adaptation mobile, ce qu’il reste à creuser et améliorer et surtout ce que l’on pourra (peut-être) faire dans le futur est publié aujourd’hui sur Smashing Magazine.

Tout avait commencé en Octobre 2012, à Paris Web, au hasard d’une rencontre autour de la machine a café avec Vitaly Friedman. Après une petite discussion il m’a donné sa carte de visite et me mis au défis d’écrire pour Smashing Magazine. Challenge accepted. Plusieurs mois de recherche, de boulot intensif pas toujours facile sur les spécifications W3C en constante évolution, un brouillon de sommaire validé, 21 pages PDF plus loin et deux relectures, une ré-écriture d’une partie dont les specs avaient changées, et voilà donc mon article publié aujourd’hui :

The State Of Responsive Web Design

L’article est long, voir très long. Il faut dire que le sujet est vaste. Je souhaitais aborder plusieurs points du responsive webdesign, et pas uniquement me concentrer sur les banalités que l’on lit partout. Le but de l’article et la mission que Vitaly m’avait donnée : faire un état des lieux du domaine du responsive webdesign à un instant T. Voir ce qui fonctionne, plus ou moins bien, ce qui est faisable aujourd’hui, et ensuite voir plus loin dans le futur. Il y a pleins d’articles sur comment utiliser les media-queries, comme passer une mise en page de deux colonnes à une colonne etc., si vous souhaitez lire une introduction pour apprendre à vous servir des media-queries, ce n’est pas dans cet article que vous la trouverez. (vous pouvez toujours jeter un coup d’oeil à mon cours pour les masters par contre)

Pour cet article, nous voulions aller plus loin, et surtout mettre l’accent non seulement sur ce qui est possible aujourd’hui, mai surtout sur TOUT ce qui n’est pas encore possible, ce qui est difficile à faire, à optimiser.  J’ai donc essayé de proposer un tour d’horizon de tout ce qui reste encore à faire : meilleur gestion des images, faciliter les changements de mise en page avec des systèmes plus “flexibles” que des flottants, mieux gérer les contenus complexes comme les formulaires, les tableaux, les maps, les navigations, les contenus tierces récupérés sur nos sites (comme les iframes et les vidéos). Pour tous ces “problèmes” sont proposées des débuts de piste de réponse, plus ou moins complètes, mais la solution parfaite n’existe pas encore. Une partie de l’article est également consacrée aux spécificités des terminaux, aux nouvelles media-queries pas encore finalisées avec un avant goût de CSS level 4 et aux APIs. Enfin l’article conclus sur les utilisateurs, la gestion des workflows, des rédacteurs de contenus et des CMSs qui eux aussi font aujourd’hui parti de tout ce qu’il faut prendre en compte lors de la création d’un site optimisé sur plusieurs supports.

La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs qui essaient de nous faire croire qu’il suffit aujourd’hui, pour optimiser un site pour mobile, d’ajouter 2 media-queries pour l’iPhone et l’iPad et redimensionner toutes les image. Je n’ai pas la prétention de changer le monde, d’avoir la vérité absolue, dans cet article je souhaitais juste montrer au lecteur le reste de ce gigantesque iceberg dont les media-queries n’en sont que la surface. Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd’hui appelé “Adaptive Webdesign“. Le but de l’article n’est pas non plus de décourager les gens qui optimisent des sites pour mobile, mais de mettre le doigt sur ce qui aujourd’hui pose problème, est bancal, pour ensemble, trouver une solutions à ces différents problèmes.

 

Responsive Webdesign, la pointe de l'iceberg

Image inspirée de la présentation “Beyond Media Queries: Anatomy of an Adaptive Web Design”  de Brad Frost

Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

20 réflexions au sujet de « Sur Smashing Magazine : Responsive Webdesign – présent et futur de l’adaptation mobile »

  1. Salut Stéphanie !

    Avant tout, félicitations pour la publication de cet article de référence, qui est, il faut bien avouer, très impressionnant. Je ne suis pas surprise qu’il t’ait demandé plusieurs mois de travail, d’autant plus que j’imagine assez bien la petite pression de travailler pour Smashing… ^.^

    Cependant, je t’avoue que de toutes les techniques présentées dans l’article, je n’en vois pas beaucoup qu’il soit réellement possible d’utiliser en production aujourd’hui : en effet, il est encore rarissime que nos clients nous laissent libres d’ignorer IE8 et IE9 (certains nous demandent encore d’optimiser pour IE7… voire IE6 ! Bon ok, c’est de plus en plus rare, OUF).

    Du coup, j’ai lu ton article avec beaucoup d’intérêt, mais j’en ressors un peu frustrée en me disant que tout cela, ce n’est pas encore pour tout de suite, bien qu’il y ait des choses très prometteuses.

    Néanmoins, tu as le mérite d’avoir fait une recherche approfondie sur tout ce qui nous attend demain, et qui nous permettrons, comme tu le dis très bien, de construire un web meilleur. Donc merci :-)

    • Ha bah clairement, c’est pas pour rien que je parle de “futur”, il y a pleins de choses dont je parle qui ne sont pas utilisables aujourd’hui, ou alors avec du polyfill très lourd. Par contre IE6 et IE7, ni le 8 (et le 9 non plus je crois) n’existent sur mobile. Du coup quand on parle d’optimisation mobile, on peut par exemples utiliser pour mobiles certaines fonctionnalités qui ne sont pas forcément supportées sur desktop. Par exemple flexbox est plutôt bien supporté sur mobile, donc on peut très bien imaginer fixer la largeur sur IE8, de toute façon ses utilisateurs n’ont jamais eut de site responsive, et utiliser flexbox uniquement sur mobile. Ensuite, ça dépend au cas par cas du projet :)

  2. Bonjour, et merci pour ces articles !

    Quelle lecture intéressante ! L’article sur Smashing est certes très long, mais c’est pourtant un condensé clair et concis ( plus que tout ce que j’ai lu jusque là :D ). Et sa genèse racontée ici est très plaisante aussi !

    PS: IE Mobile est en version 9 sur les WindowsPhone 7.* , j’ai justement eu la surprise hier :(

    • Ha, intéressant à noter ça pour IE9 effectivement :) Au moins il supporte les media-queries ce qui est un bon début, par contre pour flexbox c’est cuit. Je crois que je vais faire une pause de 3 ans et revenir quand tous les trucs cools pour faire du mobile seront enfin supportés, nah :D

    • Je ne peux que +1-iser l’avis de Gael, superbe article.

      En attendant toutes ces belles choses, je pense qu’on peut déjà aller de plus en plus vers SVG (qui résout certains problèmes pour certains types d’images => dimensions, retina, etc.), et le mobile-first a quand même bon nombre d’avantages => typiquement, on peut arriver à faire supporter le “surpoids” des MQ plus aux navigateurs desktop qu’aux mobiles. Les premiers essais que j’ai fait me donnent des résultats très probants. (oui, je sais que IE<9 compliquent la tâche :) )

      D'ici 1 à 2 ans, j'espère bien que les navigateurs auront fait de très gros progrès (support de WebP, rendu plus intelligent des MQ, nouveautés, etc.).

  3. Coucou, félicitations, un article sur le Smashing moi je dis que c’est la classe ! Je suis bien d’accord sur la piètre qualité de certains articles qui vendent du RwD à base de 2 ou 3 media queries comme tu le dis alors que le taf est autrement plus complexe d’autant que l’ux n’a presque rien à voir sur mobile.

    Ça peut paraître évident mais entre voir un site en grand et par le hublot… en tout cas j’ai appris plein de trucs merci ^^.

  4. Ping : Des pixels et du code #64 - Stéphanie Walter : Webdesign - intégration webStéphanie Walter : Webdesign – intégration web | Strasbourg – Alsace.

  5. “La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs” tout a fait d’accord avec toi. Ton illustration avec le dessin de Brad Frost est tout à fait probante. Aprés l’enfer des hacks CSS pour la famille d’un navigateur bien connu et omniprésent, la malédiction du développeur/intégrateur Web continue, voir s’amplifie avec le Web en mobilité, les tablettes et les T.V. Allez courage, demain on rase gratis…
    Et si la solution était de disposer d’un outil ( Adobe Edge Reflow,…) qui prenne en charge une fois pour toute tous les casses têtes du reponsive, adaptative et particularités des moteurs de rendu, on peut en réver mais pourquoi un jour ne ferait on pas le CSS avec un logiciel qui nous laisse nous exprimer et qui s’occupe de l’intendance pour nous…

  6. IE 7-8 ne représente même plus 15 % du marché je préfère de loin m’en passer et utiliser un framework performant comme Foundation.

    Je n’ai pas trouvé plus récent mais c’est encourageant : http://blog.artenet.fr/2013/01/27/barometre-des-navigateurs-2013/

    Courage vos clients changeront bientot d’avis. Il faut arréter de vivre dans le passé. Surtout qu’avec un bon framework maison ou pas c’est un gain de temps si le client doit payer beaucoup plus chère pour qu’IE7 soit supporté il arrétera de réclamer

    • “IE 7-8 ne représente même plus 15 % du marché ” -> je dirai que cela dépend du projet et du marché ciblé…
      Certaines administrations tournent encore sous IE7. Si c’est ta cible primaire, t’y coupes pas.

      Et dans un cas comme celui-là, l’augmentation du coût du projet pour un support IE7 est largement inférieur à la ré-installation de tous les postes d’une admin… (en plus, si pour un client de type administration, il suffit de rogner sur du design, de l’UX, etc… et de repartir sur un site basique mais au même budget, voir inférieur, son choix est vite fait..)

      • Hum, quand on parle IE7 et IE8, notons qu’aucun n’existe sur mobile. Donc pour moi (et surement d’autres), un site non responsive pour ces navigateurs est acceptable. A savoir, passer un max-width en width, et hop, largeure fixée :)
        (je parle ici que de la problématique du responsive, pas de tout les reste hein ^^ )

        • Ce genre de compromis est tout à fait accepté par mes clients pour ma part, je ne m’en prive pas :)

      • L’administration est en retard c’est certain, je parlais de cas générale et bien sur l’administration sera toujours à part.
        Mais si on garde les mauvaise habitude pour tout les projets alors qu’IE 7-8 n’est plus qu’une minorité. Je pense que l’on fait erreur.

        Aussi on parle de site mobile donc comme le dis Stéphanie on sort du sujet.
        Je tenais juste à préciser que pour un projet sans contrainte de navigateur autant se passer d’IE 7-8 et de proposer à l’utilisateur de DL un navigateur moderne mais ceci est un autre débat.

        Après le mieux même si on fixe la largeur le mieux est de tester mais avec les framework récent il y a généralement pas trop de souci meme sur IE.

    • Perdre 1/2 clients sur 10 n’est pas tolérable par les entreprises, si en plus tu ne rends pas ton site accessible, tu perds une personne de plus (si mes souvenirs sont bons d’après mes recherches et présentation ppt).

      Surtout que IE8 et IE7, ça va encore avec des scripts JS/jQuery (html5shiv, selectivizr …)

      • Je précise encore une fois que dans l’article de base on parle optimisation mobile, donc on dérive un peu là, IE7 et IE8 ne sont présents que sur les navigateurs de bureau.
        Ensuite, il est possible d’avoir un script pour avoir les media-queries sur ces navigateurs, MAIS le responsive ne se réduit pas aux media-queries et il est assez compliqué de faire un site correcte “juste” avec des media-queries. Donc l’option proposer un site non responsive aux utilisateurs d’IE7 et IE8 qui ne s’amusent à mon avis pas à redimensionner leur navigateurs comme nous est tout à fait valable :)

        • Je suis entièrement d’accord :) il est vrai qu’on dérivent, mais IE8 et IE7 ne peuvent malheureusement toujours pas être mis de côté et s’était ce à quoi je voulais répondre.

      • @Eric
        Je rencontre encore des entreprises en France où ils sont équipés de Win XP et de IE6, alors que fait on ?

        je pense qu’il est parfaitement acceptable de ne pas développer pour IE7 & 8 à partir du moment où on connait la cible du site.
        Maintenant cela n’empêche pas de mettre les quelques scripts js qui permettent de limiter la casse.

  7. Ping : Blog – Max. Deconinck» Blog Archive Responsive Webdesign – présent et futur de l’adaptation mobile » Blog - Max. Deconinck

  8. Ping : Responsive Webdesign – présent et futur de l’adaptation mobile : Studio-ProWeb

  9. Ping : Responsive Webdesign – présent et futur de l’adaptation mobile |