Comment adapter votre site Web aux smartphones

17/02/12 à 14:36 - Mise à jour à 14:36

Source: Trends-Tendances

Les sites mobiles seront bientôt indispensables, mais ils nécessitent un investissement supplémentaire. Il existe cependant des formules abordables pour atteindre votre public cible sur smartphone ou tablette.

Comment adapter votre site Web aux smartphones

D'après une enquête internationale du bureau d'étude TNS, les internautes qui ont accès à l'Internet mobile passent en moyenne 3,1 heures par semaine sur les réseaux sociaux et 2,2 heures à envoyer des e-mails depuis leur portable. Avec leur téléphone, les utilisateurs mobiles recherchent surtout des informations de manière ciblée : films, restaurants, produits... Mais ils ne surfent pas encore comme ils le font à partir d'un ordinateur. Normal : les sites classiques sont rarement adaptés aux internautes mobiles. "Résultat : consultation malaisée, lettres minuscules, textes trop longs, images trop lourdes (et trop coûteuses) à télécharger, absence de structure et de boutons adaptés à la navigation mobile", analysent Damien Dewitte et Jan Lemmens d'Amplexor, une société de gestion de contenu.

Si vous voulez vous adresser aux utilisateurs mobiles, trois possibilités s'offrent à vous : construire un site mobile en plus de votre site web existant, monter un site tournant aussi bien sur ordinateur que sur smartphone ou développer une application à coté de votre site actuel (voir encadré). Dans cet article, nous aborderons la première solution, qui est aussi la moins coûteuse : vous laissez en place le site actuel et vous en faites une version mobile qui puise ses données du même système de gestion de contenu que le site classique. Le visiteur est alors aiguillé automatiquement vers le bon site. Voici comment faire.

Analysez vos internautes

Les statistiques de votre site web sont capitales. "S'il est surtout consulté par des professionnels équipés d'un BlackBerry, il vaut mieux adapter votre site mobile à ce public", conseille Jan Lemmens. "Même chose pour les utilisateurs d'iPhone et d'Android. Mais plus vous développez de versions, plus cela vous coûtera cher. Certaines solutions adaptent toutefois automatiquement le site aux différents appareils."

Placez le contenu pertinent en tête

"Ne mettez pas de grand bandeau en haut, comme sur un site fixe", prévient Damien Dewitte. "Allez droit au but avec le contenu et les boutons menant aux informations pertinentes, pour ne pas devoir utiliser la barre de défilement." Le contenu ne doit, d'ailleurs, pas être aussi étoffé que sur le site normal. Les boutons de navigation moins utiles sont déplacés vers le bas.

Exploitez les possibilités des outils mobiles

"Utilisez le plus possible les avantages de l'écran tactile comme le tapping, le swiping, le pinching (tapotement, glissement et pincement) et la rotation", recommande Jan Lemmens. "Les boutons d'agrandissement à côté des illustrations deviennent ainsi superflus." N'oubliez pas que l'écran est réduit de moitié par le clavier lorsque l'utilisateur doit saisir du texte. La fonction GPS vous permet, en outre, de tirer parti de la localisation de l'internaute.

Le moins de bande passante possible

Allégez le plus possible le site web. Pour les vidéos, mieux vaut délaisser Flash pour le HTML5, pris en charge par les navigateurs mobiles modernes. Et évitez les photos trop lourdes.

Utilisez de gros boutons cliquables

Faites en sorte que l'on puisse cliquer sur des champs entiers plutôt que sur du texte ou sur un lien. Certains effets spéciaux, comme les boutons ombrés et aux angles arrondis, peuvent être utilisés. Ces effets disparaissent sur les anciens navigateurs sans que les boutons ne perdent leur fonction.

N'oubliez pas Google

Songez à faire indexer votre site mobile par Google. "En incorporant le code adéquat dans la version fixe, vous signalez à Google qu'il en existe aussi une version mobile. Dans le cas contraire, le moteur de recherche ignorera le site mobile ou pensera que votre site fixe contient certaines informations en double", explique Damien Dewitte.

Adaptations pour les irréductibles

Si toutefois vous ne voulez vraiment pas développer de site mobile, vous pouvez légèrement adapter votre site actuel pour le rendre plus lisible sur les appareils mobiles. Par exemple, en remplaçant la technologie Flash par le HTML5, CSS3 ou Javascript. Abstenez-vous aussi de placer une grande image fixe au-dessus (un en-tête ou un bandeau) qui ne se prête pas bien aux petits écrans. Enfin, évitez les blocs de texte ou les boutons qui changent de couleur ou font apparaître des bulles lorsque l'on passe dessus avec la souris. Préférez de gros boutons cliquables.

Hans Hermans

En savoir plus sur:

Nos partenaires