A new version of the CoffeeGeek website – our seventh in our website’s 23 year history – is incoming. And I’m quite excited about it!
We have four distinct goals with this 2024 CoffeeGeek website design:
- Increase the site’s accessibility to the best possible standards
- Improve our website’s responsive design for mobile, tablets, and even ultra-wide screens
- Improve our site speed dramatically
- Build a core to bring back our website’s community features.
I’ll get into all four of these later on. But first, being a history nerd, I have to establish some history and background.
Design and Programming Choices
When my small team of five people completely overhauled the CoffeeGeek website in 2021, we faced a multi-page list of challenges to bring our website up to modern standards. Mobile accounted for nearly 40% of our traffic in 2020 (when the decision was made to update our website), but nothing about the pre-2021 version of CoffeeGeek was “mobile friendly”. We also made the decision to move from our own in-house CMS system (called WIPS, which still remains a very unique system) to a site based on WordPress (though highly customized). That meant losing two of our main community features: consumer product reviews, and our forums.
We learned a lot of lessons during that complete overhaul. For instance, designing a blog is actually pretty easy these days: WordPress has a gazillion predesigned “themes” that can easily be modified to give a slightly custom look, and one that’s well organized and requires almost no design or coding experience or expertise. The vast majority of blog sites do just that.
We didn’t want to do that. One thing that always set our website apart is we didn’t look cookie cutter. Also… we couldn’t do that. CoffeeGeek has so much diverse content that it required its own style, layout, and structure. Off the shelf just would not work for this website.
The Five Blogs
Also, we weren’t just designing a “blog” site. To use that term loosely, CoffeeGeek is five very complex “blogs” married together in a fluid interaction. Most websites these days in the coffee sphere are just that: a blog, using standard blog layouts, structures, categories and menu systems. Some are just off the shelf forum software, with a prebuilt blog component attached.
CoffeeGeek has five distinct components each acting as their own “micro sites” within the full website, and all of them have to play nice with each other. Our solution in 2021 was to use WordPress’s built in posts system, but design and code a very complex multi-tier post system so our Review, Guides, and Opinions sections each had their own custom posts engine. Then we had to make sure all these elements talked back and forth in WordPress’ dynamic content tools (in many cases, they would not, so we had to custom build the solutions). Even something as apparently simple as multiple authors for the same content piece was a struggle to make happen (that kind of thing isn’t built into Worpress).
Long story short, we did build and code the infrastructure, complete with imperfections we were never able to solve, then went to work on the design.
The Design Tools
We used some advanced tools, including an encompassing, overwhelming mega tool for WordPress called Elementor. To be honest, we went a bit apeshit crazy with Elementor and all the high end design tools available for it. It gave us extremely unique and advanced design, including a lot of gee-whiz trickery, but it also made the website very… bulky. It also ended up breaking our responsive design in places, sometimes happening by automation when one of the back end components got an auto-update.
After the 2021 version of CoffeeGeek launched, I would routinely spend 5-10 hours a month just fixing broken design bits and bobs. I’ve been doing that for the last 3 years. Our website would also get slower and slower. We’d throw fixes at it, like better caching systems, upgrading our private server specs, but it was a bunch of fixes and bandaids put together. And another thing happened during that time: both our overall accessibility and our responsive design took a nosedive. It could not continue.
There was also a third thing: the complex base structure we built for CoffeeGeek meant we could not add back the community features we lost in the 2021 redesign. That’s another thing we had to change. And we have, for 2024.
The New 2024 CoffeeGeek
If I had to say what the most important thing for me with the 2024 redesign is, it is accessibility. I am very bothered that our website scores low on the accessibility meter.
Accessibility
Our goal is scoring 95 or higher on accessibility with the 2024 version of this website, and that means a lot of work behind the scenes. For instance, every image in our database (there’s 1000s of them) need proper alt tags, and visually-impaired descriptive ones. Every night for the past 60 days, I’ve spent about an hour editing a bucket of photos to add this information in our database.
Responsive Design
Also very important is the responsive nature of our website. That means it should look just as good on your iPhone and iPad, as it does on your 27” Studio Display. Or your 34” ultrawide monitor. CoffeeGeek is templates-driven, meaning each page on our website is a template, with database-fed content flowing into them on demand. Every single template (there about 100 overall) is getting a full responsive design, right down to individual headings, text blocks, and buttons. This time around we’re also designing for ultrawide displays, so if you have our website open in a 3400px wide monitor at full screen, it’s going to look awesome there too.
The real trick is avoiding anything that gets “broken” with various back end updates. To achieve that, we’re modernizing our layout system, going with flex containers and grids for how our content is laid out. This not only lightens the code that builds CoffeeGeek, but is much more flexible for responsive design.
Site Speed
We knew the reasons for CoffeeGeek’s current site speed: bloat. This comes from both featuritis issues (using way too many design plug ins), and things like relying on Google Fonts and other outside server calls for our design and website function.
Our 2024 build addresses these things. We were able to reduce the design plugins site-wide by about 75%, finding better ways to rely on just a few very versatile and customizable tools to maintain our website’s unique and elegant look. If anything, our design is even more complex in the 2024 build, but also more “airy”, refreshed, and entirely unique. There’s nothing cookie cutter about the design choices we made for 2024.
We also have reduced external server calls by about 85%. Most of it comes from hosting our own fonts, and reducing our font usage from 18 families to just 5. We even bought a new font that’s pretty unique, to use for all our titles going forward. If you’re a fan of the Road Runner and the Acme company, it might seem familiar.
In testing so far, our most complex pages – like the front page – are scoring around 85 to 90 in speed tests. That’s without any server caching or other tricks. The same pages on our live site, with all sorts of speed-up tricks thrown at them barely score 60. So we’re on track with this goal.
Community Features
Last but certainly not least, our new infrastructure for the 2024 build of CoffeeGeek means we can start bringing back our community features. This means consumer reviews and a forum / social website component are possible once again. Those are going to be major projects on their own, but at the very least, we will be able to incorporate them into the website’s functionality.
One thing we will introduce at launch of the 2024 build of CoffeeGeek is a comments system on every new content article, review, how to, opinion piece, and blog post. We’ve been rolling this out over the last year on a trial basis with blog posts, but will include it on every content article going forward.
One More Thing… (actually Three!)
Yes, there’s more. We are introducing three new content components to CoffeeGeek in 2024, and re-organizing one major section.
CoffeeGeek Reviews
Our Reviews section is getting a big overhaul. We are introducing a new review type, called the Snapshot Review. These will replace the “Mini-Reviews” we currently have in our blog, moving them to their proper spot on CoffeeGeek.
We are also renaming and repurposing our Quickshot Reviews, calling them the Full Review going forward. I’m going to have a lot more to say about our review system in a forthcoming blog post.
CoffeeGeek Guides
We already announced the new Feature Guides section, and it will get some refinements in the 2024 build of CoffeeGeek. Our Guides section will end up having three components: the How Tos, the Feature Guides (single page guides), and Detailed Guides, which will be multipage guides that will work like mini-books on specific subjects. Expect a lot of expansive, scholarly content going forward.
Resources
There is a distinct lack of formal resources online for coffee and espresso. What constitutes a resource? Things like proper FAQs, bibliography resources, listings of manufacturers and websites, and more.
The reason why there’s a lack of these things is because for years now, people have relied on search engines to track down these kinds of things. Want to know Rancilio’s official website and address? Google it, right?
But as we all know, search engines are pretty much broken now. Entirely commerce driven, the results you expect to see in a search just don’t appear. Search for Rancilio website, and you’ll get a bucket of vendor links, sponsored links, and SEO-spoofed results before actually finding what you’re looking for.
My goal with the CoffeeGeek resources section is to categorize the information you might expect to find in certain online searches. We’ll have FAQs for all the major subjects in coffee and espresso (devoid, as much as possible, of opinion), have a proper list of major vendors and manufacturers (ever try to seek out some of the new Chinese makers, or find Hario’s official website? We’ll help with that), and other information you might be seeking in your exploration of good coffee and espresso.
CoffeeGeek 2024 Launch
So when will you see the new website? Still TBD. We’ve been working on it since August last year, but really picked up steam on it in mid December, 2023. A lot of the really hard work is completed: the structure, the undercarriage and programming is done. The database imports are mostly done. The design is 100% locked down, and we’ve got about 60% of our templates built.
What remains is bringing over our fully custom content (basically every review and how to). All that has to be manually done, article by article. That should take another month or so. My own personal deadline is March 1, but I hope we can complete it before then. Stay tuned!
Mark has certified as a Canadian, USA, and World Barista Championship Judge in both sensory and technical fields, as well as working as an instructor in coffee and espresso training. He started CoffeeGeek in 2001.
-
Mark Princehttps://coffeegeek.com/author/markprince/
-
Mark Princehttps://coffeegeek.com/author/markprince/
-
Mark Princehttps://coffeegeek.com/author/markprince/
-
Mark Princehttps://coffeegeek.com/author/markprince/
