7 conseils pour concevoir un site en responsive design

Starbucks, Facebook, Boston Globe... qu'il s'agisse de média, de marques ou encore de réseaux sociaux, le responsive design se répand très rapidement à travers le web. Cette nouvelle manière d'appréhender la conception d'un site web, marchand ou non, repose sur une philosophie simple : une seule interface accompagnée d'une URL, est prévue pour fonctionner de manière optimale avec une ergonomie adaptée, sur tous types de supports : ordinateurs, tablettes ou smartphones.

Pour reconnaitre un site ayant déjà franchi le pas du responsive design, rien de plus simple. Il suffit de procéder au redimensionnement manuel d'une page web en étirant la page du navigateur, ou en la rétrécissant. Si les informations affichées sur le site se réorganisent automatiquement en fonction de la taille de la fenêtre, c'est que celui-ci est conçu en responsive design.

Le secret d'une telle prouesse ? Des blocs. Le contenu du site est en effet organisé et regroupé dans des blocs dynamiques dont la forme et le contenu évoluent selon le support sur lequel apparait le portail web. Techniquement, " n'importe quel développeur travaillant sur un site web , est capable de le réaliser en responsive design, assure Jérémie Eskenazi, fondateur de l'agence Miratech. Les trois composants majeurs d'un web adaptatif sont le CSS3, des grilles fluides et des images redimensionnables ".

Mais créer un site en responsive design nécessite de se poser les bonnes questions en amont. Car la déclinaison du portail sur les différents supports est réalisée une seule fois, et les modèles ainsi conçus sont interdépendants. Néanmoins, cela présente l'avantage d'alléger les coûts de maintenance, d'améliorer le référencement du site, et de réduire le budget global de conception de plateformes adaptées à différents supports.

Voici les sept bonnes pratiques à connaitre pour réussir un site en responsive design :

< p=""><="" p="">

- Adapter les visuels en fonction du support utilisé. Si le site web comporte de grands visuels qualitatifs, susceptibles d'être 'abimés' par la version mobile, il est possible de les supprimer pour cette dernière.

- Gérer des blocs de contenu cohérents : il est nécessaire de penser les contenus en bloc pour un réagencement facile selon les supports.

- Rester attentif à conserver une taille de page raisonnable concernant la version mobile. Ne pas hésiter à retirer du texte si besoin.

- Réussir à suggérer aux internautes les éléments du site sur lesquels il peut cliquer, notamment pour les supports de type tablette ou smartphone.

- Adapter les zones d'interaction au tactile : les boutons doivent être plus grands afin d'être facilement accessibles aux doigts de l'utilisateur.

- Adapter le nombre de fonctionnalités présentées sur mobile : Starbucks a ainsi retiré la fonction de service client de sa plateforme mobile, jugée peu utile pour ce type de support, au regard des usages en situation de mobilité.

- Adapter le portail aux usages d'un smartphone. Exemple : l'ajout d'un bouton de géolocalisation afin de faire profiter au mobinaute de l'adresse d'un point de vente à proximité.

<>