Every interface you use is built on a quiet but crucial choice: vertical or horizontal cards. This hidden decision shapes how we see, scroll, and interact with content every day.
Vertical vs. Horizontal Cards: The UX Tradeoffs That Shape Modern Interfaces Read More »
Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found. By default, ::search-text matches are yellow while the current target (::search-text:current) is orange,
How to Style the New ::search-text and Other Highlight-y Pseudo-Elements Read More »
We all have a few skeletons in our CSS closets. There’s probably that one-off !important where you can now manage that more effectively with cascade layers. Or maybe a dated Checkbox Hack that :has() has solved. Perhaps it’s been a long while since your last site redesign and it’s chock-full of vendor-prefixed properties from 2012.
Have you ever set z-index: 99999 on an element in your CSS, and it doesn’t come out on top of other elements? A value that large should easily place that element visually on top of anything else, assuming all the different elements are set at either a lower value or not set at all. A
Unstacking CSS Stacking Contexts Read More »
I was building a Modal component that uses the <dialog> element’s showModal method. While testing the component, I discovered I could tab out of the <dialog> (in modal mode) and onto the address bar. And I was surprised — accessibility advice around modals have commonly taught us to trap focus within the modal. So this
There is No Need to Trap Focus on a Dialog Element Read More »
Modern UI design is torn between two opposing forces: clarity and density. Minimalism promised calm, but often hides complexity—while dense interfaces like Figma or Notion prove chaos can be “beautifully organized”. This piece dives into the uncomfortable truth every designer faces: when does clarity stop helping and start dumbing things down?
Density vs. Clarity: The Core Tension in Modern UI Design Read More »
Five years ago I published an article on how to create a responsive grid of hexagon shapes. It was the only technique that didn’t require media queries or JavaScript. It works with any number of items, allowing you to easily control the size and gap using CSS variables. CodePen Embed Fallback I am using float,
Responsive Hexagon Grid Using Modern CSS Read More »
The @custom-media at-rule has landed in Firefox Nightly! I couldn’t find it in the release notes but Adam Argyle’s on the beat noting that it’s behind a flag for now. Look for layout.css.custom-media.enabled I often forget the exact name of an @media query or simply get tired writing something like @media screen and (prefers-reduced-motion: no-preference)
Open Props @custom-media Recipes Read More »
Agentic AI stands ready to transform customer experience and operational efficiency, necessitating a new strategic approach from leadership. This evolution in artificial intelligence empowers systems to plan, execute, and persist in tasks, moving beyond simple recommendations to proactive action. For UX teams, product managers, and executives, understanding this shift is crucial for unlocking opportunities in
Beyond Generative: The Rise Of Agentic AI And User-Centric Design Read More »
“Learn 10 proven UX design tips to improve user experience, boost engagement, and increase conversions. From usability testing to A/B testing strategies.” Continue reading 10 Tips for Effective User Experience Evaluation on SitePoint.
10 Tips for Effective User Experience Evaluation Read More »
