Accueil - Création de site - responsive web design, RWD

Partagez avec vos amis ... :)

responsive web design, RWD

Le terme " responsive web design " utilisé également sous l'abréviation " RWD " répond aux tendances actuelles de l'Internet qui se veut de plus en plus mobile, social et accessible. Les sites web doivent maintenant pouvoir s'adapter aux différents formats des médias sur lesquels ils vont s'afficher : écran d'ordinateur, écran TV, téléphone, tablette ... Il leur faut donc un design qui soit capable de s'adapter à tous ces formats, sans nuire à la qualité des informations à transmettre à l'internaute ... Cette notion d'accessibilité, devenue maintenant une 'quasi' obligation a donc pris le nom de " responsive web design " ...
Si l'on parlait déjà il y a plusieurs années de thèmes ou templates " fluides ", " extensibles " voire même " adaptatifs " à cause de la taille, principalement, des différents écran d'ordinateurs, les choses ont évolué à une vitesse exponentielle surtout au niveau des différents médias que peuvent maintenant utiliser les internautes et de la manière de ' consulter ' de ' rechercher ' sur le web ...
Les sites internet doivent donc maintenant, s'ils veulent vraiment toucher le plus de gens possible adapter l'affichage de leur contenu à tous ces différents médias.
responsive web design
responsive web design (les différents médias et leur taille d'affichage)

Il faut donc pour les webdesigners, les créateurs, réussir à adapter les sites à toutes les résolutions possibles. Du html, simple, au html5, de la css à la css3 en passant par le web 2.0, toutes les technologies de programmation relatives à l'affichage sont ainsi totalement revues ...
Pour ces sites, le contenu, les images, les colonnes, les boites, enfin tout ce qui peut les constituer doivent pouvoir bouger, glisser, s'adapter à la taille de l'écran sur lequel ils vont être lus sans pour autant nuire de quelque manière que ce soit à leur lisibilité ou à leur contenu.
responsive web design
responsive web design : s'adapter aux différentes résolutions d'écran

La notion de "responsive web design" ou "web adaptatif" repense totalement la manière de concevoir les thèmes d'affichage et la navigation sur Internet, puisqu'il ne s'agit plus de concevoir autant de thèmes qu'il y a de tailles de médias mais de concevoir une seule interface qui puisse être ' auto-adaptable '. Ainsi, les sources d'information et les supports techniques ne sont pas dupliqués. Pratiqué en amont de la création d'un site, cela engendre ensuite des facilités de mise à l'échelle dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.

Les plus gros CMS connus voient déjà depuis plusieurs mois de nombreuses offres de thèmes ou templates qui permettent de suivre ces différents principes : Wordpress, Joomla, Drupal, Magento, Prestashop ... PluXml et autres ...
responsive web design : web adaptatif
responsive web design : web adaptatif

Proposer actuellement sur le Net une seule version d'un site web qui serait censée pouvoir s’adapter à toutes les tailles de ces terminaux est donc utopique. Il est en effet difficile d’envisager une interface Web unique confortable à la fois sur les petits et grands écrans : soit le site sera "rabougri" sur grand écran avec des boutons surdimensionnés, soit il obligera son visiteur à zoomer sans arrête dans la page pour pouvoir lire le contenu comme sur un petit écran et ... vice-versa ...
Le responsive design permet de répondre à cette problématique. Plutôt que de concevoir un gabarit, thème ou template, unique faisant le grand écart pour convenir aux différents médias, il permet de construire un " site caméléon " qui change de formes selon le contexte, selon la taille de l’écran, le média de lecture utilisé ...
La méthode principalement utilisée est de modifier la mise en forme CSS de la page en fonction de la taille du navigateur.
Mais, il faut aussi cependant bien avoir à l’esprit qu’avec le responsive design, l’utilisateur sur mobile consulte exactement le même site que sur un PC, c’est l’agencement de la page qui change. Cela restreint donc les marges de manœuvre pour proposer une expérience utilisateur différente, avec différentes fonctionnalités selon l’appareil. Avec le design adaptatif les fonctionnalités restent globalement similaires.

>>>
L’utilisation du service varie selon le terminal utilisé, ( usages différents sur mobile ou sur ordinateur par exemple )  on préfèrera encore parfois créer des versions distinctes qui répondront mieux à l’utilisateur, voire une ou plusieurs applications qui optimiseront encore plus la navigation ou l'exploration de l'utilisateur ( utilisation offline, animations, gestuelles, possibilités hardware, etc etc …).
C’est ce choix qu’a fait Google en préférant proposer une version distincte pour mobile et tablette, de celle pour ordinateur, plutôt qu’une adaptation en responsive design de la version classique de ses différents affichages
...

Un choix important donc à faire, mais qui prendra plus que certainement le dessus sur toutes les autres manières de concevoir l'affichage d'un site dans les mois ou années à venir ...
Un dernier exemple pour la route, bien concret celui-ci : la conception actuelle de la version en ligne du " TIME " :
responsive web design  : TIME
responsive web design  : TIME , la version adaptative du journal en ligne ...
Tous les articles de blog, ainsi que leur contenu, comme indiqué en page index du site principal, sont mis à disposition sous les termes de la licence Creative Commons. Vous pouvez le copier, distribuer et modifier tant que cette note apparaît clairement. " source: longuetraine.fr - Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 France ", ainsi qu'un lien vers la source .

1 commentaire

#1  - Trampoline a dit :

Le RWD est un élément très important à prendre en compte. Le mobile est partout et tout le monde peut se connecter à Internet via le 3G (4G) et les hot spots. Il est donc important d'en tenir compte, d'autant plus que des parts sont à prendre. Les webmasters ont tout à y gagner.

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la dernière lettre du mot s4nzi ?

Pour laisser un petit avis au passage, nul besoin d'avoir un site ou une adresse Internet, juste se donner un 'pseudo' ...
Les commentaires sont en 'dofollow', mais modérés à priori. Ils ne seront publiés qu'après vérification de votre message.
Si vous pensez ou désirez obtenir un backlink, votre commentaire doit être construit de manière cohérente, rédigé correctement ET avoir un minimum de contenu et de pertinence.