Skip to content Skip to footer

Website redesign for Minutes to Midnight

My new website eclipses the previous on IA, performance, sustainability and ease of maintenance.

Simone Silvestroni's avatar ·

Screenshot of the homepage for Minutes to Midnight’s website

Objectives

I had been using WordPress since version 1.5, and while it can serve websites with optimal performance, it requires constant maintenance as well as security audits, it’s still a database-driven system that needs time to communicate with a remote server in order to return a page, and files and databases inevitably swell over time. When my WordPress-driven site ballooned to an unreasonable 740 MB, despite my relentless care, I wanted a change. My goals for the redesigned website were:

  1. get full control of design and code;
  2. light-weight with top-notch performance;
  3. sustainable and accessible;
  4. easy to manage;

Approach

Following the principle of pre-rendering and decoupling,1 I dropped both WordPress and my hosting service SiteGround, switching to Jekyll and Netlify. Jekyll takes content written either in Markdown or HTML, organises it using Liquid templates2, and builds a static website ready to be uploaded to any web server. I wasn’t interested in pre-built themes, so I designed the whole thing from scratch, iterating until I was happy.

Information architecture

The change carried the possibility of rethinking the structure. Before importing anything from my old site, Silvia helped me reorganising and refocusing the content, putting my multi-disciplinary skills back together. I realised the importance of this stage later in the project, when I saw how convoluted my previous navigation was, and how much material I started to remove. After importing posts and pages from WordPress, I set up redirects to avoid SEO issues.

Controlling the (dynamic) source

In 1998, with a text editor and HTML written from scratch, it was clear how everything was under my control. I wanted to return to a similar feeling, where I could handle the code from top to bottom, own the visual design, write again in HTML (and markdown).

After several years working with PHP-based dynamic websites, I wasn’t ready to ditch the ability to run logic routines to reach complex results. Jekyll comes with Liquid, an open source template language written in Ruby. Created by Shopify, it’s also used by Salesforce, Zendesk, 500px and more. To me, it was intuitive and powerful enough to build intricate structures, such as layouts, templates, and inclusions.

Modularity

I wrote an array of reusable components, ready to be included in posts and pages. They are embeddable modules that work in a similar fashion as shortcodes3 in WordPress, and they can be automated, for example through a launcher such as Alfred on macOS.

Build process

I run build tasks through Bash, using appropriate aliases in my bash_profile for quick localhost live preview, with optional draft and future posts.

Results

Accessibility

The redesigned website, thoroughly tested with text-only browsers, it’s compliant with WCAG AAA guidelines, and has a WAVE accessibility rank of #7,280 out of 1,000,000.

Performance and sustainability

As a long time advocate for performance as a design feature, I reduced the codebase from the previous ~800 MB to 13.8MB (including images). The homepage now loads in less than a second, and weighs less than 70 KB. Beside running the site from a green hosting provider, I followed common sense and a few principles:

  • Semantic and valid code, with a lean DOM structure.
  • Use of images only when strictly needed, implementation of responsive images (small devices are served with specific smaller versions), and relentless optimisation of visual assets.
  • No Javascript when valid alternatives can be employed, especially no bloated scripts to serve ads or track people.
  • Multi-platform font stacks combined with optimised custom typography assets (my 3 local fonts weigh 36 KB cumulatively).
Page weight Pagespeed score Loading time
63.9 KB 100 0.64 seconds

Check detailed benchmarks →

Easy maintenance

Since I don’t need to setup and care for Apache, PHP or MySQL, file management and backup are extremely easy. Using git as a versioning system, my local source code — including images and other binary assets — is a mirror of the remote repository, with no extra maintenance required. As a bonus, the transition made me save money, as I’m not paying a dedicated hosting service anymore.

Skills

  • Jekyll
  • Liquid
  • Markdown
  • HTML
  • CSS
  • Netlify
  • Git
  • Bash
  1. Decoupling is the process of creating a clean separation between systems or services. By decoupling the services needed to operate a site, each component part can become easier to reason about, can be independently swapped out or upgraded, and can be designated the purview of dedicated specialists either within an organization, or as a third party. 

  2. Shopify: Who Uses Liquid? 

  3. A shortcode is akin to a shortcut to add features to your website that would typically require lots of complicated computer code and technical ability. Read more