“ux” Articles

Have you ever had to implement a modal dialog with a close button designed to hang off of the corner?

While not a huge lift for most developers, there’s a few steps involved. It also requires extra care to avoid accessibility gotchas. I did this recently and wondered if there was a simpler approach using modern CSS.

Something I started doing lately is using the padding of a <label> element to create the space between it and an <input> instead of a margin or grid/flexbox gap. I’m sure a bunch of people already do this, but it’s something that only recently dawned on me.

The <table> element is one of the oldest and most-common elements on the web. But it's also been long overlooked in terms of receiving new CSS features and quality-of-life improvements, unlike other elements that tend to get more love and attention.

I think it's time for the <table> element to get a few CSS improvements of its own. Here's three features that I'd like to see.

I recently needed to test the support of a dynamic accessible description – a element’s description that is initially one (or no) value, then changes to another value after an action takes place.

I created a page of examples to test and a document to record my findings, but then realized that I could just make this a blog post that I periodically update. That way, others can use it as a reference as well, if they choose.

Recently, I added a dark mode setting to my website. Dark mode is a color theme feature that’s pretty common these days. Letting users adjust the color of content so it’s easier to see is a nice usability improvement.

Many developers I follow have written great articles about their implementations, which are full of valuable insight. To name a few: Hidde de Vries, Sarah Fossheim, and Josh Comeau all have smart approaches with valuable takeaways.

However, I decided to take a slightly different approach than a lot of the solutions I’d seen – a progressively-enhanced version that works with or without JavaScript (JS).

Last year, I worked on a project which contained a reorderable list component – essentially, a group of items that users can rearrange in any order. Though I had no prior experience designing such a pattern, the end result worked well for our purposes. But I was sure that my lack of familiarity meant that there were improvements to the usability and experience that I could implement for the future.

As a result, I dove deep into the pattern – learning, creating, and testing versions of it to deduce as much as I could. In this article, I'm going to channel my findings into how we can create a reorderable list with a great user experience (UX).

The title element is often one of the first elements covered when learning HTML. But because changing a page’s title is trivial, many website creators mistakenly view it as optional or purely decorative, leaving it neglected. But the truth is that the title is a functional element that aids users in a variety of situations.

This is part 2 of an article series on the title element, where we’ll review some best practices that give a title its meaning and usefulness.

The title element is often one of the first elements covered when learning HTML. But because changing a page’s title is trivial, many website creators mistakenly view it as optional or purely decorative, leaving it neglected. But the truth is that the title is a functional element that aids users in a variety of situations.

This is part 1 of an article series on the title element. Here, we’ll look at what this element is and does, and how it affects a user’s experience.