100 points à savoir sur…
Développement Web éco-conçu

Analysons la stratégie de contenu utilisée par les créateurs du site web suivant : https://a-k-apart.com/.

Le site web You Are @ 10K Apart (a-k-apart.com) vise à créer une expérience web attrayante qui peut être livrée en 10 Ko et fonctionne sans JavaScript. Il s'agit d'optimiser chaque petit octet pour s'assurer que votre site fonctionne, quoi qu'il arrive. Le défi de créer une application web de moins de 10 Ko a été annoncé sous la forme d'un concours.

À cette fin, une page de concours a été construite pour l'interopérabilité, l'accessibilité et l'amélioration progressive en moins de 10 Ko.

Nous ne nous concentrerons pas sur tous les détails techniques de la façon dont ils ont réussi à le faire, puisque de nombreux concepts doivent encore être révélés par ce module (ceux impliquant des images, des vidéos, des polices, du code, etc.) Nous allons plutôt nous intéresser à la stratégie de contenu qui a été utilisée pour créer ce micro-site.

La première étape a consisté à déterminer le public cible. Il a été divisé en 2 groupes principaux :

• Les concurrents
• Les téléspectateurs

Les deux groupes pouvaient potentiellement se chevaucher. La tâche consistait donc à concevoir le site web de manière à soutenir les deux groupes et à assurer une transition facile entre eux. Cet objectif a été atteint grâce à différentes phases de développement du site Web :

• Lancement : lorsqu'il n'y a pas d'inscriptions ;
• En cours : lorsqu'il y avait des inscriptions, mais que le concours n'était pas ouvert ;
• Clôture : lorsque le concours est clos et qu'aucune nouvelle participation n'est acceptée, mais que les participants sont invités à voter pour leurs favoris ;
• Annonce du gagnant : après que le jugement des professionnels et de la communauté a été effectué et que le gagnant a été déterminé (c'est la page que nous pouvons voir actuellement).

Sur la base du schéma ci-dessus, le contenu de chaque page a été planifié en fonction de chaque phase.
Dans un premier temps, les auteurs ont commencé par supprimer le contenu qui n'était pas essentiel à chaque phase. Les créateurs ont suivi le modèle "Mobile First" (vous pouvez en savoir plus à ce sujet dans la Notion 10) et ont supprimé tout ce qui pouvait distraire l'utilisateur ou ne pas l'aider à atteindre son objectif sur cette page. Ensuite, le texte de chaque phase a été rédigé et le contenu a été conçu pour être raconté comme si vous parliez à un partenaire assis à côté de vous.

Ensuite, le contenu a été organisé en maquettes de base (diagrammes décrivant la structure et la fonctionnalité du site). En travaillant sur les maquettes, nous avons prêté attention aux endroits où la taille de la page pouvait être réduite ou aux endroits où le balisage (par exemple, HTML5) pouvait être utilisé pour améliorer l'expérience. En outre, une importance a été accordée à l'organisation du contenu sur les écrans plus petits.

Pour les interactions plus complexes, des IxMaps (organigrammes) ont été utilisés. Ce système permet de définir les différentes façons dont l'utilisateur peut faire l'expérience de l'interface. Par exemple, la page d'entrée affiche les informations les plus importantes : le nom du projet, le nom de son/ses créateur/s, la description du projet et un lien vers une page web. La capture d'écran de la toile est utile, mais pas nécessaire. Par conséquent, IxMap a été utilisé pour charger paresseusement les captures d'écran uniquement lorsque Javascipt était disponible. De plus, IxMap permettait de charger une image dans un format alternatif pour les navigateurs qui supportent WebP (beaucoup plus petit que JPG ou PNG).

Toutes ces étapes précédentes ont aidé le concepteur à obtenir une bonne vue d'ensemble des besoins du site en matière d'interface utilisateur et à créer un système de conception plutôt que des pages individuelles.

Conclusions

Ce qui a été appris en matière de contenu, de stratégie et d'information :

• Réduisez les distractions en vous concentrant sur l'objectif principal.
• Écrivez pour les gens comme si vous leur parliez en personne.
• Donner la priorité au contenu en s'assurant que le flux amène les utilisateurs là où ils veulent aller.
• Recherchez les possibilités d'amélioration en supprimant du contenu ou en ne le réintroduisant que dans certains scénarios.
• Recherchez des modèles pour créer un système de conception, et pas seulement des pages individuelles.