WP Tavern Is Sporting a New Website Design

We are back with a brand-new edition of WP Tavern. Technically, we have a spiffy new coat of paint that I hope you all can see if viewing from your browsers. If you are reading this post via a feed reader, email, or something else, hop over to the site and check it out.

The Tavern received a few updates under the hood too. I will not go into those details, but some of you may have noticed that we are now hosted on Pressable, a hosting service owned by Automattic. Thus far, things seem to be going off without a hitch.

For posterity, the following is a screenshot of the old homepage design along with the new one:

This is as much your home as it is ours. We just write the articles, but you are the ones who spend time browsing the front end — actually using the website. Constructive feedback is always valued and taken into account.

A Yearlong Design Project

It is hard to imagine the last time WP Tavern was not running a WordPress theme that I built. Before joining the staff here in 2019, the website had almost always had a little piece of me tucked in.

I would have to dig back into the archives, but I know for sure it used to run a modified version of the Hybrid News theme I released in 2009 and eventually a custom child theme on top of Stargazer years later.

I created our last theme in the middle of the early block editor days, and the changes over the past two years have been like running a stress test against my skills as a developer and designer. For the most part, it held up well as we ran the latest version of the Gutenberg plugin in production. I had to fix a ton of few things here and there, but I am happy to say that the site kept chugging along.

Our last theme was aging, though, and we needed to freshen up the place. We had ideas dating back to late 2019 that we had not implemented, and it is always tough to squeeze in the time for a full-blown redesign when there is so much going on in the WordPress world. Our first priority is always sharing the news.

We were fortunate that the WordPress.com Special Projects team contacted us in November 2020 with a proposal. Their mission:

We help interesting people, organizations, and projects to have an excellent experience with WordPress.

It did not begin as a new site design project. The team had actually reached out about building a feature that I would like to bring back to the Tavern. That part of the project is not quite ready yet, so we will hold it as a surprise for the new year. Folks are gearing up for the holiday season, and there is no reason to rush it.

Our team had planned on redesigning the site ourselves. We were just waiting for Full Site Editing to launch alongside WordPress 5.7 — so, that did not happen at all.

After some back-and-forth, a group call, and a leap forward to January 2021, we were looking at design tiles. Our plans had changed. And that is part of the magical process of keeping communication open. When you surround yourself with smart people who excel at their jobs, you can end walking a path far better than the one you first set foot on.

Let us fast forward beyond logo decisions, design mockups, and the constant FSE changes throughout 2021. It was a long journey, but we finally arrived at our destination of a new and improved version of WP Tavern.

From the Tavern to the WordPress.com Special Projects team: thank you for your work and professionalism throughout this entire process.

From the Outside Looking In

Admittedly, I had reservations about the project from the beginning. I look at other developers’ code almost every day, and I usually prefer to do my own thing. It is one of the reasons I never took any of the dozens upon dozens of agency job offers over the years. I would be that one employee who would want to uproot everything on Day #1. By the end of the first couple of weeks, I would be “let go,” my employee file labeled with “does not work well with others.”

The team provided me with committer access to our development repo and used my preferred commands for the build process. It was a welcome gesture, and I was happy to know that I could change anything I needed.

But, I have not once used any of the power at my disposal.

I was comfortable feeling like we were in a partnership. Plus, every ticket I opened in the repository was handled — and I absolutely opened plenty of issues.

Relinquishing development control was a weight off of my shoulders. I quickly learned that this was a team of professionals who knew what they were doing.

Sure, there were some things I would have done differently with the code, such as modernizing some of the PHP (something that was unnecessary in the context of the project). I would have probably reorganized a few folders too. At the same time, this was an opportunity for me to learn, and I absorbed as much as I could.

Aside from wearing my student hat, I also kept my client cap on. This was the first time I had ever gotten to play that role. There were moments where I worried whether everything would work out as I scanned an unfinished project. However, most of the time, I was able to sit back and watch in awe as the team put this whole thing together.

50

