Responsive Design

Qu'est ce que le responsive design ?

Le Responsive Web Design est une approche du développement Web qui crée des changements dynamiques à l'apparence d'un site Web, selon la taille de l'écran et l'orientation du dispositif utilisé pour le visualiser. Le Responsive Web Design est une approche au problème de la conception devant la multitude d'appareils disponibles pour les clients, allant des téléphones minuscules aux énormes écrans de bureau.

Le Responsive Web Design (RWD) utilise des règles de taille d’écran pour déterminer comment la disposition d'un site apparaîtra. Les règles de taille sont généralement basées sur la largeur du navigateur. On utilise le HTML (langage servant pour toutes les pages internet) et le CSS (qui détermine la mise en page) pour changer l'apparence de la page. Cette apparence doit être optimisée en fonction de chaque support.

Plutôt que de créer un site distinct pour chacun des formats (les ordinateurs de bureau, les ordinateurs portables, les tablettes et les téléphones de toutes tailles), une seule base de code peut prendre en charge tous les utilisateurs ayant des fenêtres de différentes tailles.

Dans un RWD, les éléments de page se remanient au fur et à mesure que la fenêtre d'affichage s'agrandit où se rétrécit. Une conception de bureau à trois colonnes peut être modifiée en deux colonnes pour une tablette et une seule colonne pour un smartphone. Le RWD repose sur des grilles proportionnelles pour réarranger le contenu et les éléments. Bien que le RWD soit apparue comme un moyen d'offrir un accès égal à l'information quel que soit l'appareil, il est également possible de masquer certains éléments, comme les images d'arrière-plan. C’est ce qu’on appelle l’Adaptative Design.

Différence entre Responsive design et Adaptive design

La différence entre le Responsive design et l’Adaptive design réside dans le fait que le Responsive Design va faire en sorte d’afficher tous les éléments d’une page de manière clair quel que soit le format. L’Adaptive design lui, va n’afficher que les éléments considérés comme essentiel, pour chaque format d’écran. Cela peut amener par exemple à des suppressions d’élément sur le format mobile. Les décisions concernant le masquage du contenu et des fonctionnalités ou la modification de l'apparence des différents types d'appareils doivent être basées sur la connaissance de vos utilisateurs et de leurs besoins (UX Design / Parcours utilisateur).

Le Responsive Web Design présente des avantages potentiels par rapport au développement de sites distincts pour différents types d'appareils. L'utilisation d'une seule base de code peut accélérer le développement par rapport au développement de 3 ou 4 sites distincts et faciliter la maintenance dans le temps, car un ensemble de code et de contenu doit être mis à jour plutôt que 3 ou 4. Le système de Responsive Web Design est également relativement " évolutif " en ce sens qu'il peut prendre en charge de nouveau format d’écran à tout moment.

Il permet de réorganiser les éléments sur des pages plus grandes pour les adapter à des pages plus fines, plus longues ou vice- versa. Cependant, il ne suffit pas de s'assurer que les éléments s'intègrent dans une page. Pour qu'un Responsive Web Design soit un succès, il doit également être utilisable à toutes les résolutions et tailles d'écran.

Lorsque des éléments se déplacent dans la page, l'expérience utilisateur peut être complètement différente d’un site à l'autre. Il est important que les Web Designer et les Développeurs se coordonnent pour travailler ensemble non seulement pour déterminer comment le contenu doit être agencé.

De nombreuses personnes, se tournent vers des solutions telles que

Bootstrap

, pour les aider dans la conception. De tels supports peuvent être d'une grande aide pour faire avancer le développement. Cependant, faites attention que le module fonctionne bien avec votre contenu et fonctionne avec votre site.

Nous recommandons toujours d'effectuer des tests utilisateurs sur les différentes versions. Vous devez faire des tests sur plusieurs plates-formes et navigateurs. Le même élément de design qui peut fonctionner à merveille sur un ordinateur peut très mal fonctionner sur un smartphone, ou vice versa.

Le contenu

La priorisation du contenu est l'un des aspects clés d'un bon design responsive. En effet, beaucoup plus de contenu est visible sans défilement sur un grand écran de bureau que sur un petit écran de smartphone. Si les utilisateurs ne voient pas instantanément ce qu'ils veulent sur un moniteur de bureau, ils peuvent facilement parcourir la page pour le découvrir. Sur un smartphone, il se peut que les utilisateurs aient à faire défiler à l'infini pour découvrir le contenu qui les intéresse et quitter le site. La priorisation intelligente du contenu aide les utilisateurs à trouver plus efficacement ce dont ils ont besoin. C’est ce qu’on appelle la hiérarchisation de l’information.

Prise en compte du rendement

La performance peut également être un problème dans le cas d’un Responsive Design. Le RWD fournit le même code à tous les appareils, que le code s'applique ou non à ce modèle. Les changements d’échelles se produisent du côté du client, ce qui signifie que chaque appareil - le téléphone, la tablette ou l'ordinateur - reçoit le code complet pour tous les appareils et prend ce dont il a besoin.

Un smartphone de 4 pouces reçoit le même code qu'un moniteur de bureau de 24 pouces. Cela peut embourber les performances d'un smartphone, qui peut dépendre d'une connexion de données plus lente et plus ponctuelle. (C'est pourquoi certains sites se tournent vers la conception adaptative, où le serveur hébergeant le site Web détecte l'appareil qui fait la demande et fournit différents lots de code HTML en fonction de cet appareil).

Pour vraiment évaluer l'expérience utilisateur d'un site Responsive, ne testez pas vos designs uniquement dans le confort de votre propre bureau, sur votre connexion haut débit. Partez à l'aventure dans la nature avec votre smartphone - entre les grands immeubles d'une ville, dans les salles de conférences ou les sous-sols intérieurs, dans les régions éloignées dotées d'une connectivité ponctuelle, dans les points chauds connus pour la connexion réseau de votre propre téléphone cellulaire - et voyez comment votre site fonctionne dans des conditions variées. L'objectif du Responsive Web

Design est de donner un accès équivalant à l'information, quel que soit le dispositif. Un utilisateur de smartphone n'a pas une expérience équivalente à celle d'un utilisateur de bureau si les temps de téléchargement sont intolérables.

Conclusion

Le Responsive Web Design est un outil, pas une panacée. Bien que son utilisation présente de nombreux avantages lors de la conception sur plusieurs appareils, l'utilisation de la technique ne garantit pas une expérience utilisable (tout comme l'utilisation d'une recette gastronomique ne garantit pas la création d'un repas magnifique).

Les équipes doivent donc se concentrer sur les détails du contenu, de la conception et de la performance afin d’offrir la meilleure expérience pour leurs utilisateurs sur tous les appareils.

Il existe maintenant de nombreuses façons de valider et de tester les conceptions de RWD, allant des validateurs de sites mobiles et des émulateurs mobiles aux outils de test simultanés comme Adobe Edge Inspect. Les navigateurs Chrome, Firefox et Safari et la console Chrome offrent, comme les tiers, des outils permettant de redimensionner les fenêtres de conception.