{"id":16,"date":"2018-02-19T10:54:38","date_gmt":"2018-02-19T10:54:38","guid":{"rendered":"https:\/\/dev.xnumerik.com\/?p=16"},"modified":"2018-02-19T10:54:38","modified_gmt":"2018-02-19T10:54:38","slug":"responsive-design-explique-simplement","status":"publish","type":"post","link":"https:\/\/xnumerik.com\/blog\/responsive-design-explique-simplement.php","title":{"rendered":"Le Responsive (Adaptatif en Fran\u00e7ais) Design expliqu\u00e9 simplement"},"content":{"rendered":"

On dit d\u2019un site Internet qu\u2019il est Responsive ou Adaptatif en Fran\u00e7ais lorsque ce dernier a la capacit\u00e9 \u00e0 s\u2019afficher correctement sur n\u2019importe quel terminal de navigation Internet (Tablette, Smartphone ou Ordinateur).<\/span><\/p>\n

On peut donc d\u00e9finir le Responsive webdesign comme un proc\u00e9d\u00e9 permettant une adaptation dynamique et en temps r\u00e9el de l\u2019affichage d\u2019un site Internet unique sur une multitude de tailles d\u2019\u00e9cran et de r\u00e9solutions.<\/span><\/p>\n

Etant une solution permettant d\u2019universaliser un site web unique sans avoir \u00e0 le dupliquer, le Responsive WebDesign ou RWD est un enjeu majeur pour les entreprises quel qu\u2019en soit la taille ou l\u2019activit\u00e9, pour peu qu\u2019elles soient soucieuses de leur image et de l\u2019exp\u00e9rience qu\u2019elles offrent \u00e0 leur clients.<\/p>\n

Comment faire un site Responsive ?<\/span><\/h3>\n

Le principe de cette technique de conception de site web repose sur trois piliers :<\/span><\/p>\n

1-Les requ\u00eates de m\u00e9dia,<\/strong><\/span><\/p>\n

2-Les grilles fluides<\/strong><\/span><\/p>\n

3-Les images flexibles.<\/strong><\/span><\/p>\n

Pour ce qui des requ\u00eates de m\u00e9dia ce sont les diff\u00e9rents \u00e9l\u00e9ments\u00a0en CSS3<\/strong>\u00a0permettant une adaptation dynamique du design selon la taille de l\u2019\u00e9cran correspondante et des sp\u00e9cificit\u00e9s de chaque support employ\u00e9.<\/span><\/p>\n

Quant aux grilles fluides, c\u2019est le fait de concevoir une interface comprenant des blocs en unit\u00e9s relatives. Il s\u2019agit donc d\u2019une conception modulaire permettant de jouer sur la composition de la page selon la taille de l\u2019\u00e9cran. Par ailleurs, il convient de souligner que le m\u00eame pourcentage d\u2019espace est occup\u00e9 par ces \u00e9l\u00e9ments fluides sur les divers \u00e9crans.<\/span><\/p>\n

Enfin, les images flexibles sont comme leur nom l\u2019indique des images dont la disposition et la taille pourront s\u2019ajuster en fonction de l\u2019\u00e9cran.<\/span><\/p>\n

Les avantages du Responsive Design ?<\/span><\/h3>\n

Avant le Responsive Design, l\u2019obtention d\u2019une exp\u00e9rience utilisateur optimale sur diff\u00e9rents supports n\u00e9cessitait la cr\u00e9ation d\u2019autant de sites que de supports cibles.<\/span><\/p>\n

En apportant une r\u00e9ponse \u00e0 cette probl\u00e9matique \u00e0 travers un seul site \u00ab\u00a0cam\u00e9l\u00e9on\u00a0\u00bb, l\u2019entreprise n\u2019a plus qu\u2019un seul site \u00e0 maintenir et \u00e0 faire \u00e9voluer, ce qui repr\u00e9sente un gain de ressources important.<\/span><\/p>\n

Pour les sp\u00e9cialistes du r\u00e9f\u00e9rencement naturel et de la communication, le RWD permet de n\u2019avoir qu\u2019un seul site \u00e0 optimiser et une seule URL \u00e0 promouvoir !<\/span><\/p>\n

Google et le Design Adaptatif<\/span><\/h3>\n

Google repr\u00e9sente aujourd\u2019hui plus de 90% du volume des recherches en ligne\u00a0! A ce titre, y \u00eatre pr\u00e9sent et bien visible est primordial pour toute entreprise s\u00e9rieuse.<\/span>
\nAlors, m\u00eame si nous n\u2019aimons pas\u00a0\u00eatre sous\u00a0l\u2019influence d\u2019une seule entreprise dominante, le fait est qu\u2019en mati\u00e8re d\u2019exp\u00e9rience utilisateur, chez Google ils savent de quoi ils parlent. Quand ils disent qu\u2019ils pr\u00e9f\u00e8rent un type de site par rapport \u00e0 un autre \u2026 on a int\u00e9r\u00eat \u00e0 \u00e9couter ! Or, pour le webdesign, ils ont clairement exprim\u00e9 leur pr\u00e9f\u00e9rence : \u00a0un seul site responsive est pr\u00e9f\u00e9rable \u00e0 plusieurs versions d\u2019un m\u00eame site adapt\u00e9es aux diff\u00e9rents m\u00e9dias sur lesquels il s\u2019affiche.<\/span><\/p>\n

Pour \u00eatre un peu plus technique sur le sujet, Google se r\u00e9f\u00e8re \u00e0 un site responsive web design comme un syst\u00e8me o\u00f9 le serveur envoie toujours le m\u00eame code HTML \u00e0 tous les appareils connect\u00e9s et o\u00f9 le CSS (le code qui d\u00e9finit les \u00ab l\u2019apparence \u00bb des pages) est utilis\u00e9 pour modifier le rendu de la page selon le type\u00a0d\u2019appareil. En d\u2019autres mots, Google ne souhaite pas avoir \u00e0 indexer (stocker, analyser et comprendre) deux sites alors qu\u2019il peut se focaliser sur un seul.<\/span><\/p>\n

Google pr\u00e9f\u00e8re les sites \u00ab\u00a0responsive\u00a0\u00bb car cela permet \u00e0 ses robots de \u00ab\u00a0crawler\u00a0\u00bb plus facilement et rapidement le web, d\u2019indexer et d\u2019organiser tout ce qui est trouv\u00e9 en ligne. Cela est d\u00fb au fait que votre site aura la m\u00eame URL. Si vous avez des versions diff\u00e9rentes de votre site pour mobiles et pour ordinateurs de bureaux, cela se traduit par des URL et du HTML diff\u00e9rents pour le m\u00eame contenu ce qui donne plus de travail et de complication aux robots de Google pour indexer vos contenus, sans parler des risques de contenus dupliqu\u00e9s sur lesquels Google Panda veille.<\/span><\/p>\n

Les limites du RWD<\/span><\/h3>\n

Les nombreux atouts de cette technique ne sauraient masquer ses limites. En effet, le Responsive impose des contraintes techniques et cr\u00e9atives plus importantes. De plus, il implique une revue en profondeur des expertises et des r\u00f4les de l\u2019\u00e9quipe projet. De mani\u00e8re concr\u00e8te, le recours \u00e0 cette m\u00e9thode suppose des co\u00fbts de d\u00e9veloppement plus importants, des temps de d\u00e9veloppement plus longs ou une phase de conception plus lourde.<\/span><\/p>\n

Alors que certaines agences au Maroc et \u00e0 l\u2019\u00e9tranger proposent encore le choix entre la r\u00e9alisation d\u2019un site Internet classique et un site web Responsive, pour nous la question ne se pose plus depuis des ann\u00e9es tant Le\u00a0RWD<\/strong>\u00a0est une solution optimale et \u00ab\u00a0future proof\u00a0\u00bb.<\/span><\/p>\n

Nous pensons en effet que les avantages de ce proc\u00e9d\u00e9 sont tr\u00e8s largement sup\u00e9rieurs aux\u00a0d\u00e9fis tant techniques, qu\u2019ergonomiques ou organisationnels qu\u2019il pr\u00e9sente.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

On dit d\u2019un site Internet qu\u2019il est Responsive ou Adaptatif en Fran\u00e7ais lorsque ce dernier a la capacit\u00e9 \u00e0 s\u2019afficher correctement sur n\u2019importe quel terminal de navigation Internet (Tablette, Smartphone ou Ordinateur). On peut donc d\u00e9finir le Responsive webdesign…<\/p>\n","protected":false},"author":5,"featured_media":4245,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/posts\/16"}],"collection":[{"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":0,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/media\/4245"}],"wp:attachment":[{"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xnumerik.com\/blog\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}