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
]]>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
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.
]]>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
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.
]]>Timeline Me
TimelineMe - ââ»http://mickaelr.github.io/jquery-timelineMe - est un plugin jquery qui permet dâafficher des informations sur une ligne de temps.
]]>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.
]]>Millennials Are Screwed
â»http://highline.huffingtonpost.com/articles/en/poor-millennials
#amazing #mise_en_page #scrollytelling #jeunesse #dette #WTF #Etats-Unis #travail #Uber
]]>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 !
]]>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 » .
]]>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âŠ
]]>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 !
#css avancé : métriques des fontes, #line-height et #vertical-align - Vincent De Oliveira
â»http://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align
Line-height et vertical-align sont des propriĂ©tĂ©s trĂšs simples. Tellement simples que la majoritĂ© dâentre nous sommes persuadĂ©s de savoir comment elles fonctionnent et comment les utiliser. Mais non. Elles sont vraiment tout sauf simples, voire les plus complexes, puisquâelles ont un rĂŽle important dans la crĂ©ation de lâune des choses les moins connues de CSS : le contexte de formatage inline (inline formatting context)
]]>Une liste dâoutils dont quelques uns bien pratiques
â»http://www.sansfrancis.co
#webdesign
Tilt Hover Effects | Demo 2 | Codrops
â»http://tympanus.net/Development/TiltHoverEffects/index2.html
Une liste de Styleguides UI/UX
â»http://usabilitygeek.com/usability-user-experience-user-interface-guidelines-companies-2016
Une liste de Styleguides UI/UX Design de grandes marques. VoilĂ ce quâon peut faire avec du budget et du temps. â»https://t.co/YRWxV5VEIb
]]>An In-Depth Overview Of Living Style Guide Tools â Smashing Magazine
â»https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools
Living Style Guide Tools. â»https://t.co/uJfsj4AZ0R
]]>50 Style Guide Tools, Articles, Books and Resource
â»http://webdesign.tutsplus.com/articles/50-style-guide-tools-articles-books-and-resources--cms-21209
50 Style Guide Tools, Articles, Books and Resources. â»https://t.co/sOAbLNLeDs
]]>Les #masques #CSS â 24 jours de web
â»http://www.24joursdeweb.fr/2013/les-masques-css
Le masquage est une technique de composition qui permet de combiner plusieurs images en une seule, oĂč lâune des images va ĂȘtre utilisĂ©e pour masquer certaines parties des autres. Pour parler simplement, la premiĂšre image correspond Ă lâĂ©lĂ©ment graphique (la source) qui peut ĂȘtre composĂ©e dâimages, de textes, de vidĂ©os ou de nâimporte quel autre contenu de notre page web. La seconde image est le masque et va agir comme un pochoir pour ne laisser visible quâune certaine partie de notre source graphique.
Il existe deux catégories de masques :
Les masques basĂ©s sur une forme vectorielle dĂ©finissant la zone visible de lâĂ©lĂ©ment, câest ce quâon appelle le clipping.
Les masques basĂ©s sur une image en niveau de gris dĂ©finissant quelles parties dâun Ă©lĂ©ment sont masquĂ©es et quelles parties sont visibles, câest le masking.
Si vous ĂȘtes habituĂ©s Ă utiliser les masques de Photoshop, vous pouvez facilement assimiler que le masking correspond aux masques de fusion alors que le clipping correspond aux masques vectoriels ou 1-bit mask.
]]>Every website looks the same, and thatâs ok | Webdesigner Depot
â»http://www.webdesignerdepot.com/2015/10/every-website-looks-the-same-and-thats-ok
Surely youâve noticed by now that most websites for design agencies, designers, startups, or even products, and personal blogs all look a bit... similar. Even Tags: #webdesign
]]>Non, les designers du web ne sont pas des artistes - Deadly Breakfast
â»http://weblog.redisdead.net/main/post/2015/08/28/Non-les-designers-du-web-ne-sont-pas-des-artistes
Les web/UX designers ne sont pas des artistes. PitiĂ©, arrĂȘtez de nous considĂ©rer comme tels, ça nous fatigue ! Nous sommes des scientifiques.
]]>Typographie et contraintes en design : Matthew Carter
â»https://www.ted.com/talks/matthew_carter_my_life_in_typefaces
Le créateur des polices Verdana et Georgia revient sur son parcours à travers le prisme des contraintes de la technique.
via Thomas P.
]]>â»https://louderthanten.com/articles/story/design-machines
Un regard un peu critique sur les causes de lâuniformisation de la conception web (design et contenu) et les risques de son automatisation via lâia (cf Squarespace et The Grid).
Moins fan de la fin et la conclusion, mais jâai plutĂŽt bien aimĂ© lâarticle.
#design #webdesign #print #automatisation #ia
]]>Refonte radicale de Paris.fr
â»http://romy.tetue.net/nouveau-site-paris-fr
Refonte agile, centrée utilisateur et design radical pour le nouveau site paris.fr, moderne et lisible, en moins de pages et plus de fun !
[âŠ]
Telle refonte nâest possible quâen travaillant en Ă©quipe, sur place, en impliquant la participation de tou·te·s, commanditaires compris, en mĂ©thode agile Scrum, seule façon — jâen suis convaincue pour le vivre sur un projet semblable — de secouer suffisamment lâinstitution pour aboutir Ă ce rĂ©sultat, contemporain, fonctionnel et utilisable.
]]>Legibility â Optional — Medium
â»https://medium.com/@colm_roche/legibility-optional-764710e769f4
When creating a website, thereâs a mental checklist a designer might run through⊠is this engaging?, is it easy to understand?, is it on-brand?⊠but the very first, no-brainer point is, can people read it?
Yet, Microsoft, a $340 billion company with âan army of designers, researchers, developers, prototypers, typographers, program managers, ethnographers, writers and creative thinkersâ, has completely illegible text on their homepage.
]]>breaking the grid
â»http://lmdefr-design.tumblr.com
Le design de la plateforme de publication Medium, (qui, pour mĂ©moire, est un projet de Twitter), est incontestablement innovant et soignĂ©. Avec une attention toute particuliĂšre pour le confort de lecture et au plaisir de lâĆil.
De ce fait Medium propose Ă ses utilisateurs une interface en constante Ă©volutions, non par lâajout de gadgets supplĂ©mentaires, mais par lâajustement continu de ses interfaces dâĂ©dition et de lecture. Un travail qui plus est documentĂ© dans la publication Designing Medium.
Dans un article rĂ©cent, Marcin Wichary nous explique ainsi comment et pourquoi lâĂ©quipe de design de Medium en est venu Ă rĂ©inventer le soulignĂ© de liens hypertexte de Medium.
]]>Webdesign : 7 tendances futures
Bon, titre « tarte Ă la crĂšme », mais y a des choses Ă piocher dedans.
â»http://fr.tuto.com/blog/2015/06/webdesign-7-tendances-futures.htm
]]>Design et refonte de site média : les bonnes pratiques
Une prĂ©sentation par lâagence Datagif sur le design des sites mĂ©dias. Au travers de cas concrets, câest toujours intĂ©ressant.
â»http://www.blogdumoderateur.com/design-site-media-bonnes-pratiques
#webdesign #graphisme #interface #ergonomie #usability #média
]]>A Practical Guide to SVGs on the web
â»https://svgontheweb.com
This page accompanies a talk given by Jake Giltsoff at Breaking Borders on the 16th of June 2015. It outlines some techniques you can use to prepare, implement, and work with SVGs on the web.
#svg
]]>