Webdesign : comment afficher du contenu sur mobile.

Il est très difficile, voir, 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 vous assurer un affichage de votre contenu sur mobile pertinent.

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 ce peu, 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 d’agrémenter vos icônes par du texte qui viendra réconforter votre utilisateur.

Agrandir le texte

Soyez fière 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 peu 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 à 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, qu’un trop-plein d’effet peut vite devenir agaçant pour l’utilisateur lambda. 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 *