“ux” Articles

Progressively-enhanced dark mode

Three radio buttons labeled "Auto", "Light", and "Dark". The left half of the screen has a light background with the radio buttons dark, the right half has a dark background with light radio buttons.

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).

Read Article

Designing a reorderable list component

A list item being dragged within a list of items

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).

Read Article

Functional title elements, part 2

An oversized browser tab with the text label "Page Title"

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. If you missed it, check out part 1 where I cover some functional uses of the title element. Here, we’ll review some best practices that give a title its meaning and usefulness.

Read Article

Functional title elements, part 1

An oversized browser tab with the text label "Page Title"

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.

Read Article