Conception Web - Responsive Design

Le responsive web design qu'est-ce que c'est ?

C'est un procédé relativement récent qui consiste à adapter l'affichage du site en fonction du type d'appareil utilisé pour la consultation. La forte augmentation des consultations sur mobile a rendu nécessaire le développement de nouveaux outils pour assurer une bonne lisibilité et ergonomie, que le visiteur soit sur un ordinateur, un mobile ou une tablette. Auparavant, on utilisait deux formats différents, par exemple www.lemonde.fr et mobile.lemonde.fr pour les téléphones. Cependant, cette pratique posait plusieurs problèmes, d'une part pour l'optimisation du référencement, d'autre part pour le travail supplémentaire pour les mises à jour, et cela ne permettait pas de se préparer aux utilisations futures (TV HD, projecteurs, nouveaux appareils...etc)

Comment créer un site web responsive ?

Le principe est simple, il suffit principalement d'utiliser les media queries pour les css : en clair, cela permet d'interroger le navigateur pour savoir quelle est la taille en pixels de la zone d'affichage, le type d'écran, la position, puis de déterminer les paramètres de l'affichage en fonction de ces résultats : par exemple, le bloc B est à gauche du bloc A si l'affichage sur l'écran est supérieur à 1024 pixels, mais il passe en dessous dans le cas contraire. Mais le bloc C peut aussi disparaître parce que la fonction concernée n'est pas jugée utile sur les mobiles, le bloc D peut devenir D' avec de nouveaux contenus...etc. En pratique, les mises en page fluides requièrent une bonne connaissance du CSS 3 et le code d'un ancien site doit parfois être entièrement revu pour que l'affichage soit optimal pour tous les écrans.

Le repositionnement fluide des éléments du site, et leur personnalisation au media utilisé ont fait de l'optimisation multi-supports un nouveau besoin, en tout cas par son ampleur.

Peut-on rendre "Responsive" un site existant ?

Tout dépend du site. Ce qui peut être une simple adaptation réalisée en quelques heures peut aussi être un vrai casse-tête pour des sites plus anciens, selon la technologie utilisée, le langage, le design. Il faut dans tous les cas faire une étude pour voir la solution technique la plus appropriée : refonte graphique complète, réintégration dans un CMS, utilisation d'un template, simple adaptation des css, ... de multiples cas de figure sont possibles.

Combien coûte une adaptation Responsive ?

L'éventail est très large. Lorsque vous concevez un nouveau site, vous pouvez utiliser un template existant déjà conforme aux exigences de responsive web design et le personnaliser pour quelques dizaines d'euros. Pour un site beaucoup plus ancien et très complexe, avec un nombre important de pages et de modules, la personnalisation responsive peut prendre plusieurs jours. Dans tous les cas, un rapide audit de votre site vous permettra d'avoir un chiffrage précis et d'évaluer la faisabilité d'une transition efficace.