Lorsque vous créez des contenus pour différents types d'utilisateurs et d'appareils, tenez compte du contenu, de la mise en page et de la conception graphique.
Comment les utilisateurs lisent sur le Web
Le guide de rédaction du gouvernement américain résume ce que les utilisateurs attendent des contenus sur le Web :
Des études montrent que les utilisateurs ne lisent pas les pages Web, mais les parcourent. En moyenne, ils ne lisent que 20 à 28% du contenu d'une page Web. La lecture sur écran est beaucoup plus lente que sur papier. Les utilisateurs abandonnent et quittent votre site si les informations ne sont pas faciles d'accès et à comprendre.
Comment rédiger pour les appareils mobiles
Concentrez-vous sur le sujet et racontez l'histoire dès le début. Pour que votre contenu fonctionne sur différents appareils et fenêtres d'affichage, assurez-vous de communiquer vos points principaux dès le début : en règle générale, idéalement dans les quatre premiers paragraphes, en 70 mots environ.
Demandez-vous ce que les utilisateurs attendent de votre site. Essaient-ils de trouver quelque chose ? Si les utilisateurs visitent votre site pour obtenir des informations, assurez-vous que tout votre texte est conçu pour les aider à atteindre leur objectif. Rédigez à la voix active, proposez des actions et des solutions.
Ne publiez que ce que vos visiteurs veulent, et rien de plus.
Une étude du gouvernement britannique montre également que :
En d'autres termes, utilisez un langage simple, des mots plus courts et des structures de phrases simples, même pour un public technique et cultivé. Sauf raison valable, adoptez un ton de conversation. Une vieille règle du journalisme consiste à écrire comme si vous parliez à un enfant intelligent de 11 ans.
Le prochain milliard d'utilisateurs
Cette approche de la rédaction est particulièrement importante pour les lecteurs sur les appareils mobiles. Elle est essentielle lorsque vous créez du contenu pour des téléphones à bas prix avec de petites fenêtres d'affichage qui nécessitent plus de défilement et peuvent avoir des écrans de qualité inférieure et moins réactifs.
La plupart des prochains milliards d'utilisateurs qui se connecteront à Internet disposeront d'appareils bon marché. Ils ne voudront pas dépenser leur forfait de données pour parcourir des contenus longs et peuvent ne pas lire dans leur langue maternelle. Raccourcissez votre texte : utilisez des phrases courtes, une ponctuation minimale, des paragraphes de cinq lignes ou moins et des titres sur une seule ligne. Envisagez d'utiliser du texte responsive (par exemple, des titres plus courts pour les fenêtres d'affichage plus petites), mais soyez conscient des inconvénients.
Une approche minimaliste du texte facilitera également la localisation et l'internationalisation de votre contenu, et augmentera les chances qu'il soit cité sur les réseaux sociaux.
Résultat :
- La simplicité avant tout
- Évitez de surcharger vos pages
- Venez-en au fait
Éliminer le contenu inutile
En termes de taille en octets, les pages Web sont volumineuses et le deviennent de plus en plus.
Les techniques de conception responsive permettent de diffuser différents contenus pour les fenêtres d'affichage plus petites, mais il est toujours judicieux de commencer par simplifier le texte, les images et autres contenus.
Les utilisateurs du Web sont souvent orientés vers l'action. Ils sont "penchés en avant" à la recherche de réponses à leur question actuelle, plutôt que de se détendre pour lire un bon livre.
Jackob Nielsen
Demandez-vous ce que les utilisateurs essaient d'accomplir lorsqu'ils visitent mon site.
Chaque composant de la page aide-t-il les utilisateurs à atteindre leur objectif ?
Supprimer les éléments de page redondants
Selon HTTP Archive, les fichiers HTML représentent près de 70 Ko et plus de neuf requêtes pour la page Web moyenne.
De nombreux sites populaires utilisent plusieurs milliers d'éléments HTML par page et plusieurs milliers de lignes de code, même sur mobile. Une taille de fichier HTML excessive peut ne pas ralentir le chargement des pages, mais une charge utile HTML importante peut être le signe d'un contenu trop volumineux : des fichiers .html plus volumineux signifient plus d'éléments, plus de contenu textuel ou les deux.
La réduction de la complexité du code HTML réduira également la taille de la page, facilitera la localisation et l'internationalisation, et simplifiera la planification et le débogage de la conception responsive. Pour en savoir plus sur la rédaction de code HTML plus efficace, consultez HTML haute performance.
Chaque étape que vous faites effectuer à un utilisateur avant qu'il ne tire parti de votre application vous coûtera 20% d'utilisateurs.
Gabor Cselle, Twitter
Il en va de même pour le contenu : aidez les utilisateurs à trouver ce qu'ils veulent le plus rapidement possible.
Ne vous contentez pas de masquer le contenu aux utilisateurs mobiles. Visez la parité du contenu, car deviner les fonctionnalités qui ne manqueront pas à vos utilisateurs mobiles est voué à l'échec pour certains. Si vous disposez des ressources nécessaires, créez des versions alternatives du même contenu pour différentes tailles de fenêtre d'affichage, même si ce n'est que pour les éléments de page prioritaires.
Tenez compte de la gestion du contenu et du workflow : les systèmes existants génèrent-ils du contenu obsolète ?
Simplifier le texte
À mesure que le Web devient mobile, vous devez changer votre façon d'écrire. La simplicité avant tout, évitez de surcharger vos pages et venez-en au fait.
Supprimer les images redondantes
Les images peuvent être belles, amusantes et informatives, mais elles occupent également de l'espace sur la page, augmentent sa taille et le nombre de requêtes de fichiers. La latence s'aggrave à mesure que la connectivité se dégrade, ce qui signifie qu'un excès de requêtes de fichiers image est un problème croissant à mesure que le Web devient mobile.
Les images consomment également de l'énergie. Après l'écran, la radio est le deuxième plus gros consommateur de batterie. Plus de requêtes d'images, plus d'utilisation de la radio, plus de batteries déchargées. Même le simple rendu des images consomme de l'énergie, et ce de manière proportionnelle à leur taille et à leur nombre. Consultez le rapport de Stanford Who Killed My Battery?
Si vous le pouvez, supprimez les images.
Voici quelques suggestions :
- Envisagez des conceptions qui évitent complètement les images ou qui les utilisent avec parcimonie. Le texte seul peut être magnifique ! Demandez-vous ce que les visiteurs de mon site essaient d'accomplir. Les images facilitent-elles ce processus ?
- Auparavant, il était courant d'enregistrer les titres et autres textes sous forme d'éléments graphiques. Cette approche ne s'adapte pas bien aux changements de taille de la fenêtre d'affichage et augmente la taille de la page et la latence. L'utilisation de texte sous forme d'élément graphique signifie également que le texte ne peut pas être trouvé par les moteurs de recherche et n'est pas accessible aux lecteurs d'écran ni aux autres technologies d'assistance. Utilisez du texte "réel" dans la mesure du possible. Les polices Web et le CSS peuvent permettre une typographie magnifique.
- Utilisez le CSS plutôt que des images pour les dégradés, les ombres, les angles arrondis et les textures d'arrière-plan, des fonctionnalités compatibles avec tous les navigateurs modernes. Toutefois, gardez à l'esprit que le CSS peut être préférable aux images, mais qu'il peut toujours y avoir une pénalité de traitement et de rendu, particulièrement importante sur mobile.
- Les images d'arrière-plan fonctionnent rarement bien sur mobile. Vous pouvez utiliser des requêtes média pour éviter les images d'arrière-plan sur les petites fenêtres d'affichage.
- Évitez les images d'écran de présentation.
- Utilisez le CSS pour les animations d'interface utilisateur.
- Familiarisez-vous avec vos glyphes. Utilisez des symboles et des icônes Unicode au lieu d'images, avec des polices Web si nécessaire.
- Envisagez d'utiliser des polices d'icônes. Il s'agit d'éléments graphiques vectoriels qui peuvent être mis à l'échelle à l'infini, et un ensemble complet d'images peut être téléchargé dans une seule police. (Tenez toutefois compte de ces préoccupations.)
- L'élément
<canvas>peut être utilisé pour créer des images en JavaScript à partir de lignes, de courbes, de texte et d'autres images. - Les images SVG intégrées ou URI de données ne réduisent pas la taille de la page, mais elles peuvent réduire la latence en diminuant le nombre de requêtes de ressources. Le SVG intégré est très bien pris en charge sur les navigateurs mobiles et de bureau, et les outils d'optimisation peuvent réduire considérablement la taille des SVG. De même, les URI de données sont bien pris en charge. Les deux peuvent être intégrés dans le CSS.
- Envisagez d'utiliser
<video>au lieu de GIF animés. L'élément vidéo est compatible avec tous les navigateurs sur mobile (à l'exception d'Opera Mini).
Pour en savoir plus, consultez Optimisation des images et Suppression et remplacement d'images.
Concevoir du contenu qui fonctionne bien sur différentes tailles de fenêtre d'affichage
"Créez un produit, ne le réinventez pas pour les petits écrans. Les excellents produits mobiles sont créés, jamais portés."
Mobile Design and Development, Brian Fling
Les excellents concepteurs n'optimisent pas pour les appareils mobiles, mais pensent de manière responsive pour créer des sites qui fonctionnent sur différents appareils. La structure du texte et des autres contenus de la page est essentielle pour le succès sur plusieurs appareils.
De nombreux prochains milliards d'utilisateurs qui se connecteront à Internet utiliseront des appareils à bas prix avec de petites fenêtres d'affichage. La lecture sur un écran de 3,5 ou 4 pouces à faible résolution peut être difficile.
Voici une photo des deux écrans :
Sur l'écran plus grand, le texte est petit, mais lisible.
Sur l'écran plus petit, le navigateur affiche correctement la mise en page, mais le texte est illisible, même en zoomant. L'affichage est flou et présente une dominante de couleur (le blanc n'est pas blanc), ce qui rend le contenu moins lisible.
Concevoir du contenu pour les appareils mobiles
Lorsque vous créez des contenus pour différentes fenêtres d'affichage, tenez compte du contenu, de la mise en page et de la conception graphique. Utilisez du texte et des images réels, et non du contenu d'espace réservé.
"Le contenu précède la conception. La conception en l'absence de contenu n'est pas une conception, mais une décoration."
Jeffrey Zeldman
- Placez votre contenu le plus important en haut de la page, car les utilisateurs ont tendance à lire les pages Web en suivant un modèle en forme de F.
- Les utilisateurs visitent votre site pour atteindre un objectif. Demandez-vous ce dont ils ont besoin pour atteindre cet objectif et supprimez tout le reste. Soyez strict avec les embellissements visuels et textuels, le contenu obsolète, les liens excessifs et autres éléments superflus.
- Faites attention aux icônes de partage sur les réseaux sociaux. Elles peuvent encombrer les mises en page, et leur code peut ralentir le chargement des pages.
- Concevez des mises en page responsives pour le contenu, et non pour des tailles d'appareils fixes.
Contenu de test
- Vérifiez la lisibilité sur les fenêtres d'affichage plus petites à l'aide des Outils pour les développeurs Chrome et d'autres outils d'émulation.
- Testez votre contenu dans des conditions de faible bande passante et de latence élevée. Essayez le contenu dans différents scénarios de connectivité.
- Essayez de lire votre contenu et d'interagir avec lui sur un téléphone à bas prix.
- Demandez à vos amis et collègues d'essayer votre application ou votre site.
- Créez un laboratoire de test d'appareils simple. Le dépôt GitHub du Mini Mobile Device Lab de Google contient des instructions sur la façon de créer le vôtre. OpenSTF est une application Web simple permettant de tester des sites Web sur plusieurs appareils Android.
Voici OpenSTF en action :
Les appareils mobiles sont de plus en plus utilisés pour consommer du contenu et obtenir des informations, et pas seulement comme appareils de communication, de jeux et de médias.
Il est donc de plus en plus important de planifier le contenu pour qu'il fonctionne bien sur différentes fenêtres d'affichage, et de le hiérarchiser lors de la conception de la mise en page, de l'interface et de l'interaction sur plusieurs appareils.
Comprendre le coût des données
Les pages Web sont de plus en plus volumineuses.
Selon HTTP Archive, la taille moyenne des pages des 1 million de sites les plus populaires dépasse désormais 2 Mo.
Les utilisateurs évitent les sites ou les applications perçus comme lents ou coûteux. Il est donc essentiel de comprendre le coût du chargement des composants de la page et de l'application.
La réduction de la taille des pages peut également être rentable. Chris Zacharias de YouTube a constaté que lorsqu'ils ont réduit la taille de la page de visionnage de 1,2 Mo à 250 Ko :
En d'autres termes, la réduction de la taille des pages peut ouvrir de nouveaux marchés.
Calculer la taille de la page
Il existe plusieurs outils permettant de calculer la taille des pages. Le panneau "Réseau" des Outils pour les développeurs Chrome affiche la taille totale en octets de toutes les ressources et peut être utilisé pour déterminer la taille de chaque type d'élément. Vous pouvez également vérifier les éléments qui ont été récupérés à partir du cache du navigateur.
Firefox et d'autres navigateurs proposent des outils similaires.
WebPagetest permet de tester les chargements de pages initiaux et suivants. Vous pouvez automatiser les tests à l'aide de scripts (par exemple, pour vous connecter à un site) ou en utilisant leurs API RESTful. L'exemple suivant (chargement de developers.google.com/web) montre que la mise en cache a réussi et que les chargements de pages suivants n'ont nécessité aucune ressource supplémentaire.
WebPagetest fournit également une répartition de la taille et des requêtes par type MIME.
Calculer le coût des pages
Pour de nombreux utilisateurs, les données ne coûtent pas seulement des octets et des performances, mais aussi de l'argent.
Le site What Does My Site Cost? vous permet d'estimer le coût financier réel du chargement de votre site. L'histogramme ci-dessous montre le coût (avec un forfait de données prépayé) du chargement de amazon.com.
N'oubliez pas que cela ne tient pas compte de l'accessibilité financière par rapport aux revenus. Les données de blog.jana.com indiquent le coût des données.
| Coût du forfait de données de 500 Mo (en dollars américains) |
Salaire minimum horaire (en dollars américains) |
Nombre d'heures de travail pour payer un forfait de données de 500 Mo |
|
| Inde | 3,38 $ | 0,20 $ | 17 heures |
| Indonésie | 2,39 $ | 0,43 $ | 6 heures |
| Brésil | 13,77 $ | 1,04 $ | 13 heures |
La taille des pages n'est pas seulement un problème pour les marchés émergents. Dans de nombreux pays, les utilisateurs utilisent des forfaits mobiles avec des données limitées et éviteront votre site ou votre application s'ils les perçoivent comme volumineux et coûteux. Même les forfaits de données mobiles et Wi-Fi "illimités" ont généralement une limite de données au-delà de laquelle ils sont bloqués ou limités. Pour ces raisons, il est préférable d'être aussi transparent que possible sur la quantité de données consommée par votre page. L'article de blog suivant fournit des bonnes pratiques spécifiques : Nurture trust through cost transparency (Développer la confiance grâce à la transparence des coûts)
Résultat : la taille des pages affecte les performances et coûte de l'argent. L'optimisation de l'efficacité du contenu explique comment réduire ce coût.