En 2010, un peu plus de 5,4 millions de Canadiens utilisaient déjà un téléphone intelligent. Nous pouvons ainsi constater que le marché des sites Web sur mobile présente un potentiel énorme et que celui-ci n’est pas à négliger si vous désirez faire une carrière en intégration Web. Voici donc quelques conseils pour vous aider à démarrer dans la conception de sites mobiles.
Tout d’abord, le principe de base ne réside pas en la création d’une version identique de votre site Internet, mais bien de sa version déclinée et simplifiée sur mobile. En effet, il convient d’adapter le visuel ainsi que le contenu de votre site pour répondre aux exigences précises de ce médium bien différent du Web. Par exemple, le visuel devra répondre à l’espace limité d’un écran de téléphone et le contenu devra être judicieusement sélectionné pour ne conserver que l’essentiel afin de respecter le besoin de rapidité d’accès de l’utilisateur qui est encore plus primordial en mobile que sur un site Web classique!
En tant qu’intégrateurs, nous devons nous assurer que les sites sur lesquels nous travaillons sont semblables sur tous les navigateurs et toutes les plateformes. Les sites mobiles n’échappent donc pas à cette règle d’or! À cet effet, je vous suggère de baser vos tests sur les systèmes d’exploitation mobiles plutôt que sur les appareils téléphoniques eux-mêmes. Et, n’oubliez surtout pas de tester vos sites sur les systèmes d’exploitation mobiles les plus populaires tels qu’Android, iOS et Microsoft Windows Phone 7!
Pour intégrer un site mobile, vous pouvez utiliser allégrement du HTML5 et du CSS3, mais ce n’est pas obligatoire. Si vous êtes plus à l’aise avec le langage HTML, rien ne vous empêche de l’utiliser.
Pour vous rendre la tâche plus simple, jQuery a publié une version mobile de sa librairie… en puissance 10! jQuery Mobile est léger, simple et rapide d’utilisation! Il regroupe des techniques de HTML sémantiques, de CSS3, de JavaScript et d’accessibilité comme WAI-ARIA qui est compatible avec la majorité des mobiles. L’utilisation de pourcentage et de l’unité de mesure en CSS « em » vous permettront également d’atteindre plus facilement une certaine ressemblance de votre site mobile sur tous les systèmes d’exploitation.
L’utilisation des META est aussi essentielle! En effet, les META permettent, entre autres, d’indiquer aux navigateurs que l’internaute est précisément sur un site mobile et de passer certaines valeurs telles que le « meta viewport » indiquant :
Voici un exemple de l’écriture de ces balises :
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="True" name="HandheldFriendly">
<meta content="width=device-width,initial-scale=1,user-scalable=yes" name="viewport">
Cette ligne de code bien simple peut être mise dans le header de vos pages pour lier une icône iPhone ou iPod à votre site dans le cas où l’utilisateur l’ajouterait sur son bureau.
<link href="apple-touch-icon.png" rel="apple-touch-icon">
Une fois le site terminé, vous pouvez implanter un code pour la redirection automatique de celui-ci. Pour vous sauver du temps, je vous conseille de visiter le site Detect Mobile Browsers. Sur ce site, vous aurez accès à différents codes préfaits afin de bien mener à terme votre projet.
Finalement, la clé du succès de votre site mobile réside dans le fait de garder bien en vue que celui-ci se doit d’être léger : des images légères à télécharger, des textes concis priorisant seulement l’information essentielle, un design épuré laissant place au contenu, etc.
Voilà! J’espère que ces quelques conseils vous aideront dans le développement de votre site sur téléphone intelligent. Bonne création de site mobile et, surtout, bon succès!
Copyright © 2010 Nmedia Solutions inc
1.819.477.0990 - Tous droits réservés