TechTip: Adapter un site pour le web mobile
L’accès au web se fait de plus en plus via des appareils portables, or la plupart des sites ont été développés pour un écran d’ordinateur. Difficile de visualiser un site via un écran de poche, le temps de téléchargement pouvant être très long et certaines fonctions incompatibles avec les navigateurs mobiles. Adapter un site et le rendre plus accessible depuis un appareil portable n’a pourtant rien de compliqué.
Concevoir un site pour portables est souvent ardu vu les différentes tailles d’écran ; l’apparence variera en fonction de l’appareil utilisé. La règle d’or est de garder le site mobile aussi simple que possible pour qu’il se télécharge rapidement, même avec une connexion lente. Autrement dit, un minimum de gros fichiers du style photos, ou de fonctions gourmandes en bande passante comme Flash. La solution simple pour obtenir ce genre de site consiste à utiliser une application web pour adapter un site existant.
Mobify.me permet aux propriétaires de site de réaménager leurs pages pour les usagers de portables ayant accès au web. Il fonctionne avec la plupart des appareils de ce type : iPhones, Blackberrys, Palm Pre, Google Android et autres Nokia S60. C’est une application gratuite, mais à laquelle peuvent être adjoints des services supplémentaires payants (jusqu’à 100 dollars par mois).
Ouvrir un compte
Allez sur le site http://mobify.me pour ouvrir un compte avec votre adresse courriel. Une fois connecté, vous verrez s’afficher un aperçu du service. Affichez le guide complet ou la capture d’écran afin de savoir comment adapter votre site. Cliquez sur « close me » pour fermer l’aperçu. Dans l’écran suivant, tapez l’adresse web du site à adapter dans la zone prévue à cet effet et cliquez sur « click here to begin ».
Sélectionner le contenu
Le site à adapter s’affiche, mais sans les contenus en JavaScript et en Flash, que l’application retire automatiquement pour que le site puisse se charger rapidement (vous pourrez restaurer ce contenu plus tard). Avec la souris, sélectionnez les zones de contenu les plus importantes du site. Les parties de texte régulièrement actualisées, par exemple. Les instructions de Mobify.me recommandent d’inclure le champ de recherche, les titres de rubriques, résumés d’articles, coordonnées et médias téléchargeables ou en flux continu, comme les vidéos YouTube ou le mp3. Sélectionnez sur les sections qui feront partie du site mobile. Utilisez Ctrl-Z pour annuler les erreurs et Ctrl+S pour sauvegarder la sélection. Toutes les zones sélectionnées deviennent rouge. Une fois satisfait de votre choix, cliquez sur « Design » ou « Next » pour passer à l’étape suivante.
Design
La partie gauche de l’écran pré-visualise la sélection. Cliquez sur les boutons surplombants pour voir à quoi ressemblera le site sur divers appareils.
À gauche, une fenêtre vous montre le CSS de votre site. Le CSS (feuilles de style en cascade) est un langage qui décrit l’apparence et le format d’un site aux navigateurs Internet. Une certaine connaissance du CSS est utile mais pas indispensable car l’application vous permet de procéder facilement à des changements simples, comme déplacer l’ordre du contenu ou supprimer / ajouter des sections. Clique sur « Manage » ou « next » après l’apport des changements.
Manage
Une nouvelle prévisualisation du site s’affiche à gauche. Vous pouvez immédiatement lancer le site mobile si l’apparence vous plaît, ou apporter d’autres modifications. Des modèles sont mis à votre disposition pour modifier les pages du site source original ou pour ajouter des fonctions analytiques (compter le nombre de visiteurs sur le nouveau site mobile, par exemple).
Launch
Lorsque le site est prêt, cliquez sur « Launch ». L’application vous propose de lancer le nouveau site mobile soit avec le service gratuit de base, soit avec des fonctions supplémentaires (Free Plus, 24,99 dollars par mois), soit avec une mise à niveau Pro. Après avoir fait votre choix (et fourni les données de votre carte de crédit pour les services payants), vous devrez choisir une adresse sur le site de mobify.me ( http://ictupdate.mobify.me, par exemple) afin de voir votre site mobile. L’application génère automatiquement une routine en JavaScript que vous devez ajouter au site source. Cette routine détectera automatiquement les portables et les redirigera vers les affichages mobiles. Enfin, entrez un nom de domaine, ou une adresse web, pour le site mobile. C’est celle que vous communiquerez aux intéressés. Le nom de domaine mobile incorpore généralement l’adresse du site original (ictupdate-mobile.cta.int, par exemple). N’oubliez pas d’inscrire ce nouveau nom dans votre registre de domaines. Appuyez sur « save custom domain » pour mettre le site mobile en ligne.
Bien que cette application adapte un site existant pour qu’il puisse s’afficher sur des portables ayant accès à Internet, le développement d’un site spécifiquement conçu pour le web mobile peut s’avérer utile. Certains contenus conviennent particulièrement bien aux portables, comme les cours des marchés, par exemple. Un site mobile distinct permet aussi de cibler certains utilisateurs en ne leur fournissant que les informations qui les intéressent et en y ajoutant des détails qui n’ont pas lieu d’être sur le site original.
Liens corrélés
Guide détaillé de l’utilisation de mobify.me assorti d’astuces pour adapter le code CSS du site
www.amystoddard.com/blog/article/making-a-mobile-version-of-your-site-wi...
Pour tester la compatibilité d’affichage d’un site sur un appareil portable, voyez la page d’accueil de la Mobile Web Initiative :
www.w3.org/Mobile
Comment créer un site web mobile avec Mobiles in a Box
http://mobiles.tacticaltech.org/Howtocreateamobilewebsite


