At the start of this year, I set out to redesign my blog.

The primary objective is to update blog layout and structure, content strategy for next couple of years. This translated to 5 high level goals. Let's talk about the two primary goals and how I approached the milestone and then some.

  1. Goal: Revamp HTML structure
  2. Goal: Change UI design
  3. Development approach
  4. Other improvements
  5. Next agenda.

Goal: Revamp HTML structure

The previous blog design had too many templates and macros which needed remapping and reorganization. There was a lot of duplication, missed optimization and cleanup opportunities in the entire blogs' HTML structure. As outlined below, I saw an opportunity to reduce the macros and templates mapping. This led to having a unified look for all models (blogs, notes, drafts, tags and thoughts).

I realized pagination macro is unnecessary. This meant the landing page will list all the posts.

Macros and templates mapping

After careful thought, it occurred to me that only 3 macros were needed.

  1. A posts macro for containing a list of posts in a specific model.
  2. A post macro for containing the content of an individual article.
  3. A tags macro for displaying all the taxonomies.

With this realization, I was able to reuse a small number of macros in more templates than before.

Before

MacroCovers template
blog-labelsblog-labels
blogblog
blogpostblogpost,note,thought
draftsdrafts
notesnotes
pagination-
thoughtsthoughts

After

MacroCovers template
postsblog, notes, thoughts, tag, drafts
postblogpost, note, thought
tagslabels

Post elements

A post, or an article must contain the following elements.

  1. Post Title
  2. Published date, Modified date
  3. Post Tag(s)
  4. Post part text (in a series post)
  5. Post Content
  6. Sub post list (in a series post)
  7. Post navigation

Taxonomies

To categorize posts, I had used labels as the taxonomy term. Labels is a holdover from my blogger days. So, I replaced labels with tags as the taxonomy term.

As before, the tags macro displays all taxonomies across the site for blog posts. Individual tag is just a list of posts, so it could map with posts macro now as opposed to blog-labels having its own macro earlier. This meant less overhead and easy maintenance.

In any case if a particular digression is needed for a model, it could be easily handled in the macro. However, I intend to keep to these few macros as far as I can foresee.

Goal: Change UI design

Layout

Previous design was decent, but I was never satisfied. I am not good with design, but I tinkered a lot with minor things to make it just a bit more better. I have an eye for good design, but cannot come up with it myself. Thought about this for a good while and decided to go the minimalist route. In my head following thoughts formed then.

  • No more accent color, or much color at all
  • None of the web font nonsense and go for system fonts
  • Remove unused CSS in the process

Below is the result of that exercise.

Image of landing page before and after (1280) on FirefoxLanding page before → after (1280, Firefox)

Image of landing page before and after on iPhone X iOS 12Landing page before → after (iPhone X iOS 12)

Mobile first responsive

Previous design was also a mobile-first responsive layout. Carried forward this to the redesign with slight aesthetic changes. See second screenshot above for reference.

In the redesign, the mobile and desktop layout feel like a natural extension of one another. In the previous design, the desktop layout did not feel related to the mobile layout.

Development approach

I switched to having a feature branch approach last year. The redesign work happened on the design branch on my blog's gitlab repo. All other work like content update, SSL renewal, and new posts happened on the master branch.

As a natural extension to this thought process, I made the development a bit more official, or dare I say, Agile. Created a milestone on the associated repo for tracking. All the 5 goals became issues on the milestone.

This is a current screenshot of the milestone. It shows that only 57% of the work has completed. As it goes, this 57% is the majority chunk of the entire work done. The original timeline for this feature release was April 2020.

Then Coronavirus/COVID-19/SARS-CoV2 made its way through.

Pandemic impact

The deadline got extended twice until this week in September. It is only 57% done, why push the changes now?

The customer in me got impatient and pushed for merging of the changes into master branch. This is due to other priorities that will become clear only later.

Other improvements

Post series

One of the things I have been meaning to implement is a post series. This was in my mind from the day I wrote the Why Lektor post. I was able to merge changes from feature-series-posts branch into design branch. In fact, this was the first thing I merged into design branch. At that time, I liked it so much that I have also integrated it into the master branch. Since this is a significant feature, I will write a separate post on this.

Specification for post series roughly is as follows.

  1. Top level post will list sub-posts at the beginning or end.
  2. Top level post will display presence of sub-posts on the landing page.
  3. Each sub post will have an associated part field to show the sequence of that sub-post.

Footer

I made the footer even more simpler and minimal retaining almost all links from before. One notable difference is the about link which is now available in the footer. The beauty of this footer, IMHO, is that the header nav stays left of the screen and the footer nav stays to the right.

This is one thing I didn't take inspiration from anywhere. It might not be the original, as in somebody might have thought about it already, but I came up with it in my own context. I was and am pretty pleased with this idea and result. In the mobile view, header and footer nav come into the middle as in the previous design.

Other notable minor improvements include removal of unused or deprecated meta tags, removal of unused model properties and broken plugins. Special mention to native lazy loading of images.

An implicit goal on this milestone is to maintain or better the pagespeed insights. The results are unanimous across various tools like GTMetrix and Pagespeed. The redesign has bumped the already good numbers a tad higher. A bit sad to see varvy tools go away.

Next agenda

What is next?

FeatureTimelineCompleted on
Complete 43%ImmediateOct 04 2020
Add RSS feedNext
Better asset handlingFuture

43%

  1. Complete the UI design and clean up minor issues
  2. Update/redo pages' content — pages like about, now and 404 need some content update.
  3. Browser and device verification of all content.

RSS feed

An RSS feed is a done deal. I had an RSS feed before, but due to an issue that is breaking the build, I had to remove it temporarily.

Better asset handling

Bundling, minification and code splitting of assets without moving into an SPA model. I did not figure out all the specification for this, but this has been in the back of the mind forever.