Webdesign : comment afficher du contenu sur mobile

Il est très difficile, voire quasiment impossible de garder un design identique entre deux résolutions différentes. Si le contenu de votre site web n’a pas été pensé « mobile-first », gérer son affichage sur mobile peut s’avérer un vrai calvaire. À l’heure ou le contenu occupe une place centrale dans le monde du web, voici quelques bonnes pratiques pour assurer un affichage pertinent de votre contenu sur mobile.

Faire en sorte que le contenu loge sur l’écran : un thème/une idée = une taille d’écran

Voici un défi un peu compliqué mais qui vous garantira une bonne ergonomie mobile. Autant que faire se peut, tentez d’afficher une seule information importante par résolution d’écran. De cette façon, votre utilisateur ne manquera aucun contenu au scroll. De manière générale, n’hésitez pas à aérer votre contenu par le biais de margins ou de paddings supérieurs et inférieurs.

Soigner la navigation

La navigation sur mobile est l’un des aspects les plus importants car elle représente un facteur d’augmentation du taux de rebond. Une mauvaise navigation, un contenu introuvable, et hop ! C’est un utilisateur mécontent assuré. Veillez à ce que toutes les entrées de votre menu soient intuitives, compréhensibles et surtout justifiées. Les icônes sont de bons amis mais attention tout de même à ne pas en abuser. Si votre utilisateur ne comprend pas l’icône en question, il ne cliquera pas dessus et manquera sans doute du contenu. Il est également possible de compléter vos icônes par du texte, qui viendra aiguiller votre utilisateur.

Agrandir le texte

Soyez fier de votre contenu, n’ayez pas peur d’utiliser une grande taille de police. La plupart du temps, lorsqu’on pense mobile, on imagine du texte écrit en tout petit pour que tout « loge » dans les blocs. Or, ce genre de texte peut s’avérer difficile à lire pour bon nombre d’utilisateurs. Simplifier la lecture d’un texte par une police plus importante que les 13 ou 14px habituels peut être une bonne option.

Éviter les effets inutiles

Gardez en tête que l’utilisateur mobile a une connexion potentiellement instable. Vous avez créé le site le plus fluide et dynamique qui soit, le rendu sur votre écran d’ordinateur est bluffant, les effets et les transitions sont parfaits ? Et sur mobile, que se passe-t-il ? Même si vous maniez le code javascript comme personne, ce genre d’effet aura souvent tendance à ralentir la navigation sur mobile. Sans compter que l’abus de ces effets peut vite devenir agaçant pour les utilisateurs. Pourquoi ne pas faire une version sans js pour mobile ?

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

1 × cinq =