Articles

On occasion, I write articles on design and development topics like animation, SVG, CSS, and workflows. Feel free to share them, and please hit me up with any questions you have.

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

Using overflow to align oddly-sized SVGs (like avatars and icons)

A row of three avatar images featuring cartoon faces looking at each other.

When building interfaces, it's common to have a series of SVG (Scalable Vector Graphics) images that need to be aligned in some way, but the composition of the assets doesn't easily allow for it. Sometimes, you know this from the start and can plan accordingly. But other times you have to accommodate graphical changes mid-project that can be a mess to deal with.

In this article I'm going to dive into this issue and show an interesting way we can solve it by laying out our graphics a certain way in Adobe Illustrator and then displaying them on our page by modifying the CSS overflow property.

Read Article

More Articles