Le responsive webdesign

Dernière mise à jour le 1 Nov 2012
358873fad4914931314b94f2036b503a_L

Avec la prolifération des terminaux mobile et des tablettes en tout genre (différent format…), une nouvelle approche du webdesign ces crée que l’ont nomme le webdesign responsive.
Petit rappel sur la notion du web responsive :La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu’un site est conçu pour s’adapter aux différentes tailles d’écran et aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, télé connectée, …).

 

responsive-v3
Le web design responsive est né d’un constat simple, le web sort de nos bureaux pour prendre possession de nos mobiles, tablettes et télévisions. On ne peut plus baser nos réalisations web sur un format standard. Depuis toujours et encore aujourd’hui nous développons des versions de nos sites sur du 960px, et 320px pour les mobiles. Mais demain, la diversité des supports mettra fin à cette idée de créer différentes versions selon les appareils qui est tout simplement une perte de temps et d’énergie.

Le webdesigner doit reposer sa manière de concevoir le site web selon les différents support mobile ou pas sur lequel il serrât vue . Des règle simple peuvent traduire cette nouvelle réflexion :

  • Retour à une ergonomie simple, sobre,
  • Restriction du nombre d’entrées, de rubriques,
  • Visuels omniprésents,
  • Utilisation de la hauteur, de la largeur de la page

Le but de ces règles ou préconisation ces de donner une uniformisation sur la plus part des supports car le concept de « responsive webdesign », implique de pouvoir lire aussi confortablement un site sur un terminal de 320×240 pixels en mode portrait que sur son écran fixe de 1920×1200 pixels en mode paysage. Afin de parvenir a ce résultat il est impératif de travail un design qui soit facilement modulable a travers le Html 5 et le CSS 3 qui sont une évolution majeur du web notamment la portabilité sur différents terminaux et préconisé par le W3C. d’où l’importance de repensé et d’apter les règles du webdesign  au  « Responsive webdesign » qui vas permettre de  une anticipation des usages des internautes, de plus en plus mobinautes, ces derniers étant appelés à devenir majoritaires d’ici deux à trois ans. Et du coup, c’est plutôt la simplicité d’usage et d’ergonomie de la tablette qui va prendre le pas sur le site internet classique.

Comprendre le responsive webdesign ces comprendre les enjeux du web de demain , comme son nom l’indique le responsive webdesign est , un style de développement Web où le contenu répond à l’appareil sur lequel il est rendu , car l’internaute est devenu nomade et de se fait il s’est équiper de nv terminaux d’où la modification de ces exigence donc le webdesign doit s’adapter a ces nvlls règle, pour ce faire, les deux mots de passe qu’il vous faut connaître sont HTML5 et CSS3 . Ainsi, dès lors qu’un site Web est consulté à partir d’un navigateur traditionnel de bureau, il sera rendu d’une certaine manière, sur une tablette ou un navigateur sur un smartphone sera assez intelligent pour rendre ce même code d’une manière différente. Autrement dit, ce dernier prend en compte la taille et la résolution d’un écran plus petit. Le texte est redistribué, la navigation est simplifiée, et les images sont réduites, ou même totalement cachées, et le code se débrouille pour que tout cela soit écrit une seule fois !

Si vous voulez la preuve que la conception réactive (responsive design) se développe, ne cherché pas plus loin que certains sites majeurs du Web. Par exemple, le site Web The Boston Globe est probablement l’un des exemples les plus salués, et ce dès qu’il a été développé, en partie, avec l’aide de Marcotte. Vous pouvez essayez de redimensionner la fenêtre de votre navigateur pour voir par vous-même. Même Google est en train d’embrasser une conception adaptée, avec un guide sur l’un de ses blogs Webmaster. Malheureusement, le blog fait remarquer qu’un quart des visites sur les sites Web sont toujours faites avec des anciens navigateurs qui ne prennent pas en charge certaines de ces fonctionnalités.

L’homme responsable de populariser cette idée est un développeur nommé Ethan Marcotte. Dans un article de 2010 sur le blog dédié à conception de sites Web, A List Apart, Marcotte a déploré la tendance croissante à développer des expériences mobiles à partir de sites dédiés à la version de bureau. « Quelle est la prochaine version ? », a t-il demandé ? « Un site Web pour iPad ? Un site pour le N90 ? Peut-on vraiment continuer à s’engager à soutenir chaque nouvel user agent avec une expérience utilisateur sur mesure ? ».

Ethan Marcotte a une solution (à noter que je ne dis pas « la » solution). En exploitant la puissance des configurations flexibles, et en les combinant avec les media queries offerts par CSS3, nous pouvons adapter nos conceptions de manière sélective pour répondre à chaque taille du navigateur.

