Skip / Always skip

Atelier de création digitale

Chargement

blackstage Ultranoir Blackstage

Jeudi 02 octobre 2014

Les dessous d'ultranoir

Pour recevoir tous les articles de Blackstage
sur votre email dès leur publication,
inscrivez-vous dès maintenant !

Responsive Design
La solution miracle du site 3 en 1 ?

Si le terme de Responsive design vous est étranger, l’heure est venue de vous familiariser avec cette nouvelle technologie qui gagne de plus en plus de terrain auprès des concepteurs de sites internet et séduit de plus en plus d’annonceurs.

Mais au fait, c’est quoi le Responsive design ?
Quels sont les avantages en matière d’investissement ? Un site 3 en 1 permet-il de faire des économies d’échelle ? Quel est l’impact sur la chaîne de production digitale ?

ultranoir team

by Ultranoir Team

Agency

C’EST QUOI ET POURQUOI ?
Qu’avons-nous à l’esprit lorsqu’on nous parle de Responsive design ?

Adaptabilité, résolution d’écran, supports digitaux, design... La traduction littérale du responsive design correspond au design réactif. Le terme « Responsive » peut se traduire par « adaptable » ; un design est responsive lorsque celui-ci est capable de s’adapter aux différents terminaux, disposant de tailles différentes.

Cette notion a été introduite par Ethan Marcotte, le père fondateur. Webdesigner et développeur de renom, il a bâti sa réputation avec la publication de son œuvre « Le responsive web design » dans laquelle il évoque les contraintes et les difficultés de développer un site en web responsive.

"The web's moved beyond the desktop, and it's not looking back.
The number of devices we're designing for is growing just as quickly as mobile traffic."


Ethan Marcotte


Le responsive design permet d’adapter le contenu à n’importe quel support, il s’agit d’une approche évolutive du design. Cette technique consiste à construire un site qui s’adaptera aux différentes résolutions d’écran en modifiant sa mise en page, laquelle sera définie par l’ergonomie du support.

SUIVRE L’ÉVOLUTION DE CONSULTATION DE L'INFORMATION

Avec la révolution des usages d’internet et l’accroissement des tablettes qui connaît un boom considérable comme le souligne Fréderic Cavazza, « Les tablettes sont définitivement prêtes à inonder le marché en 2012 ». Le Responsive design répond à un constat simple à savoir la multiplication des supports digitaux, désormais l’utilisateur se connecte de plus en plus avec son mobile. Le web ne se cantonne plus aux ordinateurs, il a pris possession des mobiles, des tablettes.



Source : Morgan Stanley.



LES AVANTAGES POUR LE MARCHE
Toute marque qui se respecte souhaite développer cette façon de concevoir. Avoir un site web c’est bien, avoir un site web qui a été pensé Responsive design c’est encore mieux !

• Il assure une visibilité sur tous les écrans et supports
• L’expérience utilisateur est cohérente sur les différents terminaux
• La navigation est facilitée, tout est adaptable et étudié en fonction du support
• La mise à jour des informations est centralisée

Maintenant la grande question est :
Réalise t-on des économies d’échelle avec du Responsive design ?

C’est en effet ce qui vient en premier lieu à l’esprit. A première vue, pas besoin de développer des apps ou dans un langage spécifique à la plateforme mais…



VOUS AVEZ DIT UN SITE "3 EN 1" * ?
*En partant du principe que l’on distingue ces 3 grands modes d’affichage : le mode laptop, le mode tablette, le mode mobile

La phrase a été lâchée et fait l’effet d’une bombe : un site 3 en un 1 !

Elle résonne comme un gain d’économie dans l’esprit des clients. Si dans leurs esprits cela signifie des coûts de production inférieurs à un site habituel multiplateformes dans les faits, c’est une autre histoire.

La conception d’un site internet demande beaucoup de temps, d’investissement, de réflexion, de développement…





En Responsive design, le processus de conception est encore plus important comme nous le précise Romain Baillat, intégrateur HTML chez ultranoir « L’intégration demande beaucoup plus de temps, c’est pourquoi il est primordial d’avoir toutes les maquettes des différents états en fonction des plateformes. La nécessité de dialoguer et d’échanger lors du processus de conception et de direction artistique est nécessaire. Encore plus qu'avant, un échange et un dialogue en amont et permanent entre le concepteur, le directeur artistique et l'intégrateur sont indispensables».

