Souvent présenté, y compris par nous, de façon simplifié : optimisation du design en fonction de la taille de l’écran, le responsive web design est bien plus complexe qu’il n’y parait.

La première chose à savoir c’est qu’il est très difficile de passer un site existant en responsive car il faut alors repenser toute la structure du site mais également toute sa charte graphique. En effet, qui dit lecture sur mobile et tablette dit site allégé puisque le site doit pouvoir charger même avec des connexions internet lentes type EDGE. Le CSS 3 est donc la clé pour réduire au maximum le poids de son design.

Il est ainsi bien plus simple de commencer par concevoir la version mobile, puis d’ajouter des blocs petit à petit pour concevoir les versions tablette et ordinateur du site. Mais attention sur mobile et tablette il faut en plus prévoir une version pour le mode paysage car oui la plupart du temps on les tient verticalement mais parfois on les tourne à 90° et c’est souvent là que ça devient compliqué.

Afin de concevoir son site en RWD il est souvent également plus simple de partir d’un « fluid design ». Le fluid design n’est pas basé sur un nombre de pixels (960 ou 1024 px) mais sur des pourcentages (100%, 60%…). Ainsi on parlera de sites élastiques puisqu’ils vont naturellement s’adapter à la taille de l’écran. Ce n’est malheureusement pas suffisant en terme d’ergonomie mais ça va en revanche être déterminant pour le redimensionnement des différents blocs.

Afin de modifier dynamiquement le design d’un site nous utilisons CSS 3 dont nous parlions un peu plus haut mais également jQuery. Il demande d’effectuer des modifications importantes aussi bien concernant les fonctionnalités, même les boutons de partage sur Facebook ou Twitter doivent être conçus autrement mais aussi sur le design, les visuels devant être plus simples à charger.

Le responsive web design est donc une réelle évolution de la conception web, qui est nécessaire mais nécessite quelques concessions. Il n’est pas possible de prévoir un site trop complexe sur mobile, certaines fonctionnalités n’étant pas adaptées.

Vouloir un site en RWD signifie également faire quelques abstractions. Ainsi, quelques bugs peuvent survenir qui peuvent être liés soit au défaut de connexion soit à un navigateur trop obsolète. Les plus anciennes versions de l’iOS d’Apple et d’Android ne prenaient ainsi pas la gestion complète du CSS quant à la compatibilité avec Internet Explorer 7, il faut entièrement l’oublier !

Le responsive web design est devenu aujourd’hui incontournable lors de la création de vos sites internet. En effet, vos prospects/clients veulent pouvoir accéder à vos services quelque soit l’endroit où il se trouve. Aujourd’hui, même lorsqu’ils sont à domicile, la plupart des personnes consultent internet depuis leur téléphone ou leur tablette devant la TV plutôt que d’être installé à un bureau devant son ordinateur. Si vous devez refaire votre site prochainement, il est important d’y penser immédiatement car le mettre en place dans un second temps sera très compliqué et coûteux.

Voici un exemple de responsive design appliqué au site de notre agence Digital Dealer :

Digital Dealer, version web :

Digital Dealer, version tablette :

Digital Dealer, version mobile :

Cet article 2013, résolument l’année du responsive web design a été publié sur Auto Net | Le blog des professionnels de l'Automobile sur Internet.