Blog redesign 2020
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.
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.
postsmacro for containing a list of posts in a specific model.
postmacro for containing the content of an individual article.
tagsmacro for displaying all the taxonomies.
With this realization, I was able to reuse a small number of macros in more templates than before.
|posts||blog, notes, thoughts, tag, drafts|
|post||blogpost, note, thought|
A post, or an article must contain the following elements.
- Post Title
- Published date, Modified date
- Post Tag(s)
- Post part text (in a series post)
- Post Content
- Sub post list (in a series post)
- Post navigation
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
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.
Landing page before → after (1280, Firefox)
Landing 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.
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
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.
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.
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.
- Top level post will list sub-posts at the beginning or end.
- Top level post will display presence of sub-posts on the landing page.
- Each sub post will have an associated part field to show the sequence of that sub-post.
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.
What is next?
|Complete 43%||Immediate||Oct 04 2020|
|Add RSS feed||Next|
|Better asset handling||Future|
- Complete the UI design and clean up minor issues
- Update/redo pages' content — pages like about, now and 404 need some content update.
- Browser and device verification of all content.
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.