alexisjanvier
commented
3 years ago Mes notes pour une base de design
Pistes
L’un des objectifs que nous nous sommes fixés pour cette refonte du site des CaenCamp est d’adopter une maladroitement nommée approche EDD (Ethically Driven Development). Mais de quoi s’agit-il ? Et bien une des plus grosses difficultés, c’est que cela reste certainement encore à définir formellement, même si pas mal de gens s’y attellent depuis plusieurs années.
Ce que moi j’en retiens, c’est qu’il s’agit de concevoir des services numériques plus inclusifs et moins coûteux en termes d’impact environnemental. La beauté de l’approche étant que ces deux règles se complètent très bien. Par exemple une page au DOM très simple sera plus facilement et plus rapidement lue par en lecteur d’écran d’une personne mal voyante disposant d’une mauvaise connexion internet. Et le coût énergétique en termes d’échange réseau sera également moindre. En grosse approximation certes, mais il me semble que l’idée est là.
Si cette objectif implique une grosse réflexion sur la partie back, le front en tant que ... résultat final est bien évidement une pierre angulaire de l'approche.
Voila ce qu'au stade de mes connaissances (limitées) je me suis noté
Utiliser des technologies pérennes
Un contenu raisonnable est un contenu qui sera maintenable dans le temps. Fan de techno que nous sommes, on connait bien - en tout cas moi je ne le connais que trop bien - la difficulté que l'on peut avoir à reprendre en projet de plus de deux ans, voire 1, voir 6 mois ... La difficulté pour mettre à jour les librairies, à changer les patterns de programmation (merci React...). Un exemple ? Le site actuel des CaenCamp en Gatsby ! On devrait parfois se demander si nous ne faisons pas partie de cette armée de créateur d'obsolescence programmée ...
Alors il ne s'agit pas de refaire des sites en html/css à la mano hein. J'ai encore suffisamment d'optimisme pour penser qu'il y a encore l'intelligence entre la 5G et la lampe huile. Mais il me semble que cette question de la pérennité des pages web est une question importante à avoir en tête.
Alléger au maximum les pages
Images hyper compressées, polices de caractère système, le moins de JavaScript possible, DOM au plus simple… Bref en genre d’approche jusqu’au-boutiste des techniques permettant d’alléger une page. Sur le web, c’est souvent une approche se réclamant du Low Tech. Voici des liens qui en parleront mieux que moi :
- Le design pour lutter contre le changement climatique
- Gauthier Roussilhe | Guide de conversion numérique au low tech
- Le Low-tech Lab partage les solutions et l’esprit low-tech
- Comment créer un site web basse technologie
Accessibilité
Il me semble qu’adopter uniquement une réponse basée sur une mesure technique du caractère éthique d’une page (qui ne serait éthique que parce qu’elle serait techniquement allégée) passerait à côté d’un point fondamental : l’inclusion. Bref, l’accessibilité d’une page ne devrait jamais être une option. Voici quelques liens qui me semblent intéressants pour le projet :
- Scaling accessibility with a design system
- Designing accessible color systems
- Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Des exemples
Au final, si on applique ces très (trop ?) nombreuses contraintes à l’intégration des pages d’un site, ça ressemble à quoi ? Peut-être un peu toujours à la même chose… Mais pas dans le détail. Quelle est la place à la créativité ? Ce serait une bonne discussion à avoir avec un graphiste ! En tout cas, voici quelques exemples que je connais et que j’aime bien :
Organisation du site
Une des choses un peu compliquées dans ce projet de refonte du site des CaenCamp, c’est qu’on sait que le contenu va évoluer par rapport à l’existant, mais qu’on ne sait pas encore formellement vers quoi ?
Nous nous sommes dit que nous allions reprendre l’existant en le simplifiant si possible (par exemple en n’ayant plus qu’un seul type d’événement et donc en ne séparant plus les CaenCamp des codings CaenCamp ou des Devops CaenCamp), et en envisageant la mise en place de module d’affichage pour les objets qui seront quoi qu’il se passe toujours valable même en envisageant un virage plus « réseau de développeurs » du site. Je pense ici aux annonces d’événements principalement puisque les rencontres resteront la colonne vertébrale des CaenCamp.
Accueil
-
Tout comme la page d’accueil actuelle, cette page pourrait commencer par un texte expliquant ce que sont les CaenCamp. Contrairement au texte actuel, nous y expliquerions les différents types de rencontres (CaenCamp, Coding et Devops), puisque nous n’aurons plus d’autre séparation formelle sur le site. Ce serait peut-être l’occasion d’introduire un repère visuel ?
-
Personnellement, j’aime bien le petit cartouche reprenant le nombre d’intervenants et de rencontres… Après, à voir si c’est à conserver et si oui en conservant ou non la distinction entre les différents types de rencontres ?
-
Ensuite, on pourrait trouver l’affichage des prochaines rencontres, s’il y en a de programmées.
Ici cet affichage devra différer de l’existant, puisqu’on ne fera plus la distinction entre les différents types de rencontres.
Une rencontre, c’est donc :
– une date et une heure – un lieu. Autre « nouveauté », le lieu peut maintenant être en ligne… – un organisateur. C’est l’organisateur qui va permettre d’identifier les différents types d’événements (CaenCamp, coding, devops). – un titre. Il ne s’agit pas forcement du titre du talk, mais cela peut-être celui de la rencontre. Par exemple « Édition 52 » – un ou plusieurs sous-évènements. Il s’agit des talks.
Tout cela implique donc qu’on aura sans doute quelques différences d’affichage selon les événements… Les événements CaenCamps et Devops auront un titre (Édition XX) et des sous-événements ayant chacun en titre, une description et des speakers, alors que les codings n’auront pas de sous-événements ni de speakers.
Pour info, voici à quoi ressemblent les données retournées par l'api sur un événement (au format schema.org).
{
"@id": "/api/events/illustrations-responsives",
"@type": "http://schema.org/Event",
"startDate": "2018-11-27T18:30:00+00:00",
"duration": "1H30M",
"eventAttendanceMode": "offline",
"description": "Pour cette édition 43, ...",
"name": "Edition 43",
"location": {
"@id": "/api/places/forum-digital",
"@type": "http://schema.org/Place",
"name": "Forum digital",
"description": "Le Forum Digital propose une offre d’hébergement en pépinière ou en hôtellerie pour les entreprises développant des technologies numériques. Cet espace de 1000 m² propose de nombreux services pour créer, se former, s’informer, collaborer, échanger et coworker.",
"address": {
"@id": "/api/postal_addresses/1",
"@type": "http://schema.org/PostalAddress",
"streetAddress": "Campus EffiScience | Bâtiment Erable 8 rue Léopold Sedar Senghor",
"postalCode": "14460",
"addressLocality": "Colombelles"
}
},
"organizer": {
"@id": "/api/organizations/caencamp",
"@type": "http://schema.org/Organization",
"description": "Le meetup des développeurs caennais",
"image": "https://www.caen.camp/static/logoFondBlanc-278da657a83902f7d21083ade8e9ce7a.png",
"name": "CaenCamp - Les rendez-vous des CaenCamp.s"
},
"subEvents": [
{
"@id": "/api/events/nestjs",
"@type": "http://schema.org/Event",
"duration": "5M",
"performers": [
{
"@id": "/api/people/quentin-desrame",
"@type": "http://schema.org/Person",
"description": "Développeur polyglotte et testeur de nouvelles technologies à mes heures perdues.",
"name": "Quentin Desramé"
}
],
"description": "Présentation de NestJS, un framework qui exploite la puissance de TypeScript. Il propose notamment un système de module et d'injection de dépendances permettant d'architecturer son code de manière simple mais efficace.",
"name": "NestJS"
},
{
"@id": "/api/events/illustrations-responsives",
"@type": "http://schema.org/Event",
"duration": "45M",
"performers": [
{
"@id": "/api/people/yvain-liechti",
"@type": "http://schema.org/Person",
"description": "Make a better Web everyday @CleverAge #js #html #css #catLife",
"name": "Yvain Liechti"
}
],
"description": "Présentation et description de 'picture', 'srcset' et 'sizes' ainsi que de la propriété css 'object-fit', afin de sensibiliser à l'utilisation des images aujourd'hui et l'enjeu de performance qui y est lié.",
"name": "Illustrations responsives"
}
],
},-
On pourrait aussi retrouver une mise en avant des 2 (?) derniers événements.
-
Contrairement à la home actuelle, peut-être pourrions-nous aussi trouver une mise en avant d'un lien vers la page Call for speaker. Ce serait chouette qu'on ait plus de propositions spontanées de talk :)
Les rencontres
Une liste non paginée de tous les événements. On pourrait utiliser le même composant d'affichage que celui utilisé en home.
Si cette liste n'est pas paginable, elle devrait être filtrable par :
- organisateur (CaenCamp, coding, ...)
- lieu
- speaker
- titre
Les intervenants
Liste des intervenants comme le liste actuelle. Par contre, je me dis qu'on pourrait dans un premier temps supprimer la page d'un speaker, mais ajouter le nombre d'événements auquel l'intervenant a participé. Ce pourrait être un lien vers la liste des événements filtrée sur cet intervenant.
Les sponsors
Identique à l'existant. Au niveau de l'api, un sponsor est une organisation, et une structure d'acceuil une place
(Reprise de l'issue ouverte par @FanchGadjo) Nous sommes plusieurs à être motivés par l'implémentation de cette interface, mais il manque l'essentiel : une base de design.
Je vous propose de déposer ici vos idées ou vos sources d'inspirations. L'idéal serait que quelqu'un puisse réaliser une ébauche ou une maquette complète sous Figma, Sketch ou autre.
Il y a une base de discussion autour du low-tech et donc d'utiliser de polices système.
Pour rappel, l'existant : https://caen.camp/
@Nexoid avait déjà fait une belle proposition pour le projet job-board ici : CaenCamp/jobs-caen-camp#21 (comment)
https://www.figma.com/file/QzwxmmrRJ6S4GuRqX4LMQC/V1