Cross of Grace
Brand, Design, Development
Summary
- As the utility of one website is winding down, another is aiming to take its place.
- Take a look into my process real-time as I jot down what I hope to accomplish and share some visuals from this in-flight case study.
Background
Several years ago I built a custom WordPress theme for Cross of Grace’s church website and loaded it with responsive templates, shortcodes, a custom plugin and a custom post type to manage sermon series and a podcast. I also worked on the site’s architecture and content strategy. I think WordPress is a great platform, but time has proven that it can be difficult to maintain code that is reliant on and deeply integrated into the system. Many other functions of the site are plugin dependent too.
Now it’s time to reconsider where those capabilities live, and I’m capturing that process here as an evergreen case study.
Objective
I’m aiming to create a new WordPress theme that focuses more on the presentation of the website and less on the function. This might sound a little counterintuitive so let me explain. It’s not that I don’t want the theme (or even WordPress instance) to have a certain level of function or capability, rather I’d like the website to skew more towards a consumer of functionality instead of the source of it. If there’s a particular faculty you want a WordPress site to have it’s almost a guarantee there’s a plugin to do it—from experience I’m just not convinced that this is always where the capability should lie.
It should go without saying, but I’ll also be making everything about the theme (and site) as accessible and performant as I can. Aside from development I’ll make new considerations for the site architecture and content strategy.
Method
Here’s how I’m planning on satisfying the objective:
- Instead of updating or creating a new custom post type to manage sermon series, I want to find an existing tool that’s specifically for podcasts and integrate the feed into the website. So far I’m considering Libsyn.
- Rely less on WordPress plugins and leverage APIs or custom scripts instead.
- New design and layouts that use flexbox, CSS grid and CSS variables when it makes sense (if I think of any other buzzwordy things I’ll be sure to add them too). I didn’t rely on any frameworks previously and plan on keeping it that way.
- I’ve been using Sketch since it was in beta, but for this project I’m running with Figma so that design, prototyping and annotations live in one place.
- WCAG 2.1 AA will be the site’s accessibility standard. I’ll be doing both manual and automated scans during and post development.
- To address performance I want to leverage system fonts, have a better build process for concatenation and minification, and explore WebP for image assets.
- Analytics and content strategy reviews.
- I’m hoping to learn a few other things along the way, perhaps about caching and performance in general.
Outcomes
Stay tuned!