Une réflexion minutieuse est requise en amont entre concepteur, directeur artistique et développeur afin de produire un site qui répondra aux problématiques liées à chaque support.

C’est pourquoi, il est nécessaire que toutes les questions soient posées en amont afin de limiter les risques côté développement. Développer en responsive revient à maquetter les éléments de la page sous 3 supports différents (en réalité, sur les X modes ciblés depuis le cahier des charges), la charge de travail est donc considérable. Qui plus est, il faut prendre en considération toutes les cinématiques du support.

En effet, vous n’allez pas naviguer de la même façon sur votre iPad et sur votre ordinateur comme le souligne Jean-Christophe Suzanne, Directeur Technique front end chez ultranoir « Un laptop, une tablette et un smartphone ne s'utilisent pas de la même façon. C'est pour cela qu'il est très important d'imaginer chaque cinématique dès la phase de conception. Cela permet de se poser un maximum de questions et de limiter les risques côté développement. Une intégration responsive représente quand même un travail assez important. C'est presque réaliser 3 sites en 1, même si c'est une aberration car il faut qu’il existe une continuité entre les différents modes. Si on se retrouve avec 3 approches totalement différentes, c’est que la conception a été mauvaise».

Dans cette approche dite “responsive”, partir de la maquette mobile vers la maquette web permet d’enrichir le contenu dans le sens positif.

Selon le support que vous utilisez des questions devront être émises et des choix devront être faits. Le temps passé à offrir une expérience utilisateur commune à chaque support demande un temps d’ajustement tant sur la partie conception que sur la partie technique. L’idée même que le responsive design puisse être une économie n’est autre qu’une réalité faussée à ce jour. Les coûts d’investissements n’en sont pas moins inférieurs à un site classique. Bien que le responsive design soit une technologie qui commence à gagner du terrain, elle n’en reste pas moins en phase d’accroissement. Très peu d’outils de développement spécifiques et de debugs existent, c’est dire le chemin qu’il reste à faire.

D’après Jean-Christophe Suzanne et Romain Baillat, le succès d’un bon responsive design se définit par une réflexion minutieuse axée sur l’expérience utilisateur, l’ergonomie et le développement. « Savoir tirer parti des avantages de chaque média de sortie (widescreen, laptop, tablette, smartphone) tout en préservant une cohérence ergonomique ».

Tous deux s’accordent sur la bonne stratégie responsive à adopter «l'approche idéale afin de concevoir un site en responsive design est de commencer par maquetter la version smartphone, et ensuite seulement imaginer les versions tablette puis web. Ceci afin de bien imaginer le contenu indispensable à afficher, puis enrichir celui-ci petit à petit sur les autres plateformes ».

Jean-Christophe Suzanne affirme que le responsive doit être pensé comme une solution enrichissante, l’approche doit être orientée utilisateur : "Qu'est-ce que je vais pouvoir offrir de plus à mon visiteur sur un ordinateur par rapport à un visiteur sur smartphone ? Quelles sont les solutions/fonctionnalités que je vais pouvoir mettre en place spécifiquement afin de tirer parti à 100% du contexte dans lequel je me trouve".



UN CONTENU FLEXIBLE A VALEUR AJOUTÉE
Smartphones, tablettes, portables,…
Qui dit supports multiples dit flexibilité du contenu.
Quel contenu pour quel support ?
Comment l’information va être agencée sur la page, quel contenu sera sélectionné ?

Lorsque le site est en responsive, tout doit être adapté au support. Si vous voulez développer votre site sur mobile, le graphisme et l’habillage de la page devront « s’effacer » peu à peu pour faire place au contenu qui constituera un élément important de l’interface.

Une véritable stratégie du contenu doit être mise en place. Le responsive text permet de proposer plusieurs stratégies de contenu en fonction de la taille de l’écran sur lequel le contenu est déployé. Optimisation de la longueur du texte, différents niveaux de lecture, typographie… Tout doit être pensé en fonction de l’utilisateur. Qui plus est, le contenu doit être pertinent et percutant.
Il faut également apporter du style à la mise en page, c’est à dire déterminer à quels endroits seront placées les colonnes et dans quelles résolutions elles doivent apparaître ou non. La typographie ne doit pas être délaissée non plus. Il est important que le contenu soit aussi bien lisible sur ordinateur que sur smartphone.


