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

Merci!

Charles Guimontcguimont@o2web.ca

C. 418-210-3500B. 418-265-6003

Développement avec des CMS