2131, that is the amount of days that have passed since this blog’s last redesign. That is 5 years, 9 months and 29 days. That is really a long time.
We are entering a new period in this blog in which more content is going to appear after last draught, so it sounds like a good idea to have new and fresher look.
Newer foundations
When I started this redesign project I asked myself "How will it look like?".
I like colors. I like flat. I dont min scaffolding. Responsive is a must.
All these considerations point towards some Material Design. Which I am fan of when it comes to apps in my favourite mobile platform.
Not from scratch
I ain’t no designer so it would be silly (and hard) to start from scratch. At first I looked for ready-to-roll Blogger themes, but I could not find one that looked the way I wanted without much tweaking.
If tweaking was to be done, I’d prefer the control a Blogger-agnostic Material Design implementation/scaffold can offer.
In the end, I set myself to choose between Materialize and Material Design Light.
Both look materially terrific but, in the end, I stuck with MDL because they have templates that resemble blog-like sites like the one I want to redesign.
The process
I started to create an html mock-up that looked the way I wanted.
For that, I used my favorite Windows text-editor: Notepad++ that offers the right amount of syntax highlighting and tag/brace matching.
In order to serve the site locally (not from file://) and save myself to reload after every change I used Live Server that I fire locally from a simple npm script with npm start to save those precious and diminishing memory cells of mine.
Once CSS and HTML was fought comes what I thought it was going to be the easy part: turning angly brackets into a Blogger template. I read multiple blog posts about it and decided to do what they suggest: do NOT start from scratch but modify an out-of-the-box one.
This is what I did:
- create a private Blogger blog
- export all the content from my public blog
- import it into the recently-created, private one
- apply one of the themes, checking that it looks fine (totally anonymous, but fine enough)
- customise the template XML locally instead with your favorite editor to save you from online madness
After lots of tinkering nothing was going my way I was getting extra markup from Blogger that was screwing my beautiful grid.
I panicked and looked for a solution outside Blogger and powered what would happen if I bit the bullet and moved the blog to Github pages?
Yes, I would have complete control over the HTML, but I would have to redo a lot and do a ton of SEO.
That would be the definition of rabbit hole that a redesigning project should not get itself into.
The solution was easier than I thought: just disable Blogger CSS. Move the little custom CSS I have from <b:skin/> to an awfully uninteresting <style/> section and enjoy my clean HTML.
Is it done, done, done?
Well... No. Not yet. It turns out that it was not such a good idea not to have jump links (that read more thingy) in posts, at least not when you want to have some sort of tiled overview.
That means that I have to manually edit every single post I have published through the years. I could not believe that I had to tweak two hundred and sixteen posts. But I kind of have to. I started from the newest to the oldest, but I am not done.
Besides, I have not every feature in the blog. For instance, I still need to find out a nice way to bring back the whole archive rendering, but it will come, eventually.
Minor annoyances
It turns out it is not enough to blindly add jump links, but there is a little more work involved.
Since I enabled HTTPS-only, I have a bunch of image links pointing to non-secure images. So, in order to save the updated post I have to, at least, change each of the image sources to point to a secure resource or protocol-relative URLs (don’t care about its apparent “anti-patterness”).
Another thing I have found is that, throughout the years_ I have used a bunch of blog writing tools in different platforms and I had not been paying any attention to the quality of HTML they were producing (I was using their WYSIWYG most of the time), just whether they looked reasonably neat. I cannot point any fingers, but I can tell you some of the HTML is not only un-nice but also semantically wrong (no p tags and paragraphs as divs or brs all over the place).
As the new design is less forgiving with dodgy HTML, I have to check their content tidiness out as well.
Worth it?
Well, It is uncool to brag about one’s blog. But I like it. It retains much of the colourfulness, it is way more modern, it is better semantically, it contains accurate structured data, it plays reasonably well with mobile devices and looks like no other blogger site based on a ready-to-use template.
Blogger XML templating sucks as much as its documentation, but at least I did not fall for the platform migration siren calls.
Enjoy it reasonably and, please, if you find out anything weird with the new design, I strongly encourage the finder to point it out to me so that other readers can benefit from the fix.