Webmobile Intracom2007

27 mars 2007 – Intracom Montréal

Préparer son site à la
vague du Web mobile
Bonnes pratiques pour bien s'y prendre

Par Denis Boudreau, pour le compte de WebConforme (www.webconforme.com)
Déposé intégralement sous licence Paternité 2.5, Creative Commons
Permalien : http://www.webconforme.com/conferences/2007/03/intracom/

Introduction

Plus qu'une vague de fond, le tsunami du Web
mobile est sur le point de frapper nos côtes. Avec
la prolifération fulgurante des outils d'accès
mobile, la question n'est plus de savoir si l'on doit
rendre son site utilisable sur ces plateformes
émergentes, mais bien de découvrir rapidement
comment y parvenir de la manière la plus
abordable, efficace, efficiente et progressive qui
puisse nous être proposée.


Qui suis-je?

Directeur de WebConforme


Gestion de la qualité technique des sites Web


Bonnes pratiques qualité des services en ligne


Expert invité du ISO SC35-WG


Expert invité du W3C HTML-WG


Directeur d'AccessibilitéWeb


Évaluation et certification de sites Web


Formation et accompagnement des individus



Sommaire de la présentation

Nouveaux contextes d'utilisation


Stratégie et marchés du mobile


Design et architecture informationnelle


Standards du Web mobile


Bonnes pratiques




Le Web a révolutionné la manière dont les gens
accèdent à l'information, mais jusqu'à présent, cette
révolution avait toujours été exclusivement réservée
aux utilisateurs d'ordinateurs.



L'arrivée sur le marché de téléphones portables
capables d'accéder au Web étend jusqu'à trois fois
le bassin d'utilisateurs actuels, de manière à rejoindre
près d'un tiers de la population mondiale.



L'arrivée sur le marché de téléphones portables
capables d'accéder au Web étend jusqu'à trois fois le
bassin d'utilisateurs actuels, de manière à rejoindre
près d'un tiers de la population mondiale.
La vraie révolution du Web est à nos portes et
passera inévitablement par l'adoption du mobile.


Autrement dit...

...l'outil d'échange verbal qu'est le téléphone
portable est en passe de transcender son état
pour devenir un véritable outil de
communications intégrées.


Quelques bénéfices du Web mobile

Libère l'utilisateur des contraintes d'accès typiquement
associées à l'ordinateur ou à une connexion Wifi pour
rendre le Web disponible en tout temps et partout
où se rend la couverture du service.



Libère l'utilisateur des contraintes d'accès typiquement
associées à l'ordinateur ou à une connexion Wifi pour
rendre le Web disponible en tout temps et partout où
se rend la couverture du service.
Étend l'accès global à la connectivité. Un tiers de la
population mondiale a accès à un téléphone portable
capable d'aller sur le Web – c'est deux fois plus que
le nombre d'ordinateurs connectés. On estime que par
2010, c'est une personne sur deux qui aura ainsi
accès (Informa Telecoms & Media).



Permet aux services offerts sur le Web d'intégrer les
fonctionnalités inhérentes aux téléphones portables
comme cliquer sur un numéro de téléphone pour le
composer ou l'ajouter à son carnet d'adresse.



Permet aux services offerts sur le Web d'intégrer les
fonctionnalités inhérentes aux téléphones portables
comme cliquer sur un numéro de téléphone pour le
composer ou l'ajouter à son carnet d'adresse.
Permet de proposer du contenu trié sur le volet ou
adapté en fonction de critères de géolocalisation, ce
qui peut considérablement réduire l'effort de
recherche demandé à l'utilisateur.


Stratégies et marché du mobile


D'entrée de jeu...

...pratiquement tous les téléphones
portables, même les plus bas de gamme, sont
capables d'accéder au Web de nos jours.


D'entrée de jeu...

C'est donc dire que tous ces utilisateurs
peuvent entrer en contact avec les sites
Web dans un contexte de mobilité.


D'entrée de jeu...

Le défi de l'adoption n'est plus une
question technologique, c'est une
question de changements culturels en
lien avec les technologies.


Quelques données sur le Web mobile

Selon l'association canadienne des télécommunications
sans fil (ACTS)...



sans fil (ACTS)...
Fin 2006, le Canada comptait plus de 18,4 millions


d'utilisateurs de téléphones portables.



sans fil (ACTS)...


70 % de la population des grands centres urbains


ont adopté le cellulaire.



sans fil (ACTS)...




Les Canadiens ont échangé plus de 4,3 milliards de


messages textes en 2006 (soit 3x plus qu'en 2005).



sans fil (ACTS)...




Les Canadiens ont échangé plus de 4,3 milliards de


messages textes en 2006 (soit 3x plus qu'en 2005).
En 12/06, c'est 18 millions de messages par jours!




Selon MorganStanley (USA)...



Les États-Unis comptent 211 millions d'internautes


et 177 millions d'utilisateurs de téléphonie portable.





En 2005, 74 milliards de dollars se sont transigés


dans le monde autour de la téléphonie portable et
du Web mobile :







du Web mobile :
55 milliards de dollars pour du SMS/MMS.








du Web mobile :
55 milliards de dollars pour du SMS/MMS.


19 milliards pour des services directs, des


produits et de la personnalisation.


Population mobinaute en plein boum!

Pourcentage d'internautes accédant au Web par le
mobile par rapport au nombre d'abonnés en téléphonie
portable (ComScore, oct. 2006) :
Allemagne : 34 %


Italie : 34%


France : 28 %


Espagne : 26 %


Royaume-Uni : 24 %


États-Unis : 19 %



Population mobinaute en plein boum!

Pourcentage d'internautes accédant au Web par le
mobile par rapport au nombre d'abonnés en téléphonie
portable (ComScore, oct. 2006) :
Allemagne : 34 %


Italie : 34%


France : 28 %


Espagne : 26 %


Royaume-Uni : 24 %


États-Unis : 19 % et Canada... 18,4 %.



Définir sa stratégie face au mobile

Devant l'impact de ces statistiques, il
importe de se questionner avant de
s'engager dans l'aventure et de se définir
une stratégie face au Web mobile...



1. Pourquoi investir dans le développement d'une
plateforme mobile?



plateforme mobile?
2. Quels contenus devrait-on rendre disponibles sous
plateforme mobile?



plateforme mobile?
plateforme mobile?
3. Quels besoins seront désservis par le fait de rendre
du contenu disponible sous plateforme mobile?



plateforme mobile?
plateforme mobile?
4. Quelle sera la valeur ajoutée et l'impact de ce
contenu mobile pour l'ensemble de nos clients?



plateforme mobile?
plateforme mobile?
4. Quelle sera la valeur ajoutée et l'impact de ce
contenu mobile pour l'ensemble de nos clients?

Mais laissons les questions de stratégie aux stratèges!


Design et architecture informationelle


Les trois C du Web mobile...

Coûts : Il est très important de développer ses


applications pour le Web mobile de
manière responsable... car chaque kilo-
octets de téléchargement compte.





Contenus : Plus encore que sur le Web traditionnel,


les problématiques liées à la navigation,
la taille des images et le poids des pages
doivent être considérées.





Contenus : Plus encore que sur le Web traditionnel,


les problématiques liées à la navigation,
la taille des images et le poids des pages
doivent être considérées.
Contexte : Comment les contenus offerts aident-ils


les internautes mobiles? Viennent-ils
supporter leur réalité du moment? Dans
quel contexte utiliseront-ils ces contenus
(avion, train, etc.)?


En un mot... ou 23!

Sur le Web mobile, encore plus que sur le
Web traditionnel, il est absolument crucial de
mettre l'utilisateur au centre du
développement informatique.


À l'aube d'une révolution

Nous sommes à l'aube d'une nouvelle
génération de Web... et on ne parle pas ici
de l'ultragonflé Web 2.0.


À l'aube d'une révolution

On parle d'un Web réellement contextuel.


Architecture d'information mobile

Chaque liaison obtenue compte et se traduit par un
montant sur la facture mensuelle. Il importe de bien
planifier son architecture informationnelle.



Plus encore que sur le Web “traditionnel”, l'internaute
fonctionne en mode d'urgence... il faut le guider très
rapidement et efficacement vers ses objectifs.



Construire l'architecture d'un site mobile comme on
conçoit une architecture d'information pour un service
de réception téléphonique automatisé :



en faisant des regroupements simples et intuitifs;




en faisant des regroupements simples et intuitifs;


et en utilisant des libellés clairs et significatifs.



Quelques recommandations...

Limiter les catégories, thèmes ou sections offertes car
la désorientation des webinautes augmente avec la
profondeur à laquelle les entraîne la navigation.



Limiter les liens offerts par page à 10 et numéroter
ceux-ci dans une liste à puce ordonnée, auxquels
seront associés des accesskeys (0 à 9).



Proposer un mimimum de contenu au bout de chaque
lien, quitte à ce que ce soit uniquement un préambule
ou un résumé du contenu qui les attends plus loin.



Proposer un mimimum de contenu au bout de chaque
lien, quitte à ce que ce soit uniquement un préambule
ou un résumé du contenu qui les attends plus loin.
Prioriser l'ordre d'affichage des liens en fonction de
l'intérêt qu'ils présentent ou de leur popularité, tout en
adaptant la navigation pour créer un bon clickstream.


Designer pour le Web mobile

Sur le Web “traditionnel”, la question du support des
résolution d'écran est plutôt simple... avec 13 % des
internautes sous une résolution de 800x600 et 53 %
sous une résolution de 1024x768, on doit composer
avec deux choix majeurs (TheCounter, mars 2007).



Sur le Web “traditionnel”, la question du support des
résolution d'écran est plutôt simple... avec 13 % des
internautes sous une résolution de 800x600 et 53 %
sous une résolution de 1024x768, on doit composer
avec deux choix majeurs (TheCounter, mars 2007).
Sur le Web mobile, la multiplicité des tailles d'interface
et des particularités propres aux appareils rend le tout
beaucoup plus problématique... créant un éventail de
possibilités entre 128 et 320 pixels.



D'où l'importance fondamentale
d'appliquer des standards et respecter
un ensemble de bonnes pratiques
visant à optimiser l'expérience utilisateur.



Sans compter que sur le mobile, certains
écrans sont orientés dans un sens comme
dans l'autre, et que les contenus sont
destinés à être consommés avec ou sans
clavier et/ou souris (stilet).


Mouvement de complexité volontaire

© BlueFlavor, Brian Fling
SxSW2007 - Mobile web conference


Et si on parlait un peu technique?

Alors concrètement,
comment fait-on?


Standards du Web mobile


Industrialisation du Web

Il existe plusieurs inteprétations pour définir ce que
sont les standards du Web. La tendance est à l'abus du
terme, ce qui créée une confusion en regard à la
véritable signification.



sont les standards du Web. La tendance est à l'abus du
terme, ce qui créée une confusion en regard à la
Un standard (comme par exemple, un standard issu


du W3C) réfère à un document normatif expliquant
comment un langage ou une technologie fonctionne.



sont les standards du Web. La tendance est à l'abus
du terme, ce qui créée une confusion en regard à la


Un standard peut également décrire un ensemble


de techniques ou recommandations mises en place
pour en assurer l'implémentation. On parle alors de
bonnes pratiques.



sont les standards du Web. La tendance est à l'abus
du terme, ce qui créée une confusion en regard à la


Un standard peut également décrire un ensemble de


techniques ou recommandations mises en place
pour en assurer l'implémentation. On parle alors de
bonnes pratiques.
De tels standards pour le Web mobile existent depuis
la fin des années 90 et évoluent sans cesse.

Les principaux standards...

Wireless Application Protocol (WAP)
Premier ensemble de standards développé pour le Web
mobile couvrant le format de balisage (WML) et les
protocoles utilisés pour s'en servir (WTP, WTLS, etc.).



protocoles utilisés pour s'en servir (WTP, WTLS, etc.).
Il existe deux versions de WAP, 1.0 et 2.0 :



protocoles utilisés pour s'en servir (WTP, WTLS, etc.)
WAP 1.0 a été le standard dominant des années 90


et pratiquement tous les fournisseurs de contenus
et les appareils sur le marché le supportent encore.



protocoles utilisés pour s'en servir (WTP, WTLS, etc.)
WAP 1.0 a été le standard dominant des années 90


et pratiquement tous les fournisseurs de contenus
et les appareils sur le marché le supportent encore.
WAP 2.0 est la version actuelle et tente de


rapprocher les appareils mobiles des appareils
traditionnels en appliquant plutôt le support des
protocoles TCP/IP et HTTP et du langage XHTML-MP.



Wireless Markup Language (WML)
Langage principal de développement de WAP 1.x, WML
est un langage basé sur XML rappelant fort HTML.



<xml version=“1.0”?>
<!DOCTYPE wml PUBLIC “-//PHONE.COM/DTD WML 1.1//EN”
“http://www.phone.com/dtd/wml11.dtd”>
<wml>
<card id=“principal” title=“carte01”>
<p>Bonjour!</p>
</card>
</wml>



<xml version=“1.0”?>
<!DOCTYPE wml PUBLIC “-//PHONE.COM/DTD WML 1.1//EN”
“http://www.phone.com/dtd/wml11.dtd”>
<wml>
<card id=“principal” title=“carte01”>
<p>Bonjour!</p>
</card>
</wml>

Avec l'arrivée de XHTML-MP, WML a perdu beaucoup
de son intérêt mais continue d'être supporté et même
recommandé comme solution de repli.


XHTML Mobile Profile / XHTML Basic
XHTML-MP est une spécialisation du langage XHTML
destinée à incorporer des éléments au contexte
d'utilisation des appareils mobiles.



Développé intialement par OMA (Open Mobile Alliance)
à partir du standard XHTML Basic du W3C, la version
1.2 de XHTML-MP est pratiquement indistinguable de
la version 1.1 de XHTML Basic.



Développé intialement par OMA (Open Mobile Alliance)
à partir du standard XHTML Basic du W3C, la version
1.2 de XHTML-MP est pratiquement indistinguable de
la version 1.1 de XHTML Basic.
Tout programmeur maîtrisant les subtilités du langage
XHTML peut développer dès maintenant pour le mobile
sans besoins logiciels particuliers (certaines conditions
s'appliquent).



Wireless CSS
XHTML-MP, comme XHTML, est conçu pour permettre
la séparation entre le balisage et sa présentation.



Wireless CSS
WCSS est un sous-ensemble de la version du W3C
développée par OMA et fait aussi partie de WAP 2.0.



Wireless CSS
Son implémentation dans les sites mobiles est du
même ordre que l'implémentation normale de CSS via
l'utilisation de l'élément HTML <link>.



Wireless CSS
Son implémentation dans les sites mobiles est du
même ordre que l'implémentation normale de CSS via
l'utilisation de l'élément HTML <link>.
Le support de WCSS est décent, mais pas toujours
optimal – OMA et W3C travaillent actuellement sur
CSS-MP qui réduira les écarts entre les standards.


Le grand avantage des standards

Utiliser les techniques de développement basées sur
les standards impliquent la conception de sites
exploitant à fond les technologies (x)HTML et CSS.



Cela signifie également abandonner l'utilisation des
tableaux de mise en page au profit du positionnement
par feuille de style.



En opérant une séparation nette entre la présentation
et la structure des documents web, ceux-ci deviennent
plus aptes à la transformation élégante et peuvent
ainsi passer dans d'autres contextes de navigation.



En opérant une séparation nette entre la présentation
et la structure des documents web, ceux-ci deviennent
plus aptes à la transformation élégante et peuvent
ainsi passer dans d'autres contextes de navigation.
C'est ainsi que du jour au lendemain, tous peuvent
commencer à développer leurs sites pour qu'ils soient
minimalement accessibles sur le mobile.

Bénéfices collatéraux des standards

Mis à part la portabilité vers les plateformes mobiles,
les standards dans le développement Web entraînent
toute une série de bénéfices alléchants, dont :




Des pages plus légères entraînant des réductions


significatives en terme de bande passante






Des temps de téléchargement proportionnellement


plus courts entraînant moins d'attente








Une optimisation de base pour les moteurs de


recherche et un niveau d'accessibilité minimal








Une optimisation de base pour les moteurs de


recherche et un niveau d'accessibilité minimal
Coûts d'exploitation réduits et des transferts de


connaissance plus faciles à gérer.


En somme...

Adopter les standards du W3C permet le
développement de sites capables de
franchir toutes les barrières
technologiques connues, tout en
optimisant à la fois le produit final et les
étapes de son développement.


Bonnes pratiques W3C du Web mobile


Les meilleurs pratiques du Web mobile

Les bonnes pratiques recommandées ont été
développées par le groupe de travail des Meilleures
Pratiques du Web Mobile (MWI Best Practices WG).



Le document contient 60 meilleures pratiques
regroupées sous 10 règles et est actuellement à l'état
de “proposed recommendation” ce qui veut dire que
c'est presque déjà un standard.



Il est inspiré de nombreuses sources dont le standard
WCAG 1.0 (Web content Accessibility Guidelines).



Il est inspiré de nombreuses sources dont le standard
WCAG 1.0 (Web content Accessibility Guidelines).
Le document présente une série de conseils de base
pour assurer que tout site Web qui respecte ces
exigences puisse fonctionner sur les appareils mobiles.



Règle #1
Concevez des pages pour un seul Web (One Web)
Proposer une expérience utilisateur cohérente,


peu importe l'appareil utilisé par l'internaute
Utiliser chaque appareil au maximum de son


potentiel, tout en palliant à leurs déficiences
Testez sur des émulateurs, mais aussi sur des


appareils réels.



Règle #2
Basez-vous sur les standards du Web
Utiliser du langage XHTML-MP valide avec les


bonnes déclarations d'encodage.
Utiliser CSS pour assurer l'aspect visuel, du


balisage pour les éléments de structure et la
sémantique des pages.
Veiller à ce que même les messages d'erreurs


soient adaptés à la réalité des appareils mobiles.



Règle #3
Évitez les mises en page par tableau, les cadres et les
gifs transparents d'espacement.
Utiliser CSS pour tout aspect de mise en page et


reléguer les tableaux aux données tabulaires.
Ne pas utiliser de cadres (frameset) et leur


privilégier l'usage de d'autres technologies.
Ne pas utiliser d'images invisibles pour assurer


le calage des éléments de la page.
Ne pas utiliser d'images cliquables (image


maps) ou de fenêtres surgissantes (pop-ups)



Règle #4
Utilisez, sans vous appuyer exclusivement sur...
Les témoins (cookies)


les tableaux


les scripts


les feuilles de style


et les effets de police de caractères.




Règle #5
Optimisez la navigation
Fournir une navigation cohérente mais minimale


en haut de page
Utiliser des intitulés de liens explicites, avec des


raccourcis (accesskey) pour les plus importants
Choisir une adresse facile à saisir pour l'accueil


Ne pas surcharger les pages de liens, mais voir


à ce que chaque page du site soit tout de même
accessible facilement.



Règle #6
Vérifiez les images et les couleurs
Envoyer les images dans une résolution adaptée


à la taille de l'écran, et déclarer leur taille dans
le code source
Donner un équivalent textuel pertinent aux


images
Assurer que les couleurs utilisées ne nuisent pas


à la lisibilité du contenu
Utiliser des mesures relatives pour laisser le


contenu s'adapter à l'écran.



Règle #7
Favorisez la légèreté
Optimiser la taille du code et des feuilles de


style et se maintenir dans la limite de mémoire
des appareils
Éviter d'avoir besoin de faire défiler le contenu


dans deux directions.
Viser des pages qui, une fois complètement


affichées, ne totalisent pas plus de 20 ko.



Règle #8
Utiliser le réseau à bon escient
Éviter les rafraîchissements de pages


automatiques et les redirections HTML
Limiter le nombre des images, objets, scripts et


fichiers CSS employés dans les pages
Assurer que le contenu peut être mis en cache


pour éviter les récupérations inutiles.



Règle #9
Aider et guider la saisie de texte par l'utilisateur
Utiliser des contrôles de formulaires demandant


le moins de saisie de texte possible et fournir
des valeurs par défaut lorsque c'est possible
Mettre des libellés dans les contrôles de


formulaires et indiquez le mode de saisie de
caractères supposé (par exemple, lettres ou
chiffres).



Règle #10
Songez aux utilisateurs en contexte de mobilité
Garder le titre de la page court et utile


Préférer un langage simple et direct at adapter


le contenu au contexte
Choisir des pages courtes, ciblées et adaptées


aux utilisateurs en situation de mobilité.


Merci de votre attention!


Références webographiques

Blue Flavor, Brian Fling
http://www.blueflavor.com/


http://www.blueflavor.com/presentations/SXSW2007-mobile.pdf


http://pc.dev.mobi/files/dotMobi%20Mobile%20Web%20Develope


rs%20Guide.pdf

W3C, Cedric Kiss
http://www.w3.org/2007/02/mwibp-webinar-fr/



Questions, commentaires?

Pour toutes questions en lien avec cette
présentation ou tout autre sujet touchant aux
standards Web, n'hésitez pas à me contacter à :
comprendre@webconforme.com
ou au
(514) 448-2650


Webmobile Intracom2007

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (14)

Similaire à Webmobile Intracom2007

Similaire à Webmobile Intracom2007 (20)

Webmobile Intracom2007