WEB MOBILEWeb Éducation
Québec, le 24 mars 2011
1. Comment construire un site Web mobile
2. Technologies disponibles
3. Intégration dans un CMS
Ordre de la présentation
Comment construire un site Web mobile
• Mobilize• Adaptation• Création d’une version web mobile• Création d’une application mobile
Introduction
1. Adaptation
Consiste à adapter ce qu’on a présentement• Styles• Navigation• Cacher du contenu• Handheld.css (sauf iPhone)
SOLUTION FACILE, RAPIDE, MAIS PEU EFFICACE
Adaptation
1. Adaptation
Avantages• Pas cher• Rapide ( à programmer )
Mieux que rien
Adaptation
1. Adaptation
Désavantages• Lent pour l’usager• Difficile à naviguer• Contenus non adaptés• Ergonomie non adaptée
Adaptation
2. Création d’une version web mobile
Standards Web mobileWAPHTML 4HTML 5Flash
Création d’une version mobile
Wap
Création d’une version mobile
HTML 4 VS HTML 5
Création d’une version mobile
HTML 5 VS FLASH
Création d’une version mobile
Avantages ( HTML 5 )• Standard aux différents appareils mobiles• ***Devrait donner le même résultat• Langage très puissant• Possibilité d’intéragir avec les appareils mobiles• Possibilité de créer une application mobile à
partir du HTML 5• Possibilité de stocker de l’information sur
l’appareil
Création d’une version mobile
Problèmes contenus• Interaction avec l’usager est limitée• La taille de l’écran est limitée• Les comportements sont différents• Le poids des contenus est important• Adapter les multimédias ( photos, vidéos )…
Pour avoir un bon site mobile, il faut complètement refaire le site
Création d’une version mobile
Solutions contenus• Définir les contenus nécessaires au mobile• Repenser à la navigation (arborescence)• Implanter un moteur de recherche?• Utiliser les fonctionalités des téléphones intelligents?
- Géolocalisation- Stockage- Accéléromètres & Gyroscope
• Contenus géolocalisés?• Penser au poids Bref! Soyez créatifs!
Création d’une version mobile
Interaction Site mobile vs Site internet• Nomdedomaine.mobi?• nomdedomaine.com/mobile• Sur les pages, avoir une redirection automatique
vers la bonne version avec les entêtes• Possibilité de changer manuellement de version
Création d’une version mobile
Référencement mobile ( SEO )• Indexeur différent• Simule différentes versions de cellulaire• Plan du site différent ( sitemap mobile )• Les règles de référencement standard
s’appliquent • ** Attention à la duplication des contenus
Création d’une version mobile
Application Mobile ( Application native )• Travaille avec le coeur du cellulaire• Plus de fonctionalités que les sites web• Plus rapide qu’un site Internet
Création d’une application mobile
Désavantages
Création d’une application mobile
Désavantages• Coûteux à développer et maintenir• Non compatible entre les plateformes cellulaires• Non reférencé• L’usager doit installer l’application
Création d’une application mobile
Questions à se poser avant?• Est-ce que les contenus seront les mêmes?• Est-ce que l’arborescence sera la même?• Langues?• Clientèles?• Besoins?
Bref, faire la même réflexion stratégique que pour un site!Soyez stratégique!
Développement avec des CMS
Comment implanter?• Modules• Coeur• Implanter un module d’auto-détection • Arborescence et thèmes• Possibilité de reprendre les contenus existants
Développement avec des CMS
Trucs!• Tester votre mobile avec W3 validator!• Essayez plusieurs versions avec des émulateurs• Penser au mobile lors de la refonte d’un site
principal! • Penser à l’usager, essayer de le reconnaître!• Profitez en!
Et encore une fois, soyez créatif!
Développement avec des CMS
