Rule29

As a B Corporation®, Rule29 is committed to accessibility. We had the challenge of making sure the site met AA ADA requirements, while also looking fresh. On the developer side, that means making sure symantic html is used, that the CMS is creating valid syntax trees, that keyboard navigation is clear and easy, and that alt text and other ARIA roles are clearly presented to the user.

On the design side, we needed to make sure the text-to-background color contrast ratio was ample, that videos had transcripts or captions, that outbound links were clear, and that site links were clear.

At the onset of building the site, I worked with the eagle-eyed designer, Susan Herda, to create a list of sitewide styles. This included brand colors, gradients, fonts, button radii, image radii for desktop and mobile, a list of loading animations.

These lived as a design system in global CSS variables, so any adjustments during the project or after handoff would be consistent throughout the site.

Rule29 got its start as a print-first design agency. Their designers are some of the best, but they were still learning how to design for a canvas with an unknown size: the screen. I worked with the design team to develop a responsive design system that would make their work look good no matter the device. This effort includes fluid typography and size conditional layouts.

One of the recent trends in web design is a catchy hero video. Done incorrectly, these can severely impact key performance metrics, like LCP, that affect user experience and search ranking. I created an encoding preset that kept video quality and sharpness, while shrinking the video to 4MB.

All images use Storyblok's image engine to optimize for quality, size, and focus of subject matter.