New website redesign v3.0

Written by

Walter G.

Published on

May 31 2021

Hello everyone. I've just gone ahead and published the last changes to this websites new redesign, also dubbed v3.0. The main goals that I wanted to tackle this time around with the new design were mainly the following:

- Improved site performance
- Simpler navigation
- Better categorization
- Prettier "Night mode"
- More relevant collections

Essentially, just alot of improvements to the older design. If you are new to this blog and you don't recall the older design, then that's probably a good thing, don't worry about it. The older design was flashier with more design elements, vector images, icons and more fluff in my opinion, though not without a cost.

Here is a bit more detail about the latest changes.

Improved performance

Through much refactoring and tearing down, I was able to improve the overall page loading speeds and server side rendering speeds as well. Much of this was done by removing heavy assets, such as large background images and unused CSS.

I was also able to improve database query performance for most of the data-driven pages, which on this blog, is most of the pages.

Most of the image assets that are positioned below the fold (first visible part of the page) have now been set to lazy-load, which should improve initial page loading speeds.

Essentially, I've gotten rid of the bloat that was added throughout the years.

Improved navigation

The more content that you have to search through, the more difficult it is to do so. This blog currently has over 600 articles, which isn't a tremendous amount mind you. There are popular coding blogs with 6000 articles currently. We are still a long way from that mark. But 600 is a fair amount still.

At the top of every page, you should now see the most popular tags in a secondary navigation panel. These are calculated in real-time based on the popularity of all of the tags combined.

And if you would like to see all of the tags currently in use, you can click on the tag icon at the top of the page.

I've also increased the number of articles being shown pretty much everywhere. The goal with the new design isn't to show less in the hopes that you stumble into relevant content. The goal now is to show you relevant content as soon as you land on the page.

Night mode

My favorite feature to code on this redesign was definitely the night mode. Mainly because night mode is not easy. The technical part is easy as you essentially just swap in another CSS file or you create a generic dark layout that overrides everything else.

The hard part is in actually designing the night mode theme. Because you are limited in the number of colors that you have at your disposal. Essentially a very dark background, with a very light text. So it's difficult, because it's hard to make that look stylish.

I think the new "night mode" looks stylish though. I spent much more time in manually selecting the specific colors this time around. Everything from the bold dark background, to the slightly less dark panel, to the light text with a bright anchor tag.

So if you tend to work at night (as I do) and hate the annoying bright web designs that most websites employ, then feel free to click on the moon icon at the top of the page.

More collections

A feature that I coded over a year ago but that I never really put any focus on, were the Collections. These are essentially grouped articles that fall under a very specific category that have a higher interest rate when compared to regular categories.

These include things such as:

- ES6 and beyond
- API Implementations
- Computer Science Fundamentals
- Useful JavaScript Widgets
- Many more...

Much more...

There are alot of other subtle updates that I made during the course of this design. Some are more design oriented, while others include feature additions or improvements.

Now that this design phase is complete, do expect more consistent articles to be published moving forward.

Comments

No messages posted yet

Add comment