Skip to main content
Back home Home

About David Luhr

Contact me

My background

I’m a huge fan of semantic HTML, maintainable CSS, responsible JavaScript, and accessibility. Everything I make is based on core principles of accessibility first, universal design, essentialism, and progressive enhancement.

I’m currently UX Development Manager at DockYard, a fully-remote digital product agency, where I lead UX development and product design teams. I was previously a UX Developer and worked closely with design, engineering, and QA teams to build complex and accessible UI. My projects have centered on building and maintaining robust design systems and architecting performant markup and styles that scale.

Before DockYard, I was Senior Web Designer and then UX Lead at Westminster College, in Salt Lake City, Utah. I oversaw Westminster’s UX design, front-end development, accessibility, content strategy, and web governance. In these roles, I sketched, mocked-up, prototyped, coded, and user-tested designs. I also conducted user research to inform information hierarchy and UI design. These cumulative efforts produced a 15% increase in academic applications and a 22% drop in global average bounce rate.

Outside of my full-time role, I create videos for my YouTube channel, Build UX, which focuses on expert HTML, CSS, JavaScript, accessibility, and designer-developer collaboration. Each video series focuses on refining designs in Figma and taking them from static mockups to robust and accessible user experiences.

About this site

My portfolio site is a showcase of my favorite tools and approaches, with a focus on accessibility and simplicity that doesn’t compromise on polished visuals.

I used Figma for the design, and the evolving design files are open-source for public viewing. My design process focuses on componentization with a design system structure based on Brad Frost’s Atomic Design.

The code for this site is also open-source. I used Eleventy, a simple static site generator, which allows me to write semantic HTML with no bloat and no JavaScript bundle. I considered using Sapper, the official framework for Svelte, due to its conveniences and very small compile size, but found that the SPA-like routing was inaccessible. Although I would prefer to take advantage of components wherever possible, I decided a flat-file-esque approach with Eleventy was the best choice for a universally great user experience.

On the styling side, I opted for a single CSS stylesheet without any pre- or post-processor dependencies, and took advantage of CSS custom properties (variables) and CSS Grid throughout. I faithfully followed BEM methodology for class naming, save for some instances of algorithmic layout inspired by Every Layout’s Stack component. To optimize performance, I progressively enhance the typography to use variable fonts if they are supported.

I had an opportunity to employ some of my favorite accessibility and usability patterns. All interactive elements have custom, dedicated focus styles and are fully keyboard accessible. Card elements use Inclusive Component’s pseudo-content trick to ensure link text is unique. The light and dark theming detects the user’s preferred OS color scheme to provide a sensible default, while still allowing for customization. For elements that rely on hover/focus states to reveal content, I have a fallback-first approach of showing all content by default, and only enhance the experience if I detect hover is a supported device interaction.

As a fan of the Rule of Least Power, I refrained from writing JavaScript unless it was needed for an optional enhancement. I only used JavaScript to create a simple state machine that handles toggling the light and dark themes. The state machine is inspired by David Khourshid’s XState library, but is a simple, dependency-free implementation.

Lastly, this website does not have any analytics or tracking. Enjoy!