The World Wide Web and the Death of Graceful Degradation
via ▻https://diasp.eu/p/17638194
►https://hackaday.com/2025/05/20/the-world-wide-web-and-the-death-of-graceful-degradation
#featured #history #interest #rants #softwaredevelopment #gracefuldegradation #webdesign #hackaday posted by pod_feeder_v2
#Typographie - Système de Design de l’État
▻https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie
Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l’État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.
HTML: The Bad Parts - HTMHell
▻https://www.htmhell.dev/adventcalendar/2023/13
You’ve probably heard statements along the lines of “HTML is already accessible by default” or “You don’t need to reinvent this perfectly fine HTML control”. I consider these to be more of general claims rather than universal truths. It’s extremely important for web developers to recognize gaps in the platform. To that end, I’ve decided to collect a few instances where HTML falls short, through accessibility issues or usability issues.
This is not a comprehensive list, and it does not include gaps in ARIA. I wanted to find a balance between widely known issues and more frequently encountered (but lesser known) ones, while making sure to include some things that we take for granted. In each section, I will include its severity, alternate suggestions, and links where you can find more detailed information.
Visual #design #rules you can safely follow every time
▻https://anthonyhobday.com/sideprojects/saferules
You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are #safe to follow every time.
– Use near-black and near-white instead of pure black and white
– Saturate your neutrals
– Use high #contrast for important elements
– Everything in your design should be deliberate
– Optical #alignment is often better than mathematical alignment
– Lower letter spacing and line height with larger #text. Raise them with smaller text
– Container borders should contrast with both the container and the background
– Everything should be aligned with something else
– #Colours in a palette should have distinct brightness values
– If you saturate your neutrals you should use warm or cool colours, not both
– Measurements should be mathematically related
– Elements should go in order of visual weight
– If you use a horizontal grid, use 12 columns
– #Spacing should go between points of high contrast
– Closer elements should be lighter
– Make drop shadow blur values double their distance values
– Put simple on complex or complex on simple
– Keep container colours within brightness limits
– Make outer padding the same or more than inner padding
– Keep body text at 16px or above
– Use a line length around 70 characters
– Make horizontal #padding twice the vertical padding in buttons
– Use two #typefaces at most
– Nest corners properly
– Don’t put two hard divides next to each other
#ux Finitions.
J’ai l’impression qu’on redit toujours un peu les même choses depuis 15 ans.
Et surtout que ce sont les pratiques de PAO qui débouchent sur le web.
SafeGraph — Places Data for Software and Technology Teams
▻https://www.safegraph.com/careers
Iconduck - Free open source icons, illustrations and graphics
▻https://iconduck.com
#icone #svg
Y a pas mal de ressources partagées ici, si on les recensait ? :)
►https://orioniconlibrary.com
►https://www.flaticon.com
►https://flaticons.net par
►https://icons.pixsellz.io
►https://icongr.am
►https://remixicon.com
►https://www.svgrepo.com
►https://danklammer.com/bytesize-icons
(par @monolecte, @b_b, @cy_altern, @rastapopoulos)
#Icons #ressource_graphique #webdesign #pictos #graphisme #ergonomie #web #intégration #interface
unDraw - Open source illustrations for any idea
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.
Dans mon idée, on partait plus sur les icônes ici pour s’y retrouver et les outils dans d’autres fils :) et avec un #Ressources_graphisme ou #Ressources_integration pour tout lier.
Mais à voir.
des nouveaux
– ▻https://feathericons.com
– ▻https://github.com/primer/octicons
– ▻https://fonts.google.com/icons?selected=Material+Icons
– ▻https://icons.coreui.io/icons
– ▻https://github.com/danklammer/bytesize-icons
– ▻https://useiconic.com/open
– ▻https://forkaweso.me/Fork-Awesome/icons
Source + avis : ▻https://core.spip.net/issues/4727
How to Design Better Icons
▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf
Inclusively Hiding & Styling Checkboxes and Radio Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
▻https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn’t really substitute for it — the user still needs a checkbox to interact with. So, when we attempt to hide the checkbox we want to style, we need to make sure that the checkbox remains accessible and interactive.
The CSS Cascade
Or, How browsers resolve competing #CSS styles
We style our websites using CSS, which stands for Cascading Style Sheets.
But what does Cascading really mean?
ITCSS: Scalable and Maintainable #CSS Architecture - Xfive
▻https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture
ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such a way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.
ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.
One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take the form of the inverted triangle
Tufte CSS
https://edwardtufte.github.io/tufte-css
Tufte #CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.
If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.
Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.
Gnome : le poids des icônes — aris
▻https://aris.papatheodorou.net/gnome-le-poids-des-icones
Gnome, l’environnement graphique pour systèmes GNU/Linux, viens de sortir une nouvelle version (3.32) comportant d’importantes améliorations au niveau des performances comme de l’ergonomie. Au passage, un nouveau set d’icônes fait son apparition…
Jakub Steiner, salarié de Red Hat et membre de l’équipe de design pour Gnome, avait expliqué en janvier 2019 sur son blog personnel les raisons d’un changement global du design des icônes de l’environnement de bureau, qui n’avait pratiquement pas évolué depuis une quinzaine d’années
#gnulinux #gnome #opensource #libre #interfaces #webdesign #icônes
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-js
aged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.
Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
►https://seenthis.net/messages/734575
À suivre de prêt, cette initiative…
« Supported by Shuttleworth fundation »
Le site est deprecated et maintenant il faut aller sur :
▻https://www.pagedjs.org
Quand tu visites le #site #web d’un confrère qui a décidé d’ignorer les règles élémentaires d’ #accessibilité #accessibility #Webdesign
Priority Guides : A Content-First Alternative to Wireframes · An A List Apart Article
►http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
C’est intéressant même si je ne suis pas d’accord avec le démarrage de sa réflexion sur le faire qu’un wireframe c’est forcément un dessin statique (et donc dans son argumentation pas responsive etc).
Du coup c’est déjà un peu ce qu’on fait, puisqu’on commence par mettre des blocs de contenu (faux ou plus précis suivant ce qu’on connait comme détails à ce moment) dans du HTML. Puis on style ce HTML en bloc que l’on place petit à petit. On pourrait aller plus loin et vraiment commencer par TOUT mettre en détail et faire valider cette liste de choses à placer dans un ordre de priorité, puis le styler une fois que c’est validé seulement.
Mais du coup ses documents de priorités il continue de les faire en pixels, alors qu’on peut parfaitement les faire en HTML directement (et donc au départ c’est mobile first tant qu’on n’a rien stylé oui mais on PEUT les styler ensuite, ce qui n’est pas possible avec un truc statique).
Bref, ça va dans le bon sens, mais je pense qu’il faut continuer à améliorer dans la voix de partir directement sur le HTML, jamais depuis un outil statique : aussi puissant qu’ils peuvent être (sketch etc), je trouve que c’est obsolète, des outils du passé, pour la majorité des cas.
#conception #web #prototype #design #maquette #méthodologie #bonnes_pratiques
Alors je suis tout à fait d’accord, je viens encore d’en faire les frais ^^ Les outils comme sketch ou autre enferme dans une reflexion « pixel perfect » qui effectivement viens du print ou tout du moins tendrait a y ressembler.
Le problème c’est aussi les gens qui utilisent le logiciel. Je retrouve les mêmes erreurs de conception de document, identiques a quand je faisais de la production et que j’executais les doc des directeurs artistique (ex 30 couleurs aucune dans le même format).
On récolte donc des protos, conçues par des gens qui n’on jamais intégré ou conscience du markup, ni des implications de leurs choix graphiques.
En exemple le plus courrant, des titres qui change de place suivant le mode mobile, mais change de bloc container : on se retrouve a dupliquer le code, a masquer en aria-hidden pour pas que les lecteurs vocaux double… bref moi j’aime pas et généralement on peut faire sans …
Ce sont des méthodes ou type de réflexion, qui vont a l’encontre du progressive enhancement, et du mobile first.
La en tout cas ce concept est intéressant car on pense la page en fonction du contenu réel : ce qui est totalement l’inverse des méthodes les plus couramment employées, encore largement tirés du print, sauf que l’ont à enlevé des étapes comme le calibrage ^^, et que maintenant on nous envoie le contenu quand le travail est fini, on marche à l’envers.
Il y’a quelques années, j’avais été intéressé, par un projet Project Hub lancé par Brad Frost (Atomic Design methodology) : ▻https://github.com/bradfrost/project-hub. En fait l’idée est de constatent garder le fil avec le client en le poussant a participer (genre Agile) . Je pense que l’implication, le suivi, le déroulement devrait faire partie d’un seul outil ou chaque intervenant à accès aux infos, a la timeline, des notifications rappels, guideline, …
Dans un outil qui gérerait l’ensemble de la progression, l’exemple cité dans l’article peut effectivement permettre au SEO, marketeux de faire leur sauce en parallèle de l’intégrateur, sans interférer avec la partie purement dev.
Je pense que réfléchir parallèlement ainsi pourrait éviter pas mal de problème pour ceux qui sont en fin de chaine, et surtout amener à se poser les bonnes questions sans penser QUE cosmétique mais contenu. Certainement un gain de temps aussi quand on travaille a plusieurs intervenants, …
Design Better Forms – UX Collective
▻https://uxdesign.cc/design-better-forms-96fadca0f49c
form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.
Voila une belle liste des erreurs que nous pousse a faire nos clients, et marketeux qui savent mieux que nous organiser une page agréable et raisonné ;-) . Perso on me les as déjà toutes faites quasiement et comme un lache de tâchon j’ai éxécuté … les ordres (appelé recommandations dans le monde du travail …)
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem
This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.
Mouais pas aussi cool que ce que je pensais à la base.
Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).
En fait c’est une version/vision du problème…
ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…
Dans les autres tendances et stratégies sur le meme sujet :
Elements queries :
Le draft de la spec proposée :
▻https://tomhodgins.github.io/element-queries-spec/element-queries.html
Un petit tour d’horizon du sujet et de la problématique :
▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries
Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css
▻https://github.com/marcj/css-element-queries
Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…
Timeline Me
TimelineMe - ▻http://mickaelr.github.io/jquery-timelineMe - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps.
Dans le même genre, j’avais fait celui la l’année dernière quand j’ai refait mon cv ^^
et le plug spip est ici ▻https://github.com/mistergraphx/spip_vtimeline
@mist_ merci pour l’info, je me ferai un plaisir de le citer dans la gazette dès qu’une doc sera dispo :)
Un truc non documenté n’existe pas
(ou uniquement pour son auteur ^^).
CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts
The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.
À la fin il donne le lien vers une super chaine pédago de Jen Simmons
▻https://seenthis.net/messages/670758
j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.
Il me semble qu’on avait un tag pour ça genre #art_directed_articles mais ya qu’un seen donc ça devait être autre chose
C’est parce que y a pas de « s » au tag @rastapopoulos (c’est juste @baroug qui a voulu faire son intéressant)
28 CSS Magazine Layouts | Free Frontend
▻http://freefrontend.com/css-magazine-layouts
Collection of HTML and CSS magazine layouts. Demo and download code (*zip).
Le jour où j’aurais le temps... j’en ferais bien mon p’tit #Spip !
Toujours :-) J’aimerais vraiment changer le design de mon site... :-)
Hi hi :-) Mais j’ai tellement l’impression d’y être un boulet :-)
moi je veux bien t’aider, mais j’ai une pratique tellement old school (tout est en HTML dans le Terrier) que je ne suis pas certain d’être très utile. Je peux faire des maquettes si on en cause (que tu me dis ce que tu veux) et confier la mise en forme css à un gars qui sait faire ce genre de trucs.
C’est adorable mais ce que je cherche c’est intégrer du SPIP dans un template HTML/CSS... :-)
Merci encore !
Tu veux un nouveau squelette plus « responsive », en gros ?
Oui, plus responsive, TRES typographique, plus fou que l’actuel que j’utilise...
Des choses comme
▻https://codepen.io/julesforrest/full/xLBbVb
▻https://codepen.io/julesforrest/full/yowMPw
ou mieux encore ▻http://www.mrmarcelschool.com
Avec de beaux titres puisés ici
▻http://tobiasahlin.com/moving-letters
Mais j’avoue que je suis resté bloqué en 2004 avec mes boucles... je suis totalement dépassé par les SPIP 2, 3, etc :-)
Bah, t’es déjà sous SPIP 3.2. Donc, c’est du squelette, surtout du squelette et beaucoup de CSS (on veut des grilles, hein !).
Tu es pressé ? C’est toi qui a tout fait sur ton site ?
La dernière version on y avait un peu tous touché :p
Mais c’est pas « plus responsive », la version actuelle est déjà responsive (à part les commentaires, qui sont pas glop en petit). C’est changer l’ambiance graphique quoi (comme régulièrement) :)
@rastapopoulos , il a tout vrai :-) Beaucoup de gens m’ont aidé ---- comme toujours :-)
Là, j’aimerais bien refaire un squelette qu’on partagerait ensuite, comme feu ▻https://contrib.spip.net/TypoManiac :-)
En fait, je suis largué entre les Z, les Thèmes, les squelettes, les plugins Framework (boostrap et Foundation)...
Non, pas pressé mais un peu de temps d’ici le 20 décembre, alors j’aimerais en profiter un peu... :-)
Tes forums sont comme toi : tout parfait ! :-)
Merci l’ami !
Si vous avez deux minutes les amis :-)
▻https://forum.spip.net/fr_268641.html?debut_forums=%40268645#forum268645
On ne peut pas avoir l’inverse : avoir une image en N&B qui passe en couleur quand on la survole ?
Bah si mais en CSS, si tu produis par les filtres de SPIP une image de telle ou telle sorte, elle est comme elle est, tu peux plus la changer. C’est en CSS qu’il faut la passer en noir et blanc, et la remettre normal en hover.
Chers amis... J’avance bien (sommaire et article) mais je m’arrache les cheveux sur les css responsive...
Le titre des mes articles dépassent largement en version mobile...
Au secours :-)
Apparemment tu réutilises le javascript qui change la taille d’un texte pour qu’il rentre dans une largeur, comme dans ton précédent thème d’avant. Mais il semblerait qu’il merde une fois sur deux à trouver la bonne taille en petit écran. Quand je charge ça marche pas et quand je joue ensuite avec la taille de la fenêtre ça finit par retaille le texte comme il faut au bout d’un moment. Mais bon ça fait un truc super en hauteur. Ça serait sûrement mieux de ne pas l’activer en petit écran et d’écrire plus petit.
Tu as raison, j’ai repris ▻https://github.com/freqDec/slabText que j’adore...
Mais j’ai l’impression qu’avant le titre, le probleme est d’abord le « bloc » (cadre) dans lequel ce titre s’inscrit.... J’ai du mettre trop de padding, machin :-)
Pour reprendre ton idée, comment « interdire » cette utilisation du JQuery sur les téléphones ?
Ma feuille de style est ici
www.davduf.net/lab/squelettes/css/perso.css
Mille mercis :-)
Pour ne pas encombrer SeenThis, j’ai ouvert ceci :-)
▻https://forum.spip.net/fr_268680.html
Au secours :-)
Auto-héberger les polices #Google Fonts sur #WordPress | Angristan
▻https://angristan.fr/auto-heberger-polices-google-fonts-wordpress
Mais c’est surtout l’aspect vie privée, qu’il est difficile de ne pas évoquer dès que l’on touche à un service Google, puisque chaque visiteur va devoir télécharger quelques fichiers depuis les serveurs de Google. Et donc on a presque un service similaire : avec votre adresse IP et votre user-agent, Google va pouvoir vous suivre sur tous les sites qui utilisent Google Fonts et donc exploiter ces donnée à des fins commerciales par exemple. Bref ça pue, ça apporte pas grand chose, alors ça dégage.
Je vous invite donc à éviter ce genre de CDN, et à lire cet article de Pepper & Carrot : « My fight against CDN libraries » .
mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )
Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).
Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.
Tu peux être plus explicite ?
Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).
▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress
Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.
Text-only news sites are slowly making a comeback. Here’s why. | Poynter
►https://www.poynter.org/news/text-only-news-sites-are-slowly-making-comeback-heres-why
▻https://www.poynter.org/sites/default/files/2017-09/Text+sites.png
These text-only sites — which used to be more popular in the early days of the Internet, when networks were slower and bandwidth was at a premium – are incredibly useful, and not just during natural disasters. They load much faster, don’t contain any pop-ups or ads or autoplay videos, and help people with low bandwidth or limited Internet access. They’re also beneficial for people with visual impairments who use screen readers to navigate the Internet. (Related: Designing Journalism Products for Accessibility.)
In recent months, Twitter, Facebook, and Google News have also published their own versions of stripped-down sites that use less bandwidth, mainly aimed at users in emerging markets who might not have access to faster network connections. Earlier this week, Twitter announced that it was now experimenting with an Android app designed to use less data for people with limited connectivity.
la cuisine du graphiste : Quelles #typo iraient bien ensemble ?
▻http://www.lacuisinedugraphiste.net/2017/09/quelles-typo-iraient-bien-ensemble.html
Le site est très complet et il permet de travailler les approches, les interlignages etc pour avoir une vision la plus fidèle possible de ce que l’on désire.
À noter que c’est conçu pour les travaux digitaux. Les corps sont en pixels, les styles sont en CSS…
►http://typecast.com est bien et a l’air plus complet et plus simple je crois (et pas que en pixels, on peut vraiment tout mettre en « em » et télécharger les CSS produites à la fin etc)
C’est sûr que c’est top TypeCast mais ►http://www.archetypeapp.com est très bien comme outil de base (et on peut tout à fait travailler en em ou en %, exporter les CSS ou même les intégrer dans Sketch). Il ne nécessite pas de s’enregistrer, permet avec le ratio des tailles de typos de faire un prototypage rapide, propose une aide pour choisir une police.
Comment devenir ergonome UX ? - romy.tetue.net
▻http://romy.tetue.net/comment-devenir-ergonome-ux
Vous êtes plusieur·e·s dernièrement à me demander comment devenir ergonome ou UX designer. Ces profils sont effectivement de plus en plus recherchés. Si ce n’est pas votre futur métier, ça peut être une corde de plus à ajouter à votre arc de dev front, de graphiste ou d’expert a11y.
Sans prétendre avoir la bonne réponse et sans chipoter sur la dénomination (ergonome ou UX designer, osef), je peux au moins témoigner de ce qui m’a forgée, en partant du principe que si vous me posez la question, c’est que vous souhaitez vous orienter vers quelque chose qui ressemble à mon job actuel, c’est-à-dire l’UX design ou conception centrée utilisateur/trices.
Les do-don’t de l’accessibilité - romy.tetue.net
▻http://romy.tetue.net/affiches-do-dont-accessibilite
Cette série d’affiches aide à concevoir pour tou·te·s en expliquant ce qu’il faut faire et ne pas faire (do & don’t) pour chaque type de déficience. Ces conseils simples et compréhensibles, généraux plutôt que trop prescriptifs constituent une excellente entrée en matière. À afficher, sans modération, dans vos locaux !
Chère @tetue , je profite que le sujet est ouvert : je voudrais pouvoir transmettre à mon éditeur, pour mon prochain roman, des recommandations pour qu’il soit plus facilement lisible pour les dyslexiques, c’est une sorte de promesse que j’ai faite à ma fille Adèle qui veut pouvoir lire le prochain. Existe-t-il une charte ? Et dans cette charte quelles sont les recommandations les plus importantes parce que je ne pourrais sans doute pas exiger toute la refonte de la maquette déjà existante.
Cet été, la discussion est venue avec Adèle en cherchant dans mes livres d’adolescent dans la maison cévenole ceux des livres qu’Adèle trouvait les plus lisibles. La maquette des Folio des années septante par exemple n’était pas sans donner des problèmes tandis qu’un tout petit éditeur qui n’avait pas du beaucoup se donner de mal avait produit quelque chose d’assez parfait du point de vue d’Adèle.
Par la suite, ayant lu de mon côté Rose-Ronce d’Eric Chevillard, l’ayant bien apprécié et me demandant si d’aventure ce ne serait pas du goût d’Adèle cette espèce d’actualisation d’ Alice au Pays des merveilles , j’ai eu à découvrir de la bouche d’Adèle que la maquette tellement sobre et belle des éditions de Minuit , c’était juste parfait, loué soit Garamond !
Bref, si tu as quelques ressources sur ce sujet spécifique, je suis ton public captif.
Amicalement
Phil
@philippe_de_jonckheere : pour en avoir discuté avec des enseignant·e·s, il y a autant de dyslexies, et donc de solutions, que de dyslexiques… Spour ça que l’approche est plutôt de laisser à chacun·e la possibilité d’adapter à ses besoins .
Il n’y a pas de police recommandée pour les dyslexiques :
►http://romy.tetue.net/quelle-police-pour-les-dyslexiques
Les seules recommandations visent à améliorer la lisibilité (marges, alignements, etc.) :
►http://romy.tetue.net/ameliorer-lisibilite-typographique
Et laisser chacun·e adapter à ses besoins, via des plugins navigateurs, etc. ou cette webapp du CNED :
▻https://accessidys.org
@tetue Mille mercis, je regarde. Dans le cas présent, il s’agirait d’un livre en papier et donc sans plugin. J’avais déjà noté les considérations typographiques (encore que je ne me résouds pas encore à Comic Sans, mais je remarque que le Garamond est généralement bien apprécié d’Adèle) et celles de la mise en page (notamment la justification qui ne serait pas top, j’aurais pourtant cru). Merci d’avoir pris le temps de répondre en tout cas.