Ces dizaines de contextes différents constituent un défi pour l’ergonomie : comment proposer une expérience utilisateur satisfaisante en fonction des particularités des terminaux utilisés ? Comment un internaute peut-il consulter tout aussi confortablement un site sur son ordinateur que sur son smartphone ?
Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Cela revient à faire des compromis qui ne seront pas satisfaisants pour l’utilisateur. Il est en effet difficile d’envisager une interface Web unique confortable à la fois sur les petits et grands écrans : soit le site sera étriqué sur grand écran avec des boutons surdimensionnés, soit il faudra sans cesse zoomer dans la page pour pouvoir lire le contenu sur un petit écran.

citycrawlers
Tout n’est pas si rose …
Bien sûr, si une conception adaptée est « la » solution, pourquoi tout le monde ni passe pas dès maintenant ? La réponse est courte : c’est tout simplement pas faisable pour tout le monde. En raison des différences dans la façon dont les blocs sont diffusés sur les sites mobiles et de bureau, de grands sites éditoriaux peuvent souvent avoir plus de mal à pousser une conception adaptée. Ou, dans d’autres cas, les sites mobiles offrent certaines fonctionnalités que les développeurs ne sont pas capables de « traduire » avec une conception adaptée. La complexité peut être compliquée…
Si on met de coté toutes contraintes de coûts et délais, l’idéal pour l’utilisateur serait une expérience sur mesure pour chaque terminal. Cela impose de développer une palette de différentes versions de sites ou d’applications prenant finement en compte les contraintes et atouts techniques ainsi que le contexte d’usage de chaque appareil.
Recommandations

  • Construire des versions séparées si les interactions sur le site sont riches ou si le besoin est fortement contextuel en version mobile,
  • Attention à ne pas oublier les tablettes : soit en rendant compatible la version classique soit en réalisant une version sur mesure,
  • Préférer le responsive design pour le site majoritairement informatif

 Après tout, une conception adaptée n’est pas une solution magique qui va rendre le développement mobile plus facile. Mais, utilisée dans les bonnes situations elle peut rendre l’expérience de l’utilisateur plus cohérente. Et dans un monde de tablettes, smartphones, ordinateurs portables et autres, la cohérence est de plus en plus la clé…
Sources:
http://fr.wikipedia.org/wiki/Responsive_Web_Design
http://www.blog-nouvelles-technologies.fr/archives/17076/en-quoi-consiste-reellement-le-responsive-web-design/

Avec la prolifération des terminaux mobile et des tablettes en tout genre (différent format…), une nouvelle approche du webdesign ces crée que l’ont nomme le webdesign responsive.
Petit rappel sur la notion du web responsive :La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu’un site est conçu pour s’adapter aux différentes tailles d’écran et aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, télé connectée, …)
Source : http://fr.wikipedia.org/wiki/Responsive_Web_Design
Le web design responsive est né d’un constat simple, le web sort de nos bureaux pour prendre possession de nos mobiles, tablettes et télévisions. On ne peut plus baser nos réalisations web sur un format standard. Depuis toujours et encore aujourd’hui nous développons des versions de nos sites sur du 960px, et 320px pour les mobiles. Mais demain, la diversité des supports mettra fin à cette idée de créer différentes versions selon les appareils qui est tout simplement une perte de temps et d’énergie.
Le webdesigner doit reposer sa manière de concevoir le site web selon les différents support mobile ou pas sur lequel il serrât vue . Des règle simple peuvent traduire cette nouvelle réflexion :
•    retour à une ergonomie simple, sobre,
•    restriction du nombre d’entrées, de rubriques,
•    visuels omniprésents,
•    utilisation de la hauteur, de la largeur de la page
Le but de ces règles ou préconisation ces de donner une uniformisation sur la plus part des supports car le concept de « responsive webdesign », implique de pouvoir lire aussi confortablement un site sur un terminal de 320×240 pixels en mode portrait que sur son écran fixe de 1920×1200 pixels en mode paysage. Afin de parvenir a ce résultat il est impératif de travail un design qui soit facilement modulable a travers le Html 5 et le CSS 3 qui sont une évolution majeur du web notamment la portabilité sur différents terminaux et préconisé par le W3C. d’où l’importance de repensé et d’apter les règles du webdesign  au  « Responsive webdesign » qui vas permettre de  une anticipation des usages des internautes, de plus en plus mobinautes, ces derniers étant appelés à devenir majoritaires d’ici deux à trois ans. Et du coup, c’est plutôt la simplicité d’usage et d’ergonomie de la tablette qui va prendre le pas sur le site internet classique.
Comprendre le responsive webdesign ces comprendre les enjeux du web de demain , comme son nom l’indique le responsive webdesign est , un style de développement Web où le contenu répond à l’appareil sur lequel il est rendu , car l’internaute est devenu nomade et de se fait il s’est équiper de nv terminaux d’où la modification de ces exigence donc le webdesign doit s’adapter a ces nvlls règle, pour ce faire, les deux mots de passe qu’il vous faut connaître sont HTML5 et CSS3 . Ainsi, dès lors qu’un site Web est consulté à partir d’un navigateur traditionnel de bureau, il sera rendu d’une certaine manière, sur une tablette ou un navigateur sur un smartphone sera assez intelligent pour rendre ce même code d’une manière différente. Autrement dit, ce dernier prend en compte la taille et la résolution d’un écran plus petit. Le texte est redistribué, la navigation est simplifiée, et les images sont réduites, ou même totalement cachées, et le code se débrouille pour que tout cela soit écrit une seule fois !
Si vous voulez la preuve que la conception réactive (responsive design) se développe, ne cherché pas plus loin que certains sites majeurs du Web. Par exemple, le site Web The Boston Globe est probablement l’un des exemples les plus salués, et ce dès qu’il a été développé, en partie, avec l’aide de Marcotte. Vous pouvez essayez de redimensionner la fenêtre de votre navigateur pour voir par vous-même. Même Google est en train d’embrasser une conception adaptée, avec un guide sur l’un de ses blogs Webmaster. Malheureusement, le blog fait remarquer qu’un quart des visites sur les sites Web sont toujours faites avec des anciens navigateurs qui ne prennent pas en charge certaines de ces fonctionnalités.
 
