ConFoo: Pensez mobile d’abord, étoffez plus tard
C’est ce que Karl Dubost proposait lors de sa présentation au ConFoo du 11 mars dernier. Avec une part de plus en plus importante de la population naviguant le web à partir d’un appareil mobile (13% au Québec en 2010 avec une forte progression par rapport à 2009 [1]), le design d’une version mobile d’un site web doit être fortement considérée lors de sa conception ou de sa refonte.
Pourtant, la réalité est que naviguer sur le web avec un mobile aujourd’hui peut être une expérience loin d’être agréable. Comment cela peut-il être amélioré? Voyons quelles sont les avenues à privilégier ainsi que celles à éviter.
Pensez à vos usagers de façon globale
Il faut d’abord se défaire de l’idée que mobile égal gadget portatif. Le web mobile est un moyen d’accéder au web qui n’est pas nécessairement relié à un objet physique précis. Des installations multimédias ou des télévisions peuvent potentiellement être assimilés à des appareils mobiles. Il est donc primordial d’analyser son marché pour ne pas mettre des barrières inutiles à certains usagers. Le web mobile est extrêmement varié dans le monde, ce serait une erreur de croire qu’il ressemble à la réalité nord-américaine partout ailleurs. Comme Karl Dubost le soulignait, le mobile ne se résume pas à l’appareil mais davantage à l’expérience, le contexte.
Que fait-on alors?
Rien La première option et la plus simple est de ne rien faire du tout. Bien évidemment, cette “solution” n’est pas souhaitable ni pour les usagers ni pour les concepteurs. L’expérience usager est médiocre au mieux (pinch-to-zoom, scroll excesif, etc.) et les usagers mobiles abandonneront le site tout simplement.
Mise en page liquide et semi-liquide C’est le réarrangement des blocs d’information selon la grandeur de la fenêtre. Déjà mieux, mais il y a place à amélioration.
Différents noms de domaine Une stratégie utilisée par plusieurs est de garder la même base de données en simplifiant le contenu et de le proposer sous un différent nom de domaine. Des exemples sont nytimes.com qui redirige vers mobile.nytimes.com et guardian.co.uk qui redirige vers m.guardian.co.uk.
Mais comment reconnaître adéquatement un usager mobile?
User-agent sniffing C’est une technique pour présenter un contenu différent selon le client accédant au site web, le fureteur dans notre cas. Le problème est la myriade de possibilités et le défi technique que cela représente. Même avec une liste mise à jour régulièrement, il est plus que probable qu’un client détecté ne soit pas reconnu. L’univers du mobile est en pleine ébullition et cette solution s’avère non viable à terme. Si l’usager n’est pas reconnu, lui donner la meilleure expérience usager et non la pire proposait Karl Dubost.
N’oubliez pas de toujours mettre un lien entre vos deux versions du site web, un lien pointant vers la page courante bien entendu!
Du HTML purement et simplement
Pourquoi ne pas utiliser les bons vieux outils que sont HTML et CSS? Dans sa nouvelle mouture, CSS propose les media queries qui permettent l’application de différentes règles de style selon des propriétés précise comme la largeur ou la hauteur courante. Cela permet la réorganisation automatique de la présentation sur différents appareils. C’est une solution qui permet de s’approcher d’une situation idéale, même si elle n’est pas parfaite. Faites-en le test vous-même sur http://mediaqueri.es/. Très convaincant!
Penser à des stratégies mobiles
La règle d’or est de penser à l’usager. Peut-être sera-t-il dans une situation où il devra manier son mobile à une main dans une pièce peu éclairée ..? Peu importe la situation, le design doit être minimal et se concentrer sur le contenu, la raison pourquoi l’usager est venu sur votre site.
Changer de paradigme ne se fait pas du jour au lendemain, c’est un processus lent et parfois douloureux. Karl Dubost faisait remarquer que l’expérience sur certains sites ‒ même sur un ordinateur de bureau ‒ était meilleure avec le design mobile et je dois être d’accord avec lui. Sa suggestion est que le processus de développement devrait débuter avec une version minimale à grande utilisabilité pour ensuite passer à un design plus étoffé au fil des besoins. Qu’en pensez-vous? Allez-vous adhérer à ce principe?
Pour plus d’outils et de techniques pour le développement de vos sites mobiles, consultez les diapos de la présentation ici.
