AndrewConnell.com v5 - new year & a new site theme

After 3,240 days, I figured it was a good time for a good refresh. Recently I took some time to rebuild my site theme & after launching it, I'm excited to share it with you! In this post, learn about some of the things that went into the process.

After 3,240 days, I figured it was a good time for a good refresh. It was March 19, 2013 when I last did a significant user experience (UX) refresh to my site .

Back then, just over 1.5 months shy of 9 years ago, I relaunched the site not just with a new UX theme, but I re-platformed from a small open-source engine (.TEXT & SubText) to a more popular open-source CMS engine ( Orchard ).

Then, about 3 years ago in August 2019, I switched from Orchard to Hugo , a static site generator. At that time, I kept the theme so the changes were just under the covers. But ever since that move to Hugo, I’ve wanted to refresh the UX of my site. Because the β€œwork” projects always take up the most time, I kept putting it off. But if you’ve noticed over the last few months, I’ve been giving my site a lot more attention.

Over the last week, I took advantage of a little scheduled downtime to knock out the UX of the site. You’ll notice it looks very similar in many ways to my company site, voitanos.io . That’s intentional - I was sick of one site using one CSS framework (this site used Bootstrap) and different customizations than my company site. But now, they’re unified, and while it’s only been a few days, I’m loving it. In fact, I’m kicking myself for taking so long to do it after seeing how quickly I was able to knock it out.

New AndrewConnell.com homepage

New AndrewConnell.com homepage

I’ve come a long way with this site, since my very first post on September 2003. I consider this to be the fifth (5) version of the site:

In this post, I’ll explain a bit more about the process.

Why do it?

I touched on a this question some in the introduction above πŸ‘†

While I was tired of the old look (it’s almost 9 years old!), I had some tangible reasons to do this. I publish content on a few different sites. From my podcast, the Microsoft Cloud Show , to my education business, Voitanos , when you’re jumping between platforms, it’s quite a context switch when the process is a little different on each one.

The UX elements used for things like callouts, quotes, and things like that were different across the two primary sites where I write (this one & the Voitanos’ blog ). This was made even more challenging because this site used the CSS library Bootstrap while Voitanos uses Tailwind CSS .

My life would be so much easier if I could standardize things across sites and use the same controls:

Info: Such as alert boxes like this
But it’s not just this alert box… I’ve also got..
Important: Sometimes they're good things...
Not all alerts are informational, but sometimes they’re good things!
Warning: Be careful...
I’ve got Warning alerts and…
Error: I said be careful!
… and even Error alerts! But that’s not all…

And quotes like this! Tailwind CSS rocks!

Andrew Connell
Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP

My site also was in desperate need of some SEO love. The person I had help with the theme 9 years ago didn’t design with SEO in mind. Couple that with changes in the industry and Google’s search engine, and my poor site was way out of being current. I felt like I was strolling down the street with a pager, not a mobile phone!

Tailwind CSS & Tailwind UI to the rescue

A few years ago, when I relaunched the Voitanos site , I decided to use Tailwind . I already had a commercial license for Tailwind UI :

Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It’s got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build. Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.

Tailwind CSS
https://tailwindui.com

I intentionally reused a lot of the page layouts and controls from the Voitanos theme I created for AndrewConnell.com. In fact, I created a few new ones for this site that I’m going to migrate over to the Voitanos site in due time.

Recent blog post on AndrewConnell.com, with the new theme

Recent blog post on AndrewConnell.com, with the new theme

Recent blog post on AndrewConnell.com, with the new theme

You’ll notice how the above page looks very similar to blog posts on the Voitanos site. In fact, the rollup pages for the two blogs, AndrewConnell.com/blog & Voitanos.io/blog , look almost identical.

I also did some content work and resurrected a section I used to have on my old site. Now, there’s a dedicated section for my publications, categorized by the type of publication. This section includes courses and articles I’ve written, recorded, and delivered over the years:

List rollup pages

List rollup pages

View all my publications in the new /publications section

SEO optimizations

Another big reason I updated the theme was to implement a lot of performance, usability, and search engine optimization (SEO) optimizations across the site. This includes a more mobile-friendly site.

Content is a huge part of this, and that’s where I have a lot of issues for organic search optimizations. A service I use to help identify these issues has been very useful on the Voitanos site, and I’m using it on this site as well. I’ve got a huge backlog of items to knock out. If you see something that stands out, please let me know !

Ongoing work

As much as I’d love to say β€œthe site is done!”, it isn’t. I’ve got a lot of content work to do. I’m moving internal image and link references around. Hugo has some great features to ensure you don’t have broken internal links & image optimization controls.

Since I started writing back in September 2003, I’ve had the attitude that I shouldn’t delete old content. However, I’ve changed that mindset and plan to retire stuff that’s either grossly outdated and irrelevant, or things that just don’t make sense to leave around. I’m not talking about reference or useful resources… I’m only planning to retire things that have no value today like product.

Conclusion

That’s about it for now. If you have a question, or see something that’s broken or a little off, feel free to contact me either via my contact page , or dropping a tweet using the controls below πŸ‘‡

Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP
Written by Andrew Connell

Andrew Connell is a web & cloud developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to helping you be the best Microsoft 365 web & cloud developer. He lives with his wife & two kids in Florida.

Share & Comment