3 désastres en responsive web design et comment les éviter

3 desastres en responsive web design et comment les eviter

Les méthodes de responsive design sont très utiles pour les développeurs parce qu’elles nous permettent de fournir du contenu à des appareils de taille différentes sans avoir à réaliser des versions différentes du site et sans utiliser d’autres méthodes comme l’échantillonnage (scaling) et les fluid layouts.

Cet article couvrira les 3 erreurs les plus fréquentes commises par les designers et vous proposera des stratégies pour éviter de les commettre.

Échantillonnage vs fluid vs responsive

Il y a beaucoup de confusion en ce qui concerne ces trois termes et les designers les utilisent souvent de manière incorrecte. En réalité, chacun de ces termes sont des étapes d’évolution différentes de la technique de layout qui est apparue en fonction des avancées de la technologie.

Les layouts échantillonnages sont créés pour mettre des éléments à une échelle relative à d’autres. Ils sont responsive dans le sens qu’ils seront dynamiquement à la même échelle que le contenu en fonction de l’appareil utilisé. Le layout est statique et modifie la taille de chaque élément pour maintenir une apparence constante.

3 desastres en responsive web design et comment les eviter (layout_echantillonable)Ci-dessus un exemple de layout échantillonnage à différentes résolutions : le design sacrifie la lisibilité pour la consistance.

Les Fluid layouts sont différents parce qu’ils redimensionnent les blocks d’éléments relativement à la taille de l’appareil. Cela se fait grâce à l’utilisation d’unités différentes comme les ems pour ne pas avoir un texte coupé. Le design peut être corrompu si l’utilisateur redimensionne la page.

3 desastres en responsive web design et comment les eviter (fluid_layout)Ci-dessus un exemple de fluid layout à différentes résolutions : le design sacrifie la consistance pour la lisibilité.

Les layouts responsives ne peuvent pas tout redimensionner. Au lieu de cela ils modifient ce qui est affiché en fonction de la taille de l’écran.

3 desastres en responsive web design et comment les eviter (responsive_layout)Ci-dessus un exemple de responsive layout à différentes résolutions.

Désastre 1 : Les menus qui débordent sur une nouvelle ligne

Si vous utilisez une barre de navigation au-dessus de votre page, un design responsive est censé le redimensionner à un format plus compact lorsque la page est affichée sur un écran plus petit. Mais cela ne fonctionne pas toujours parfaitement si la partie affichée est plus large que le point de rupture, mais trop petite pour afficher tous les éléments du menu sur une seule ligne. Comme résultat on obtient un menu qui déborde.

3 desastres en responsive web design et comment les eviter (menus_qui_debordent)

Il y a plusieurs manières de résoudre ce problème. La première est de réduire le nombre d’éléments affichés horizontalement sur la barre de navigation et de les trier en catégories et sous catégories. Vous pouvez utiliser des listes déroulantes pour afficher les sous-catégories lorsqu’une catégorie est sélectionnée.

La seconde manière est de modifier le point de rupture à une valeur inférieure. Le nombre actuel à utiliser est la largeur à laquelle votre barre de navigation commence à mal s’afficher, et non la taille de l’écran d’un appareil spécifique.

La troisième manière est d’utiliser différents menus pour les appareils, comme des menus coulissants.

Désastre 2 : Utiliser des images à largeur fixe.

Les blocks de contenu ont souvent une taille relative à la taille de l’écran. Lorsqu’une image est plus large que la taille de ce block, l’image se coupe ou un scroll apparaît.

3 desastres en responsive web design et comment les eviter (images a largeur fixe)Ci-dessus: un exemple d’une mauvaise largeur fixe de l’image : elle est trop large ; un scroll apparaît et le contenu n’est pas entièrement visible à l’écran.

Vous pouvez éviter d’avoir ce problème en utilisant des unités relatives pour fixer la taille de l’image, ou si vous utiliser un framework qui supporte cette fonctionnalité (comme bootstrap) vous pouvez utiliser une classe d’image responsive (par exemple : class= ‘’ img-responsive ‘’).

3 desastres en responsive web design et comment les eviter (images classe responsive)Ci-dessus : Le même élément avec une image associée à une classe responsive : la barre de scroll a disparu.

Désastre 3 : Distorsion des éléments.

Ce point est un peu plus obscur, mais c’est ce qui arrive lorsqu’un layout est affiché sur un écran de petite taille : les colonnes qui ne sont pas traitées se comportent comme des lignes. C’est un problème parce que la distorsion du contenu modifie la hiérarchie de votre design non intentionnellement.

3 desastres en responsive web design et comment les eviter (distorsion des elements)Ci-dessus: la colonne se comporte comme une ligne, il y a distorsion de contenu.

La solution est évidente, mais c’est impressionnant le nombre de personnes qui ont du mal avec ce point : il suffit simplement de définir explicitement une hauteur, une largeur et une marge intérieure (padding) pour l’élément. S’il ne reste pas à sa position ou déborde sur d’autres éléments, vous pouvez le forcer à être là ou vous voulez en le mettant dans un block div et en définissant les marges.

La planification aide à éviter de commettre des erreurs

Cet article parle juste des trois désastres les plus fréquents en responsive design, mais il y a beaucoup d’autres manières pour qu’un bon design ne s’affiche pas correctement. Prévoir ces erreurs n’est pas compliqué. Les navigateurs modernes ont par défaut des outils de tests de layout responsives. Planifiez votre design correctement et testez-le souvent.

Articles similaires

Les polices avec empattements

Les polices avec empattements ont de meilleurs résultats sur les pubs. Le New York Times a réalisé une enquête en 2012 et a conclut que les polices qui ont des empattements comme Baskerville par exemple donnent l’impression que les affirmations ...

Les tendances en web design pour 2016

Le web design se développe impétueusement et les tendances changent à proportion. Aujourd’hui les couleurs vives et dynamiques c’est un nouveau baroque. Dans cet article nous allons vous présenter les 7 tendances actuelles 2016 en couleurs.