Créer pour un seul Web
Créer du contenu qui fonctionne sur un maximum de terminaux peut permettre de réduire les coûts, d'améliorer la flexibilité et de répondre aux besoins du plus grand nombre.
The Web on the Move
Ces flipcards sur les Bonnes Pratiques du Web Mobile résument le standard W3C Mobile Web Best Practices 1.0. Les flipcards sont conçues comme un pense-bête ludique des soixantes bonnes pratiques définies plus en détails dans la spécification.
La version originale est en anglais. Ces flipcards sont également disponibles en : allemand, chinois, coréen, espagnol, et suédois.
"Mobile Web Best Practices 1.0" est un standard Web du W3C qui facilite la création et la diffusion de contenu aisément lisible sur les terminaux mobiles. Les présentes fiches regroupent les points essentiels de ce document sous 10 thèmes. En suivant ces consignes, les créateurs de contenu élargiront leur public, créeront des sites et des applications Web efficaces et faciliteront la navigation sur le Web à partir de nombreux terminaux mobiles.
Pour plus d'informations : http://www.w3.org/TR/mobile-bp/
Créer du contenu qui fonctionne sur un maximum de terminaux peut permettre de réduire les coûts, d'améliorer la flexibilité et de répondre aux besoins du plus grand nombre.
THEMATIC CONSISTENCY:Faire en sorte que le contenu accessible via une URI à partir de différents terminaux procure une expérience thématique cohérente.
CAPABILITIES:Exploiter les capacités des terminaux pour contourner les implémentations défectueuses
DEFICIENCIES:Faire le nécessaire pour améliorer les implémentations défectueuses.
TESTING:Effectuer des tests sur des terminaux réels et sur des émulateurs.
Dans le marché extrêmement fragmenté des terminaux et des navigateurs, les standards sont la meilleure garantie d'interopérabilité.
VALID MARKUP: Créer des documents conformes aux grammaires formelles publiées.
CONTENT FORMAT SUPPORT: Envoyer le contenu dans un format que l'on sait être pris en charge par le terminal.
CONTENT FORMAT PREFERRED: Dans la mesure du possible, envoyer le contenu dans un format préféré.
CHARACTER ENCODING SUPPORT: Utiliser un encodage de caractère pris en charge par le terminal ciblé.
CHARACTER ENCODING USE: Indiquer dans la réponse l'encodage de caractères utilisé.
STYLE SHEETS USE: Utiliser des feuilles de style pour contrôler la disposition et la présentation, sauf si le terminal ne les prend pas en charge.
STRUCTURE: Définir la structure logique du document en utilisant les fonctions adéquates.
ERROR MESSAGES: Fournir des messages d'erreur informatifs et un moyen de passer d'un message d'erreur à des informations utiles.
Une conception soignée peut permettre de limiter les problèmes liés à la petite taille des claviers et des écrans, ainsi qu'à d'autres caractéristiques des terminaux mobiles.
POP UPS:Proscrire l'affichage de pop ups ou autres fenêtres et ne pas modifier la fenêtre en cours sans en informer l'utilisateur.
TABLES NESTED:Ne pas utiliser de tableaux imbriqués.
TABLES LAYOUT:Ne pas utiliser de tableaux à des fins de présentations.
GRAPHICS FOR SPACING:Ne pas utiliser de graphiques pour l'espacement.
NO FRAMES:Ne pas utiliser de cadres.
IMAGE MAPS:Ne pas utiliser de mappes d'images, sauf si le terminal les prend en charge.
Lorsque vous choisissez une technologie Web, tenez compte de la diversité des capacités des terminaux mobiles.
COOKIES:Ne pas compter sur la disponibilité des cookies.
OBJECT OR SCRIPT:Ne pas compter sur les objets ou les scripts intégrés.
TABLES SUPPORT:Ne pas utiliser de tableaux, sauf si le terminal les prend en charge.
TABLES ALTERNATIVES:Dans la mesure du possible, ne pas faire appel à la présentation tabulaire.
STYLE SHEETS SUPPORT:Organiser les documents de sorte qu'ils puissent être lus sans feuille de style, si nécessaire.
FONTS:Ne pas compter sur la prise en charge des effets de style liés aux polices.
USE OF COLORS:S'assurer que les informations transmises par les couleurs le sont également lorsque les couleurs sont absentes.
Les images, couleurs et styles mettent le contenu en valeur, mais doivent être utilisés avec précaution car certains terminaux disposent d'écrans à faible contraste ou ne prennent pas en charge tous les formats.
IMAGES RESIZING:Redimensionner les images à taille intrinsèque sur le serveur.
LARGE GRAPHICS:Ne pas utiliser d'images que le terminal ne pourra pas afficher. Eviter les images haute résolution, sauf si cela entraîne une perte d'informations importantes.
IMAGES SPECIFY SIZE:Indiquer la taille des images dans le balisage, si leur taille est intrinsèque.
NON-TEXT ALTERNATIVES:Pour tout élément non textuel, fournir un équivalent textuel.
COLOR CONTRAST:S'assurer que les combinaisons de couleurs d'avant-plan et d'arrière-plan offrent un contraste suffisant.
BACKGROUND IMAGE READABILITY:Lorsque des images d'arrière-plan sont utilisées, s'assurer que le contenu reste lisible sur le terminal.
MEASURES:Ne pas utiliser de mesures en pixels ni d'unités absolues dans les valeurs d'attribut du langage de balisage et les valeurs de propriété des feuilles de style.
Les sites de petite taille satisfont les utilisateurs car ils sont moins coûteux en temps et en argent.
MINIMIZE:Utiliser un balisage succinct et efficace.
PAGE SIZE LIMIT:S'assurer que la taille des pages tient compte des limitations du terminal en terme de mémoire.
STYLE SHEETS SIZE:Utiliser des feuilles de style de petite taille.
SCROLLING:Dans la mesure du possible, limiter le défilement à une seule direction.
Les fonctions des protocoles Web peuvent limiter l'impact des goulots d'étranglement et des temps d'attente réseau, améliorant ainsi l'expérience utilisateur.
AUTO REFRESH:Ne pas créer de pages qui s'actualisent automatiquement, sauf si l'utilisateur est informé et dispose d'une solution de rechange.
REDIRECTION:Ne pas utiliser de balisage permettant de rediriger les pages automatiquement. Il est préférable de configurer le serveur pour qu'il effectue les redirections via des codes HTTP 3xx.
EXTERNAL RESOURCES:Utiliser un nombre minimal de ressources externes liées.
CACHING:Fournir les informations de mise en cache dans les réponses HTTP.
L'utilisation des claviers et des autres dispositifs de saisie des terminaux mobiles peut être fastidieuse ; une conception efficace peut permettre de les minimiser.
MINIMIZE KEYSTROKES:Limiter les frappes au maximum.
AVOID FREE TEXT:Dans la mesure du possible, éviter les entrées de texte libre.
PROVIDE DEFAULTS:Dans la mesure du possible, fournir des valeurs par défaut présélectionnées.
DEFAULT INPUT MODE:Spécifier un mode d'entrée de texte, une langue et/ou un format d'entrée par défaut, si le terminal cible le prend en charge.
TAB ORDER:Ordonner logiquement les liens, les contrôles et les objets.
CONTROL LABELLING:Utiliser des intitulés de contrôle appropriés et les associer explicitement aux contrôles.
CONTROL POSITION:Positionner les intitulés de sorte qu'ils soient placés correctement par rapport aux contrôles auxquels ils se rapportent.
Ceux qui utilisent le Web en déplacement ont peu de temps et sont peu disponibles ; ils ont besoin d'informations succinctes.
PAGE TITLE:Fournir des titres de page brefs mais descriptifs.
CLARITY:Utiliser un langage clair et simple.
CENTRAL MEANING:S'assurer que les informations pertinentes précèdent celles qui ne le sont pas.
LIMITED:Limiter le contenu à ce que l'utilisateur a demandé.
SUITABLE:S'assurer que le contenu peut être utilisé dans un contexte mobile.
PAGE SIZE USABLE:Diviser les pages en portions de taille utilisable mais limitée.
©2011 W3C (ERCIM, Keio University, MIT CSAIL) - Produit par WithYou - Photographies ©gettyimages - ©corbis
Supported by MobiWeb2.0 FP7 EU
Project