50 responses to “WP Tavern Is Sporting a New Website Design”

  1. Alex says:

    Looks great, well done but I feel personally attacked by this revelation since I’ve been working on my site redesign for months. Thanks! 👍

    Gonna have a cry now.

    Good jaerb!

    Report

  2. craig says:

    Nice! Can you please bring back the comment counts? I find those to be very useful.

    Report

  3. Matt Rock says:

    Good read, nice work. Redesign looks great!

    Report

  4. Isabel says:

    Everything is so white, bright, and spacey….

    Report

  5. Chikmagalur says:

    Nice work. Looking good. I feel it’s very similar to Twenty Twenty Two theme.

    Report

  6. Sonja London says:

    Looking at the new website on my tablet. I’m seeing three columns, some of which are too narrow to actually show the word “WordPress” as a whole word. I’ll check other devices later, but I think it may need a little tuning.

    Report

  7. I think post meta would look better centered below the post title.

    Report

  8. Looks amazing and load super fast. Like the minimalist design and the simple menu to access everything. Well think! Reading this on an iPad Pro and it displays properly. Congratulations! It must be a lot of work with all the articles you have in archives… Bravo.

    Report

  9. This theme is very beautiful, I found that the theme url is https://github.com/a8cteam51/wptavern, but I did not find this theme on github.

    I very much hope to be able to open source.

    Report

    • I’m going to talk to the team about open-sourcing this so that other theme authors can learn from their work. It’s probably best that some of the kinks are worked out and wait until after the holidays. It’d be nice to at least have a read-only copy of just the theme available. I’ve had a couple of others ask as well.

      Report

  10. Amazing work. The new design looks refreshing indeed. I wanted to point out earlier that the previous layout didn’t fit properly on my mobile screen. But that’s taken care of now by your team. Hats off and keep going strong!

    Report

  11. Chris says:

    Looks good! The main logo should be an SVG though

    Report

  12. It’s really hard being a customer for your own website. But it turned out great – nice and airy! Great job!

    Report

  13. Guti says:

    Good work!

    Report

  14. Munir Kamal says:

    Congrats on the new design. Really neat, clean & minimal as it should. Just a couple of thoughts:

    No pagination on the home page to go through more posts? Even the categories menu is hidden under the top menu -> news item. There’s also no categories links in the footer, which could be handy.
    Maybe the categories filter on the home page to filter the recent posts would be nice, like this: https://cln.sh/yhlkgc
    Home grid images better have some border like the single post has, to make sure images with the white background doesn’t blend with the page background. https://cln.sh/RWqgQQ
    Maybe remove the sidebar from home.

    ⚠️ I am no designer/expert just passing my feedback as a user.

    Report

    • John Parris says:

      On this point, once you scroll to the bottom of the posts on the homepage, you end up at a dead end of sorts. There are no pagination links. So you scroll to the menu, but there it’s broken down by category, so there’s no “all posts” view… unless you happen to stumble across the “View All” link below the hero post. However, once you click that, you’re back at the top of the post index, and you have to find your spot. But now it’s different because it switches from 2 columns to 3 columns.

      It would help to have pagination links on the homepage, or a “Blog” link in the menu, or something that makes it easier to discover/see the whole blog index at once.

      Report

  15. Andrew says:

    Welcome to Full Site Editing. Welcome to the future!

    It’s awesome to see the Tavern taking a lead in this. The design is clean, fresh, easy to read and shows that FSE is now getting to the stage where it is more than suitable for a very popular live site.

    Just one issue I found on mobile when scrolling through comments, I keep accidently hitting the reply link for every comment, and then have to close my keyboard and close the reply form before I can continue reading. I think this may be because the reply link is full width, making it all too easy to catch when using touch scrolling.

    Report

    • We have a fix for the comment reply link issue on the way. Thanks for letting us know.

      I definitely agree that FSE is getting to that stage where it’s ready for prime-time. It is by no means perfect yet, but I feel like it’s important for a site like WP Tavern to be a pioneer. Actual real-world usage is where you really find the problems in the system, and that translates into feedback that makes it better for everyone.

      Report

  16. Christoph says:

    Looking good!

    Two minor things I’ve noticed:
    1) The comment reply script seems very aggressive. On mobile, I literally can’t scroll through comments without repeatedly opening a comment reply form. The click detection seems to be picking up scroll touches.
    2) It would be nice to have the mobile menu close button in the same position as the mobile menu burger button. Slightly better UX :-)

    Report

  17. We are also hosted on pressable.

    Report

  18. Jan Horna says:

    The new design looks very good. And running the Gutenberg plugin in production, that’s a pure adrenaline 💪

    Report

  19. Well done! I can only imagine the challenges of doing this during a time when FSE is so unsettled.

    WP Tavern can now serve as the guinea pig we can look to when trying to put our own FSE themes together!

    Report

  20. Rene Fireitzer says:

    New site looks really nice but currently voids GDPR on many levels, please adjust accordingly.

    It includes by default various external resources like Google Tag Manager, Facebook Social Graph, Gravatar, wp.com, wordpress.com, gaug.es, Google Analytics, pressablecdn.com, Google Webfonts, …

    There is no consent from user, no way to disable includes and also no linked privacy policy page.

    Report

  21. Bastian says:

    Nice redesign. Congrats.
    One minor inconvenience I have with the new site is that the reply arrow links in the comment section cover the whole width, So, when scrolling down with my finger on my phone to check the comments I inadvertently click on those links.
    Can you change this, please?

    Report

  22. Rishi says:

    Wonderful job! Looking to also start refining my site with simplicity in mind!

    Report

  23. Nathan Wrigley says:

    It’s a really beautiful new design. Clean, clear and readable. Exactly what a news site needs. Well done to all involved!

    Report

  24. Steve Grant says:

    Well done for getting a site up, and I’m sure the rough edges will get sanded off over coming weeks.

    A suggestion:

    I’d say the teaser text should be a bit longer on the listing pages, also as it’s an automated extract it’s too short to deliver added meaning to the headline.

    EG on this story it reads: “We are back with a brand-new edition of WP Tavern. Technically, we have a spiffy […] ”

    I’m not sure that text delivers much added meaning. This text works more as a design space filler in the block than as an information supplier. If it was Lorem Ipsem in a pattern library someone might say “that looks nice”, but it’s not a useful summary, or any kind of teaser, and as it’s an truncation of the body copy it’s not supplying much added value to the headline in terms of meaning.

    So it either needs a longer truncation word count, or preferably to use a manually typed subhead/summary which delivers better contextual info. Also, the googles love contextual summaries.

    For example an alternative (on this story):
    “Find out how we used Full Site Editing to redevelop the site. Our year long project, what we learned, and what’s next …”

    Might be a bit more useful teaser strategy for you and readers.

    Report

  25. Love the new look!!! The link in the footer goes to WordPress.com, and not the .org? :)

    I can’t say enough good things about Pressable!

    WP-4-Life!!!

    Report

  26. Amber Hinds says:

    Congratulations, it looks great! Also, the biggest win: the right side of articles (titles and content) are no longer cut off on mobile! 🎉

    Report

  27. nugatowy says:

    The dropdown menu is broken on Mac OS Safari 13

    Amazing results in Gtmetrix!

    Report

  28. Mr. KingsHOK says:

    Congratulations 🎉 The new design is sleek and clean with ease to access your articles. But my fear with redesigning websites is the loss of traffic afterwards.

    How did you fo your own please? I’ll like to know what you did to retain your overall ranking positions.

    Report

  29. max says:

    Much better than the previous design. Like the logo too …

    Report

  30. Iqbal says:

    Nice color pallete, congratulations for the new theme design!

    Report

  31. Comment dates are not formatting nicely on my Android phone with increased font size which forces date onto two lines. I have screenshot if you want to see it.

    Also, when following the ‘See all comments’ link in the emails, I end up at top of article and not in the comments.

    Otherwise it looks good on a phone.

    Report

  32. Burkie says:

    Amazing work! To be critical for the benefit of the reader – the excerpts should be a custom sentence – main talking point or quote, they’re just fluff that’s ignored as you click on the title.

    Report

  33. Grzegorz says:

    Congratulations on the new design! It looks really nice, personally though I would prefer a darker theme. I enjoy the content but the whiteness burns the eyes so I guess I’ll just keep using a plugin for a dark mode.

    Report

  34. Bet Hannon says:

    Aside from a few accessibility issues, looks pretty good!

    Report

  35. This is so much better! It’s a modern look!

    Report

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: