qu’est ce que le « responsive-design » ou design évolutif

Un site internet moderne doit pouvoir être visible sur n’importe quel support et la gestion des contenus présentés ne doit pas être dupliqués: Le fait de possèder plusieurs versions adaptées pour smartphone, écran pc ou encore pour une tablette sera résolument néfaste pour son SEO (search engine optimisation) et les moteurs de recherche comme Google,yahoo, bing ou autres, ne vous le pardonnerons jamais! (duplicate content)

Quelle sera votre réaction si demain devait aparaitre un nouveau support intermédiaire comme ce fut le cas avec l’apparition de la tablette numérique: créer une nouvelle version de votre site internet adapté pour la visualisation sur une tablette?
Qu’ en est t’il des nouveau smartphone tel que le « easy-note » avec un format intermédiaire entre le smartphone classique et la tablette?
Le problème se complique encore plus avec l’imbrication du marketing multi-canal et l’implication des réseaux sociaux lors de campagnes de communication: un utilisateurs ne verra pas forcement la version adaptée à son support lorsqu’il cliquera sur le lien d’une page que vous avez publié sur votre page Facebook.

Vous hésitez encore à intégrer les usagés mobiles à votre stratégie de web marketing ? … N’en doutez plus : avec l’évolution des usages et la prépondérance des mobinautes » (internautes qui utilisent Internet depuis leurs appareils mobiles) qui sont en 2018, 64 % à surfer sur Internet de façon régulière à l’aide de leur smartphone ou tablette..
Selon l’agence très sérieuse de communication « We Are Social » et d’autre chiffres similaires confirment cette tendance.
En 2019, il sera impensable de ne pas recourir au responsive-design pour concevoir une présence internet.

image source: https://wearesocial.com/fr/blog/2019/01/global-digital-report-2019

En considérent ces chiffres avec du recul on aperçoit que le mobile prend de plus en plus de place dans notre façon de communiquer et bouleverse nos idées preconçues de l’internet.

C’est un design flexible qui s’adaptera automatiquement en fonction du support visuel avec lequel vous aller visiter un site internet: Un site unique pour tous les supports, qu’il s’agisse d’un smartphone d’une tablette, d’un display de PC ou d’une tv connectée. L’avantage est clair: plus qu’une seule et unique version d’un site â gérer!

Techniquement, le responsive web design se base sur les Media Queries css. C’est une fonctionnalité du langage CSS (cascading style sheets), qui permet de mettre en page les éléments d’un sites sous forme de blocs. Ces blocs vont se placer vont de façon évolutive afin d’occuper la largeur disponible d’un support visuel.

Il sera également possible de sélectionner les blocs qui devront apparaître dans un ordre choisi par ordre d’importance et en fonction du support, ou d’en faire apparaitre d’autres. Certains problèmes de lisibilité due à la réduction des tailles des polices d’écriture (sur certains sites utilisant un design flexible-elastic layout) sont également résolus sur les petits formats.

Pour tester votre site, plusieurs méthodes:
Redimensionnez manuellement la fenêtre de votre navigateur en tirant le cadre de la fenêtre de votre navigateur avec votre souris
ou directement en ligne en utilisant l’outil du site: responsinator.com (gratuit) renseignez l’adresse internet du site à tester

Oui, en informatique tout est possible, cependant il faut savoir que le travail pour remanier les css peut être complexe en fonction des techniques utilisées (feuille de style de votre site internet) et qu’il est parfois préférable et également moins onéreux de concevoir un nouveau layout pour la refonte de votre site internet. En effet depuis que votre site a été réalisé, de nombreux changement sont survenus dans l’utilisation des balises html et les bonnes pratiques (best practice) d’antan ne sont plus compatibles /utilisées aujourd’hui voir même influancent négativement le référencement organique (référencement naturel) de votre site.