Design

Common animation transitions

Entry categories Accessibility • Design

A while back when reviewing common animation transitions for pages & elements I compiled a massive list of web-based motion and how I recommend you use them. Remember, using a ‘prefers-reduced-motion’ fallback doesn’t mean you must remove all animation. Reduce X or Y pixel movement and keep transition speeds gentle. Crossfades, color shifts, and blurs […]

Roll Your Own Sketch Library Subscription

Entry categories Design

Unless you’ve been living under a design rock, Design Systems are all the rage. I won’t get into all the benefits here, but Design Systems keep teams, designs, developers, and experiences all in sync. And that’s great. However, what’s less great is that design assets often fragment quickly, and files with names like “design_final” or […]

Cross-platform Dynamic Wallpapers

Entry categories Design • Mods

This week snuck up on me, so I’ll be taking a break this from the Accessibility Jumpstart series to make sure I provide a quality resource for week 4. Dynamic wallpapers Dynamic wallpapers were first introduced in MacOS Mojave, and the time-lapse library Apple provides has been growing. Some clever people have reverse engineered the […]

Color Input Compared Cross-Browser

Entry categories Design

As you may know, many of the HTML5 input types have been defined, but do not have a recommended or consistent experience across operating systems, nor browsers. Recently, the team at work and I discussed whether we should use the default HTML5 input type of ‘color’ or roll our own. As of December 2020, here’s […]

Comparing CSS Width Units

Entry categories Design

Ever wanted to know what every CSS unit looked like when compared to one another? Yeah, me too. See the Pen Various sizing units compared by Chris LaChance (@chrislachance) on CodePen. Looks like ‘Inches’ is naturally the widest fixed unit. Beyond the ‘Pixel’ value for fixed widths, none of the others seem that practical as […]