Web mobile #3 : Simplifiez la mise en page

La mise en page de votre site web est adaptée pour un utilisateur qui dispose d’un clavier, d’une souris et d’un écran d’ordinateur classique.

Le contexte d’utilisation pour une version web mobile est tout à fait différent. Cette même mise en page doit être pensée :

  • pour un usage sur petit écran
  • une interaction tactile
  • une lecture pouvant être perturbée par l’environnement itinérant dans lequel se trouve un utilisateur de smartphone

Le plus gros challenge, vous vous en doutez, est la réduction de la taille de l’écran.

Les concepteurs web pensaient s’être définitivement débarrassés des contraintes imposées par les petits écrans… Et voilà qu’arrivent de vrais nouveaux challenges avec des écrans de 480 pixels pour les plus grands d’entre eux.

Les questions que vous vous posez

Quelles sont les bonnes pratiques de mise en page pour les versions mobiles ?
Quels éléments de votre site web peuvent être réutilisés ?
Quels sont les éléments qui doivent être modifiés ?

Notre proposition

web mobile : mise en page simplifiée

Tout d’abord conservez votre identité graphique :
Réutilisez votre logo et thèmes graphiques. Dans la plupart des cas la bannière du site original pourra être réutilisée facilement après une petite phase d’épuration.

Ensuite simplifiez la mise en page de vos écrans :
Présentez les informations sur une seule colonne. Tout ce qui est flottant dans les pages de votre site web devra être affiché sur un mode séquentiel, l‘un en dessous de l’autre. N’oubliez pas de proposer des titres pour chacun des éléments flottants.

Optimisez la lisibilité de vos contenus :
Utilisez une police de caractères suffisamment espacée et fortement contrastée. En effet, la plupart des écrans de mobile sont de qualité très inférieure à celle des ordinateurs, les choix de police de caractères sont cruciaux pour compenser les limitations de l’écran.

Enfin, adaptez les contenus à l’usage tactile :
Privilégiez notamment les boutons qui sont plus facilement sélectionnables (dans l’interaction tactile seuls deux états sont possibles : enfoncé ou non). Oubliez les effets de survol de type bulles, changements de couleurs, etc.