[go: up one dir, main page]

Kontrastor 82M – Dynamic Cascading Style Enhancer

Style Mixer Tube Style Mixer Tube Style Mixer Tube
Skip to main content
Matthias OttWeb Design Engineer
  • Home
  • Notes
  • Articles
  • Newsletter
  • Workshops
  • Links
  • About

Links

  • #a11y (10)
  • #accessibility (5)
  • #agile (1)
  • #algorithms (1)
  • #animation (3)
  • #apps (2)
  • #architecture (1)
  • #articles (1)
  • #automation (1)
  • #basics (2)
  • #books (3)
  • #branding (1)
  • #browsers (1)
  • #build pipeline (1)
  • #business (2)
  • #carbon management (1)
  • #chrome (1)
  • #climate (2)
  • #climate action (1)
  • #climate change (2)
  • #code (6)
  • #color (2)
  • #component libraries (1)
  • #components (3)
  • #compression (1)
  • #craft (1)
  • #css (14)
  • #css grid (1)
  • #culture (3)
  • #dark mode (1)
  • #dashboards (1)
  • #data (2)
  • #data visualization (1)
  • #dataviz (1)
  • #dependencies (1)
  • #design (29)
  • #design thinking (2)
  • #design-systems (6)
  • #development (7)
  • #devices (1)
  • #economy (1)
  • #education (1)
  • #energy transformation (1)
  • #engine (1)
  • #enhancement (1)
  • #flexbox (2)
  • #font (1)
  • #fonts (2)
  • #footer (1)
  • #foundations (1)
  • #freelancing (1)
  • #gallery (1)
  • #game (1)
  • #git (1)
  • #github (1)
  • #graphics (1)
  • #grid (2)
  • #grunt (1)
  • #handbooks (1)
  • #head (1)
  • #history (2)
  • #hosting (1)
  • #html (4)
  • #hypertext (1)
  • #ia (1)
  • #icons (1)
  • #image (4)
  • #image optimization (1)
  • #inclusive design (2)
  • #indieweb (2)
  • #information (2)
  • #inspiration (1)
  • #iterative (1)
  • #javascript (4)
  • #js (1)
  • #language (1)
  • #layout (6)
  • #leadership (2)
  • #learning (3)
  • #machine learning (1)
  • #media (1)
  • #media- (1)
  • #meta (1)
  • #modular (1)
  • #navigation (1)
  • #newsletters (1)
  • #optimization (1)
  • #organizations (1)
  • #pattern libraries (6)
  • #performance (6)
  • #perspective (1)
  • #physics (1)
  • #picture (1)
  • #platform (1)
  • #polyfills (1)
  • #postels-law (1)
  • #principles (4)
  • #process (6)
  • #progressive (2)
  • #progressive-enhancement (1)
  • #prototyping (4)
  • #public speaking (1)
  • #pwa (1)
  • #reference (2)
  • #renewables (1)
  • #resource (3)
  • #responsibility (1)
  • #responsive (4)
  • #robots (1)
  • #rss (1)
  • #rwd (4)
  • #sass (1)
  • #science (1)
  • #semantics (1)
  • #sketching (1)
  • #social (1)
  • #society (1)
  • #space (1)
  • #static generators (1)
  • #style (1)
  • #style guides (1)
  • #styleguides (9)
  • #svg (3)
  • #systems (1)
  • #tags (1)
  • #takebackyourweb (2)
  • #talks (2)
  • #teaching (1)
  • #technology (2)
  • #terms (1)
  • #testing (1)
  • #theory (1)
  • #tools (7)
  • #training (1)
  • #type design (1)
  • #typefaces (1)
  • #typography (7)
  • #ui (8)
  • #ui engineering (1)
  • #user experience (1)
  • #ux (7)
  • #variable fonts (1)
  • #web (13)
  • #Web (1)
  • #web design (1)
  • #webfonts (3)
  • #webmention (1)
  • #webp (1)
  • #websites (2)
  • #wireframes (1)
  • #workshops (1)
  • #World Wide Web (1)
  • #writing (1)

Entries tagged with #ux.

↳ Show all entries

🔗 Dark Mode: How Users Think About It and Issues to Avoid

https://www.nngroup.com/articles/dark-mode-users-issues/

An in-depth look at dark mode. Summary: it is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.

  • #ui
  • #design
  • #a11y
  • #accessibility
  • #ux
  • #dark mode

🔗 Card Sorting: Uncover Users' Mental Models for Better Information Architecture

https://www.nngroup.com/articles/card-sorting-definition/

Card sorting is an effective technique to understand if your information architecture matches the mental model of your users. This article by @kwsherwin covers all the basics.

  • #testing
  • #ux
  • #ia
  • #navigation

🔗 Fiber – a free, interactive UI Kit by Framer

https://framer.com/

“Every artboard in the Fiber UI Kit features customizable elements, all hooked up to interactions in Code. Customize text, images and animation values to create your own social prototype. Or pull apart native scroll, swipe and slider components for separate projects.”

  • #ui
  • #ux
  • #prototyping
  • #tools
  • #resource

🔗 Smooth Scrolling and Accessibility, by @_hmig

https://css-tricks.com/smooth-scrolling-accessibility/

Regardless of how you implement smooth scrolling, there are a few accessibility issues that should be addressed: focus management and animation.

  • #a11y
  • #ui
  • #ux
  • #javascript
  • #animation

🔗 Accessible Tooltips & Toggletips | Inclusive Components by @heydonworks

https://inclusive-components.design/tooltips-toggletips/

In this article, Heydon Pickering looks at situations which might call for a tooltip or else a toggletip, and formulates inclusive implementations for each.

  • #ui
  • #components
  • #a11y
  • #ux

🔗 Design Principles, collected by Jeremy Keith (@adactio)

https://principles.adactio.com/

A huge collection of design principles from various disciplines. 

  • #design
  • #principles
  • #ux
  • #ui
  • #user experience
  • #theory

🔗 Accessible SVGs

https://css-tricks.com/accessible-svgs/

Impressively comprehensive article by @_hmig about creating accessible SVGs in order to ensure a great user experience for everyone.

  • #a11y
  • #ux
  • #code
  • #svg

Get in touch!

mail@matthiasott.com +491776546175

Click here!

  • Home
  • Notes
  • Articles
  • Newsletter
  • Workshops
  • Links
  • About
  • /now
  • /uses

Socialize!

  • RSS Feed
  • Mastodon
  • Bluesky
  • Threads
  • Instagram
  • LinkedIn
  • Xing
  • GitHub
  • CodePen
  • YouTube
Matthias Ott 

Legal Information

  • Webmention endpoint
  • Privacy Policy
  • Site Notice / Impressum

Design and code © 2007–2026 Matthias Ott • Made with HTML, CSS, enhanced with JavaScript, powered by Craft CMS • Set in NaN Tresor and NaN Tragedy •