La première consiste à concevoir vous-même votre site, sur des principes assez simples mais stricts, qui tiennent au format du terminal et aux usages des mobinautes.
La seconde, plus simpliste, vous propose de « porter » simplement votre site en lui adjoignant une feuille de style. Une option que beaucoup d’entre nous privilégieront, en raison de sa simplicité de mise en oeuvre.
Choisissez votre méthode, pourvu qu’elle vous sourie et ne vous écartez pas du bon chemin digital : Voici donc mes bonnes pratiques pour éviter le #fail.
Point 1 : Simplifez votre interface
Layout et menu
Le premier risque est de surcharger l’interface. La seule règle : aller à l’essentiel, soit donc :
- Ne cherchez pas à créer plusieurs colonnes = pas de place
- Empilez simplement les champs suivants : Logo/navigation/recherche (optionnel)/contenu avec excerpts+lien vers l’info
- Veillez à la clarté de vos menus. La taille du clavier vous impose une navigation avec des titres simples (1 mot ?) et expressifs, évitez plus que tout les allégories, les termes jargonneux ou les prériphrases
Un point sur le footer
- Là encore, nous allons au plus simple : votre copyright suffira
- Evitez les listes de liens, illisibles et inefficaces
Point 2 : Place aux contenus
- Ne « coupez » pas votre texte pour le raccourcir : les internautes détestent les articles tronqués. Préférez un lien vers l’article complet en ligne
- Allégez vos images : Au maximum 2kB pour le logo (oui je sais, c’est peu), images de taille max 150 px et porteuse de sens (pas d’img hors contexte !), pas d’effets ni de backgrounds sur le menu.
- Attention aux internautes qui n’affichent pas les images : pensez à la balise ALT
- Pas de préférences pour le format : Les mobiles supportent les JPG, les GIF et les PNG
- Vous accueillez de la publicité ? Réduisez au maximum, son intrusion n’en est que plus renforcée sur un mobile
Point 3 : Passons au code
Un code propre
- Même si vous faitez appel à un prestataire, vérifiez toujours que certaines règles sont respectées : du code HTML 100% valide (les plateformes de portables ne sont pas toutes 100% fiables
- Pas de largeur en pixel, mais en pourcentage, vu Les différences entre écrans…
- Pas de javascript ni de flash, non négociable
- Pour rentrer dans le vif du sujet, voici un lien vers des modèles 100% iphone compatibles !
Un code « intelligent »
- N’oubliez pas d’i clure un code de détection la plateforme à l’arrivée sur votre URL, comme celui-ci.
- Et pourquoi pas un site propre, qui identifierait les contenus à publier sur mobile vs les contenus destinés à être consultés sur le web ? (Oui, je sais, l’effort est important, mais peut s’avérer gagnant)
Pour finir : 6 plates-formes de construction de site mobile
Voici 3 plateformes générique, puis 3 moteurs intégrables sous WordPress. Vous n’aurez plus aucune excuses pour ne paas suivre mon exemple !