This redesign started with a simple note in Obsidian:

Simplify. Keep the orange, but have less of it. Too much in nav. Move most of the extra info into pages linked off the About page.

I also wanted something with a sidebar again.

I wanted to stick with the Site Editor, so I used a child-theme of the Twenty Twenty-Four theme generated with Create Block Theme. I went with Twenty Twenty-Four because it purports to be extremely flexible and I wanted to use a theme with the most up-to-date Site Editor tooling and best practices.

The first thing I did was set up my own template parts, overwriting the defaults. It was a bit time consuming, but TT4 doesn’t have a left sidebar or sidebar navigation template or pattern. I made as much as I could reusable as a named template part so I can easily make changes later and keep them consistent across my various templates.

I used some very minor custom CSS (roughly 50 lines), mostly relating to my footer animation and some mobile styles for the navigation.

I decided to go with default system fonts rather than loading a web font. Simplify.

Everything non-essential got removed from the main navigation and either linked in the footer or somewhere more contextually appropriate on a subpage. Navigations on personal websites don’t need dropdowns.

I removed the custom PHP template I had for my Reading page and turned it into a regular page in the editor, and pretty soon I’ll probably remove the custom post type and custom fields that it relied on, too. I don’t think I really need a separate post type, just a list will do. Simplify.

Here is what it looks like:

Places I took inspiration from:

  • From Manuel Moreale and Steph Ango‘s post lists on their homepages. I kind of like how both of them have their latest post at the top, which I might adopt. We’ll see.
  • From Jeremy Felt, the right aligned titles and how to handle my h-card
  • From Footer.design, a bold footer that has a surprise
  • From James G, not being afraid to highlight specific sections of my site in my footer that I want people to look at. Things like /now, /uses, /meta, /blogroll
  • From my own digital garden, the idea that having the last updated date on pages is useful to understand how fresh or stale they are.

I’m sure there are more folks I took unconscious inspiration from, too!

I included a Meta page in the footer that explains how this site is built and has a rough history of the changes this site has gone through since 2007. It was inspired by Anh, Shea Fitzpatrick, and Jeremy Felt. Since I’m a digital hoarder, I had backups of almost every iteration.

I know it isn’t perfect, but I wanted to ship it and get it live.

Where I want to go next with this:

  • Customize some category archive pages with additional info. Things like Photography and Woodworking can use helpful contextful info on the archive pages.
  • Continuing to refine pages like /now, /uses, /about, and /blogroll
  • Keep improving the mobile styling
  • Refining block styles as I use them
  • Fixing old posts that now look wonky
  • Keep figuring out what I like and what is useful on the homepage
  • Style webmentions, pingbacks, and comments better

If you find something broken, please let me know. There are some templates I haven’t touched (though I don’t think anything actually uses them, but I should verify that.) 🚢



Likes, Bookmarks, and Reposts

  • a new hope :blobcatcoffee:
  • Jim Willis

Comments

10 responses to “2024 Redesign”

  1. This is a page about how this website works and a rough history. This site is powered by WordPress and hosted at Pressable. It uses…

  2. @cagrimmett excellent! And thanks for citing your inspirado sources.

  3. The temperature has been bitter cold here all week. I don’t think it has gotten above freezing at all in the past seven days. I’m…

  4. In reply to: 2024 Redesign

    Looking good! I like “simplify” as a goal.

    I also dig the format of your reading page. I may have to steal that. 😀

  5. Nice! I like the sidebar. Have you ever thought about switching the archives to collapsing archives (shamelessly recommending a plugin I wrote)

    1. I’ll give it a try! I want to play around with the styling of them on my dev site a bit first.

  6. […] Grimmett redesign his website and walks you through the process in the post 2024 Redesign. Based on a child theme of Twenty-Twenty-four and with the help of the create-block theme plugin, […]

  7. Looks great ! Good work 👌
    What about making your navigation sidebar sticky ? 🤔

    1. Thanks, Quentin! I thought about it, but decided against it because I add elements to the sidebar based on what part of the site you are on, and sometimes that sidebar grows longer than the current window size.

Leave a Reply

Webmentions

If you've written a response on your own site, you can enter that post's URL to reply with a Webmention.

The only requirement for your mention to be recognized is a link to this post in your post's content. You can update or delete your post and then re-submit the URL in the form to update or remove your response from this page.

Learn more about Webmentions.