Buts et logistique (1/2)
Buts de cette session
- comprendre ce que signifie envoyer du contenu Web sur des appareils mobiles ;
- savoir ce qu'il faut prendre en compte en développant du contenu mobile ;
- apprendre comment mettre ces idées en pratique.
Buts et logistique (2/2)
Logistique
- posez des questions ;
- notez le numéro de la diapositive pour en obtenir des clarifications ;
- utilisez le channel IRC
#webinar (interface Web).
Déroulement
- Pourquoi a-t-on besoin des « Meilleures pratiques »
- Vue d'ensemble des Meilleures pratiques
- Immersion dans les Meilleures pratiques
- Mise en application
- À l'horizon : « mobileOK »
Pourquoi a-t-on besoin des « Meilleures pratiques » (1/4)
Pourquoi a-t-on besoin des « Meilleures pratiques » (2/4)
Qu'est-ce qui est si différent ?
- petit écran ;
- entrée de contenu limitée ;
- prix et vitesse de l'accès au réseau ;
- grande diversité d'appareils et de navigateurs.
Pourquoi a-t-on besoin des « Meilleures pratiques » (3/4)
Qu'est-ce qui est si différent ?
- beaucoup plus personnel ;
- toujours allumé et toujours connecté ;
- toujours disponible en cas de besoin ;
- moins cher ; beaucoup plus répandu.
Pourquoi a-t-on besoin des « Meilleures pratiques » (4/4)
Un tel document est nécessaire pour :
- expliquer les pièges à éviter ;
- mettre en avant les avantages de la mobilité ;
- initier une prise de conscience chez les développeurs Web.
Le Web sur les appareils mobiles est trop important pour être ignoré.
Déroulement
- Pourquoi a-t-on besoin des « Meilleures pratiques »
- Vue d'ensemble des Meilleures pratiques
- Immersion dans les Meilleures pratiques
- Mise en application
- À l'horizon : « mobileOK »
Vue d'ensemble des Meilleures pratiques (1/5)
Document Mobile Web Best Practices 1.0, conseils de base (page en anglais) :
- développé par le groupe de travail des Meilleures Pratiques du Web Mobile (MWI Best Practices Working Group) ;
- « Proposed Recommendation » (presque un standard) ;
- contient 60 Meilleures Pratiques ;
- inspiré de nombreuses sources, dont les Conseils d'Accessibilité du W3C (« W3C Accessibility Guidelines ») ;
- principes de base pour faire fonctionner correctement votre site sur les appareils mobiles.
Vue d'ensemble des Meilleures pratiques (2/5)
Servir du contenu aux appareils mobiles
Les Meilleures Pratiques s'appliquent au contenu transmis.
Vue d'ensemble des Meilleures pratiques (3/5)
Appareil de base (« baseline device »)
(Source : RusselBeattie.com)
Vue d'ensemble des Meilleures pratiques (4/5)
Contexte de transmission par défaut (« Default Delivery Context »)
Vue d'ensemble des Meilleures pratiques (5/5)
Contexte de transmission par défaut (« Default Delivery Context »)
- un instantané, qui sera revu dans le temps ;
- meilleure expérience avec une approche appareil par appareil.
Déroulement
- Pourquoi a-t-on besoin des « Meilleures pratiques »
- Vue d'ensemble des Meilleures pratiques
- Immersion dans les Meilleures pratiques
- Mise en application
- À l'horizon : « mobileOK »
Immersion dans les Meilleures pratiques (1/14)
Principes généraux
60 Meilleures pratiques qui peuvent être catégorisées selon les idées suivantes :
- Concevez vos pages pour Un seul Web (One Web) ;
- Basez-vous sur les standards du Web ;
- Pas de frames, de mise en page tabulaire, de GIF d'espacement ;
- Ne vous appuyez pas exclusivement sur les cookies, les scripts, les effets visuels ;
- Optimisez la navigation ;
- Vérifiez les images et les couleurs ;
- Plus c'est petit, mieux c'est ;
- Utilisez le réseau à bon escient ;
- Aidez et guidez l'entrée de texte de l'utilisateur ;
- Pensez aux utilisateurs en situation de mobilité.
Immersion dans les Meilleures pratiques (2/14)
Concevez vos pages pour Un seul Web (One Web)
- Proposez une expérience utilisateur cohérente, peu importe l'appareil utilisé ;
- Utilisez chaque appareil à son maximum, tout en palliant à leurs déficiences ;
- Testez sur des appareils réels.
Immersion dans les Meilleures pratiques (3/14)
Basez-vous sur les standards du Web
Une bonne page Web mobile est une page Web qui :
- utilise du langage XHTML Basic valide, avec les bonnes déclarations d'encodage ;
- utilise du CSS pour le style, du markup pour la structure et la sémantique de la page ;
- se soucie de ce que même les possibles messages d'erreur soient adaptés aux appareils mobiles.
Immersion dans les Meilleures pratiques (4/14)
Dites…
- Non aux « frames » ;
- Non aux tables pour le positionnement ;
- Non aux GIF d'espacement ;
- Non aux fenêtres pop-ups ;
- Non aux « image maps ».
Immersion dans les Meilleures pratiques (5/14)
Mise en page utilisant des tableaux
(fausse copie d'un site d'annuaire sur un téléphone sophistiqué)
Immersion dans les Meilleures pratiques (6/14)
Utilisez, mais ne vous appuyez pas exclusivement sur…
- les cookies avec précaution ;
- les tableaux avec précaution ;
- les scripts avec précaution ;
- le style (CSS) avec précaution ;
- les effets de polices de caractères avec précaution.
Immersion dans les Meilleures pratiques (7/14)
Optimisez la navigation
- Fournissez une navigation cohérente mais minimale en haut de page ;
- Utilisez des intitulés de liens explicites, avec des raccourcis (« accesskey ») pour les plus importants ;
- Choisissez une adresse facile a taper pour votre page d'accueil ;
- Ne mettez pas trop de liens dans vos pages, mais assurez-vous que chaque page de votre site est accessible facilement.
Immersion dans les Meilleures pratiques (8/14)
Vérifiez les images et les couleurs
- Envoyez les images dans une résolution adaptée à la taille de l'écran, et déclarez leur taille dans le code source ;
- Donnez un équivalent texte à vos images ;
- Assurez-vous que les couleurs utilisées ne nuisent pas à la lisibilité ;
- Utilisez des mesures relatives pour laisser le contenu s'adapter à l'écran.
Immersion dans les Meilleures pratiques (9/14)
Exemple
→
Immersion dans les Meilleures pratiques (10/14)
Plus petit c'est, mieux c'est
- Optimisez la taille du code et du style CSS, et maintenez-la dans la limite de mémoire de l'appareil ;
- Évitez d'avoir besoin de faire défiler le contenu dans deux directions.
Immersion dans les Meilleures pratiques (11/14)
Utilisez le réseau à bon escient
Coût et temps d'utilisation de quelques ressources externes typiques
| Site | Langage de code | Images | Stylesheets | Coût | Temps |
|---|
| Blog de Dominique Hazaël-Massieux | 10 Ko | 1 → 1,6 Ko | 1 CSS → 4 Ko | 0,15 € | 4,5 secondes par GPRS |
|---|
| CNN.com | 100 Ko | 115 → 300 Ko | 2 CSS → 90 Ko (!) | ~5 € | 2 minutes par GPRS
dont 1 minute de latence |
|---|
- Évitez les rafraîchissements de pages automatiques, et les redirections HTML ;
- Limitez le nombre des images, objets, scripts et fichiers CSS ;
- Assurez-vous que votre contenu peut être mis en cache.
Immersion dans les Meilleures pratiques (12/14)
Aidez et guidez l'entrée de texte de l'utilisateur
- Utilisez des contrôles de formulaires demandant le moins de saisie de texte possible, et fournissez des valeurs par défaut lorsque c'est possible ;
- Mettez des labels dans les contrôles de formulaires, et indiquez le mode de saisie de caractères supposé (par exemple, lettres ou chiffres).
Immersion dans les Meilleures pratiques (13/14)
Pensez aux utilisateurs en situation de mobilité
- Gardez le titre de la page court et utile ;
- Préférez un langage simple et direct ; mettez en avant le sens central de la page ;
- Choisissez des pages courtes et ciblées, adaptées aux utilisateurs en situation de mobilité.
Immersion dans les Meilleures pratiques (14/14)
Soyez créatifs !
Les hommes ont construit avec le plus de noblesse lorsque leurs limites étaient les plus grandes. — Frank Lloyd Wright
Déroulement
- Pourquoi a-t-on besoin des « Meilleures pratiques »
- Vue d'ensemble des Meilleures pratiques
- Immersion dans les Meilleures pratiques
- Mise en application
- À l'horizon : « mobileOK »
Mise en application (1/3)
Le vérificateur des Meilleures pratiques du Web mobile
Comment puis-je savoir ce qu'il est possible de faire pour mon site ?
→ Mobile Web Best Practices checker (exemple), en anglais
Mise en application (2/3)
Techniques d'implémentation
Mise en application (3/3)
Trouver le bon outil
Déroulement
- Pourquoi a-t-on besoin des « Meilleures pratiques »
- Vue d'ensemble des Meilleures pratiques
- Immersion dans les Meilleures pratiques
- Mise en application
- À l'horizon : « mobileOK »
À l'horizon : « mobileOK » (1/2)
- comment communiquer que j'ai pris le temps de rendre mon site adapté à l'usage des appareils mobiles ?
- comment savoir si un site donné a été développé également pour les appareils mobiles ?
→ le label mobileOK :
- définit des tests qu'une page doit réussir ;
- un système de labels automatiquement lisibles, pour le dire.
(travail en cours)
À l'horizon : « mobileOK » (2/2)
mobileOK Basic
- Testable automatiquement, minimum requis pour créer un site utilisable sur des appareils mobiles ;
- Second « draft » (brouillon) publié le mois dernier : vos commentaires sont les bienvenus ;
- Est-ce trop difficile, ou trop facile ?
Plus d'informations
Présentateur : Cédric Kiss <cedric@w3.org>
Contact pour BPWG : Dominique Hazaël-Massieux <dom@w3.org>
Ressources utiles (liens en anglais) :