DES SOLUTIONS ?
Le responsive design répond à la problématique suivante : Comment créer du contenu pour une majorité de supports ?
Pour qu’un site internet s’adapte à votre support, trois composantes sont essentielles :
Les grilles fluides, les images flexibles et les médias queries.



LES GRILLES FLUIDES
Une grille de mise en page fluide comme son nom l’indique est modulable, elle permet de présenter le contenu d’un site dans un nombre approprié de colonnes, en fonction de la largeur de l’écran. Reprenant les mêmes principes que la grille typographique.
La composition responsive de votre page sera déterminée par rapport à cette grille.
L’ergonome devra par avance déterminer l’endroit ou le contenu sera agencé puisqu’en fonction du support, le contenu n’apparaît pas au même endroit. Il est important également de spécifier les différentes dimensions de manière fluide. La déclaration des unités en pourcentage ou unité relative (em) devient alors évidente.


LES IMAGES FLEXIBLES
il s’agit ici, simplement d’éviter l’utilisation de valeur fixe sur les images de contenu. Il vaut mieux favoriser une occupation de l’espace en pourcentage par rapport au conteneur parent. Avec la réduction de votre écran, la typographie va également se réduire pour s’adapter au contenu. Il se peut même que la police puisse changer.


LES MEDIAS QUERIES
Elles sont le pivot principal d’un site responsive. C’est par le biais de cette spécification CSS3 que nous allons pouvoir adapter dynamiquement notre interface et ainsi déterminer les différents modes d’affichage souhaités. Grâce à différents paramètres de détection d’affichage (type de media en sortie, dimensions de l’écran/support, orientation de l’écran, la densité par pixel, rapport largeur/hauteur, etc..) il sera possible de créer des familles de déclarations CSS, qui ne s’appliqueront que si ces règles d’affichage font partie du spectre du périphérique de sortie.
Il va sans dire que c’est un levier essentiel dans l’intégration d’un site responsive. D’autant plus que cette approche est à favoriser par rapport à une détection hardware (ex : détection du user-agent en JS et inclusion du fichier CSS spécifique à la volée). Cela permettant de prévenir un éventuel bouleversement du hardware d’un support ciblé.
Il est important de préciser que les média queries sont une technologie récente, supportée par les browsers récents. Ainsi, ils laissent de côté la résistante famille des IE6/IE7/IE8 (même s’il existe des polyfills). Mais est-ce une bonne stratégie de réaliser un site responsive pour ces navigateurs « old-school » Le temps de debug à prévoir d’un site responsive sur ces environnements vaut-il réellement l’investissement ? Il convient de revenir aux fondamentaux du responsive web design, ce qui consiste à permettre l’adaptation d’un site à son support, et non pas à son browser. Les tablettes ou smartphones les plus courants fonctionnent avec des browsers modernes, interprétant le responsive nativement. L’essentiel du travail doit donc être fait sur ces environnements précis. Le responsive design n’a pas vocation à devenir responsive cross browser.

Adobe shadow, outil rêvé ?
Adobe, précurseur en la matière vient de lancer Shadow, une application prometteuse qui permet de tester un site HTML sur divers supports depuis un poste équipé du navigateur Chrome. Cet outil révolutionnaire permet de visualiser en simultané le rendu d’une page web sur plusieurs terminaux connectés grâce à leur client shadow au poste de travail maitre. Nous pouvons ainsi tester et debugger nos intégrations en direct sans avoir à rafraichir les multiples devices.

Nous en profitons pour vous présenter le reportage d'Abobe chez nous sur ce thème.




CONCLUSION
Le responsive design apporte une réponse concrète à un problème posé. Il permet de développer en une seule fois un site qui pourra être « resizé » sur tous les supports à l’aide de différents outils. Intégrer le responsive dans une stratégie business permet d'anticiper les attentes des utilisateurs. Si dans l'esprit des clients le responsive sonne comme la solution miracle à moindres coûts le travail n’en demeure pas moindre. Le responsive gagne de plus en plus de terrain, néanmoins les limites de cette technologie se font ressentir. Pour parvenir à inscrire le responsive dans une échelle de l'économie, il faut améliorer le processus de production et développer les outils.

Car le responsive design n’est pas une tendance éphémère, c’est une solution pérenne qui s’améliorera avec le temps.

À ce propos, vous qui êtes derrière votre écran, allez-vous lire cet article sur votre tablette ou votre smartphone ? Telle est la question…

haut de page

Ajouter un commentaire