Cloud Four Dot Com: What’s New in 2022

We just shipped the largest update to cloudfour.com since our 2016 redesign in public and subsequent progressive web app features!

This time around, we had three main goals.

We’re still proud of the previous design, but six years is a long time when we’re honing our craft with each and every project. Our accessibility best practices have improved, our standards for readable typography are higher, our layouts are more dynamic and responsive thanks to the purpose-built power of CSS Grid.

So while the goal wasn’t a top-to-bottom redesign, this new update is more accessible, readable, engaging and responsive than what came before… in other words, more representative of what we can achieve today.

A few of my favorite touches:

• We completely revised our color palette, improving contrast across the board and inspiring a revised set of iconography and illustrations.
• Our animations and transitions stop or calm down if you’ve opted into reduced motion.
• The article listings are a lot more fun to browse now that all feature images are displayed.
• Our improved subscription UI is easier to find and offers better user feedback than before.
• Comments are more readable, with clearer threading and flags for article authors and Cloud Four team members.
• Team member pages now show what talks they’ve presented in addition to the articles they’ve written.

Like many agencies, we sometimes suffer from the classic problem of “the cobbler’s children have no shoes.” How do we prioritize time for our own web site when there’s so much to do for our clients? And how do we avoid losing too much of that time to chores like environment setup, dependency updates or re-reading old documentation?

Our solution was to embrace some of the tools and features that have debuted since our last big update:

• We replaced our home-grown design system docs with Storybook. This removed one of the largest maintenance burdens while also allowing us to write our component markup in the same templating language as our WordPress theme, which means we can directly import it.
• We rely on GitHub Apps and Actions to do as much of the robot work as possible. Our pattern versioning, change logs, dependency updates, automated tests and deploys are all done via pull request now.
• Setting up the WordPress site locally with SSL (a requirement for service workers) while keeping database content in sync used to take dozens of steps. Now we use Local, with just a few extra steps to set up Git for the first time.
• Our WordPress theme now supports the “Gutenberg” block editor for pages and articles, encouraging richer article content without the need for custom templates or code changes as often.

We went into this project with a sizable wish list of post-launch features. This allowed us to design components with future capabilities in mind: For example, our comment component is ready for web mentions whenever we decide to implement them, our theming strategy will be a good springboard for a dark mode, and our author component already supports co-authored articles.

So while the substance of the site is largely the same as before, the combination of forward-thinking components, balanced tech debt, automated chores and simplified contributions should set the stage for future updates. We hope you’ll stay tuned to see!