Refreshing a Blog for a WordPress Legend!

It's not every day you get to work with a legend in your industry. In this article I'll show you how I transformed the blog of one of the most important contributor's in WordPress' history!

Case Studies

Website banner featuring a smiling man named joost de valk with a short description about his work in improving web standards and seo, set against a blurred green background.

Kyle Van Deusen

OGAL Web Design owner and WordPress educator helping businesses succeed with design, development, and marketing since 2003.

Filed Under: Case Studies

It’s not every day you get the opportunity to work with someone who has contributed so much to WordPress, and it’s been a complete honor to work with Joost de Valk, the founder of Yoast SEO (which is active on over 12 million websites!).

Joost recently sold Yoast (though he remains active on their board), and is now transitioning to the next phase of his career; speaking, consulting, and investing in WordPress & tech companies.

He already had a website set up to promote his latest ventures, but he felt that it was lacking the polish and professionalism deserving of his new main focus (and reflecting his extensive contributions to our industry already).

After connecting this summer through a mutual acquaintance, we began the process of a “design refresh” to modernize his website and get it to a place where it matched his stature in the community.

I’m absolutely thrilled with the results, so I wanted to take a moment to share a few of the highlights.

The Design Refresh

Not wanting to do a complete overhaul, the objective of this project was to simply polish up what Joost already had in place. This meant we would keep the overall branding of the existing website, but clean it up a bit to give it a more professional and custom look.

Here’s what the website looked like when he came to me:

A screenshot of Joot's homepage prior to working with me

There was nothing “wrong” with the design — but it felt a little generic and uninspiring.

With some simple tweaks, I came up with a more professional and polished look.

A screenshot of Joost's website after the design refresh.

By removing the background from his headshot in the banner, adding some design accents, and designing some cards below the hero, the site immediately felt more high-end and custom.

We carried the same design motif throughout the entire website, including an improved color palette, design accents, and typography.

A screenshot of Joost's new About page.
About
A screenshot of Joost's new blog post template.
Blog Post
A screenshot of Joost's new blog feed page.
Blog Feed
A screenshot of Joost's new Marketshare report.
CMS Market Share Report

Implementing a Design System

Creating a good looking website is one thing — but maintaining the website’s consistency over time is another.

It’s not uncommon for websites to degrade over time. As new elements are added, the design can start to become disjointed — especially if the original designer isn’t making the updates.

That’s where a design system comes into play — and I had just the thing for Joost!

GeneratePress and GenerateBlocks make this easy by utilizing a combination of Patterns, Global Styles, and a custom child theme. With these tools at my disposal, I was able to create a stable of premade elements that can be dropped into the website anywhere without the risk of deviating from the design system.

A screenshot of local patterns on the Joost blog.

This gives Joost complete freedom to add new pages, posts, or elements as his business grows and changes over time (which every business does!).

The extra effort that goes into creating these patterns and styles is well worth the investment for how much it can extend the life of a website (which is typically less than 4 years).

Website Performance (and Core Web Vitals)

As you can imagine, SEO is important to Joost. One key component to successful SEO is website performance — which was considered in every aspect of this build.

Good performance starts with a strong foundation — and that’s why I build using GeneratePress and GenerateBlocks.

A block-based website combined with a lightweight theme is a great way to get the best performance out of everything else you build on top of it.

On top of that foundation, I used svg and webp files to reduce the overall size of the image files, minimal Javascript, and hosted fonts locally to ensure the best performance possible.

And it worked!

Here’s a look at some of the performance metrics for the refreshed website:

A screenshot of a performance test with a 99% score.
PageSpeed Insights & Core Web Vitals
A screenshot of a performance test showing a total load time of 768ms.
GTMetrix Page Details
A screenshot of a Core Web Vitals report showing a LCP of 691ms, 0ms TBT, and 0 CLS.
Core Web Vitals

This was also my first project to launch on the Strattic headless WordPress setup. While I was able to achieve perfect scores even without a static site, it’s good to know that my stack works fine in a headless environment.

Project Outcome

The refresh process ended up taking us just about 3 weeks to complete, including the transfer over to Strattic and extensive testing.

Having a high-profile client meant there would be a lot of eyeballs on it at launch — and we have received a lot of positive feedback across social media already.

Here’s what Joost had to say…

“It’s been an absolute pleasure working with you. So it’s not going to be the last time either 

And, he wasn’t kidding! We’re currently working on a second project together now, which just got underway. I’ll be sure to post about it once the job is completed!

More Resources & Insights to Help Grow Your Business

We believe informed website owners make better decisions — so we are dedicated to providing ongoing education to help you succeed online!

A laptop on a wooden table displaying a website titled "we focus on your path to financial success," featuring a slogan and an image of wind turbines.

A fresh coat of paint and a 470% increase in website speed

How a team of California-based investment advisers transformed their web presence to reflect the success they bring to their clients

Professional portrait of a caucasian middle-aged male lawyer in a dark suit, white shirt, and red tie, with a confident smile, on the "about" page of a law firm's website. he stands against a light background.

Maximizing Speed and Efficiency: Clanton Law’s Shift to a Block-Based Website

By investing in website speed improvements and predefined content building blocks the Clanton Law Office website now serves as a professional, reliable, and high-performing online presence, helping them attract and retain clients. 

Termageddon website before and after screenshots

50% Increase in Sign-Ups in Just 30 Days with New Website

"Kyle set a new standard for what I expect out of a web designer with this experience!"

Most Websites Fail!

Let me help you avoid the mistakes that doom most projects before the first pixel is ever published!