L’homme responsable de populariser cette idée est un développeur nommé Ethan Marcotte. Dans un article de 2010 sur le blog dédié à conception de sites Web, A List Apart, Marcotte a déploré la tendance croissante à développer des expériences mobiles à partir de sites dédiés à la version de bureau. « Quelle est la prochaine version ? », a t-il demandé ? « Un site Web pour iPad ? Un site pour le N90 ? Peut-on vraiment continuer à s’engager à soutenir chaque nouvel user agent avec une expérience utilisateur sur mesure ? ».
Ethan Marcotte a une solution (à noter que je ne dis pas « la » solution). En exploitant la puissance des configurations flexibles, et en les combinant avec les media queries offerts par CSS3, nous pouvons adapter nos conceptions de manière sélective pour répondre à chaque taille du navigateur.
Ces dizaines de contextes différents constituent un défi pour l’ergonomie : comment proposer une expérience utilisateur satisfaisante en fonction des particularités des terminaux utilisés ? Comment un internaute peut-il consulter tout aussi confortablement un site sur son ordinateur que sur son smartphone ?
Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Cela revient à faire des compromis qui ne seront pas satisfaisants pour l’utilisateur. Il est en effet difficile d’envisager une interface Web unique confortable à la fois sur les petits et grands écrans : soit le site sera étriqué sur grand écran avec des boutons surdimensionnés, soit il faudra sans cesse zoomer dans la page pour pouvoir lire le contenu sur un petit écran.

Tout n’est pas si rose …
Bien sûr, si une conception adaptée est « la » solution, pourquoi tout le monde ni passe pas dès maintenant ? La réponse est courte : c’est tout simplement pas faisable pour tout le monde. En raison des différences dans la façon dont les blocs sont diffusés sur les sites mobiles et de bureau, de grands sites éditoriaux peuvent souvent avoir plus de mal à pousser une conception adaptée. Ou, dans d’autres cas, les sites mobiles offrent certaines fonctionnalités que les développeurs ne sont pas capables de « traduire » avec une conception adaptée. La complexité peut être compliquée…
Si on met de coté toutes contraintes de coûts et délais, l’idéal pour l’utilisateur serait une expérience sur mesure pour chaque terminal. Cela impose de développer une palette de différentes versions de sites ou d’applications prenant finement en compte les contraintes et atouts techniques ainsi que le contexte d’usage de chaque appareil.
Recommandations
•    Construire des versions séparées si les interactions sur le site sont riches ou si le besoin est fortement contextuel en version mobile
•    Attention à ne pas oublier les tablettes : soit en rendant compatible la version classique soit en réalisant une version sur mesure
•    Préférer le responsive design pour le site majoritairement informatif
Après tout, une conception adaptée n’est pas une solution magique qui va rendre le développement mobile plus facile. Mais, utilisée dans les bonnes situations elle peut rendre l’expérience de l’utilisateur plus cohérente. Et dans un monde de tablettes, smartphones, ordinateurs portables et autres, la cohérence est de plus en plus la clé…
 

 

 

    Téléchargement du module

    Laissez-nous votre prénom et votre adresse de courriel pour vous envoyer le module par courriel:


      Pssssst Attendez...

      Laissez nous votre meilleure adresse email et vous recevrez le premier nos prochaines publications...


        Recevoir chaque semaine notre publication en avant première.

        Rejoignez nos 153 845 fidèles lecteurs et restez informés concernant le domaine du développement web, en étant le premier à recevoir notre publication chaque semaine.