22
WEB MOBILE Web Éducation Québec, le 24 mars 2011

Web Mobile

Embed Size (px)

DESCRIPTION

Web Mobile. Web Éducation. Québec, le 24 mars 2011. Ordre de la présentation. Comment construire un site Web mobile 2. Technologies disponibles Intégration dans un CMS. Introduction. Comment construire un site Web mobile Mobilize Adaptation Création d’une version web mobile - PowerPoint PPT Presentation

Citation preview

Page 1: Web Mobile

WEB MOBILEWeb Éducation

Québec, le 24 mars 2011

Page 2: Web Mobile

1. Comment construire un site Web mobile

2. Technologies disponibles

3. Intégration dans un CMS

Ordre de la présentation

Page 3: Web Mobile

Comment construire un site Web mobile

• Mobilize• Adaptation• Création d’une version web mobile• Création d’une application mobile

Introduction

Page 4: Web Mobile

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

Page 5: Web Mobile

1. Adaptation

Avantages• Pas cher• Rapide ( à programmer )

Mieux que rien

Adaptation

Page 6: Web Mobile

1. Adaptation

Désavantages• Lent pour l’usager• Difficile à naviguer• Contenus non adaptés• Ergonomie non adaptée

Adaptation

Page 7: Web Mobile

2. Création d’une version web mobile

Standards Web mobileWAPHTML 4HTML 5Flash

Création d’une version mobile

Page 8: Web Mobile

Wap

Création d’une version mobile

Page 9: Web Mobile

HTML 4 VS HTML 5

Création d’une version mobile

Page 10: Web Mobile

HTML 5 VS FLASH

Création d’une version mobile

Page 11: Web 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

Page 12: Web 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

Page 13: Web 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

Page 14: Web 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

Page 15: Web 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

Page 16: Web 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

Page 17: Web Mobile

Désavantages

Création d’une application mobile

Page 18: Web 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

Page 19: Web 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

Page 20: Web Mobile

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

Page 21: Web Mobile

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

Page 22: Web Mobile

Merci!

Charles [email protected]

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

Développement avec des CMS