You may have noticed a few changes around these parts recently. Welcome to the 2024 site re-design. Gone is the tailwindcss grid and columns, in favour of a pure pixel grid based layout. With lots of ideas planned for future updates, we're rolling back the clock and going to re-design like it's 2004 again.

Firstly, A bit of history

I've been building on the web since the late 1990's. I've seen the rise of great powers, and fall of others. I was there for spacer.gifs and tables for layouts. I've used <FONT> tags in FrontPage Express and wrangled with DHTML in Netscape Navigator. I saw in the dawn of CSS, the Zen Garden, and the Semantic Web. I've given up trying to keep up with latest in javascript frameworks, and now I yearn of a simpler website.

When Bootstrap hit the scene in 2011, it was revolutionary. Suddenly web design became easier and, complex responsive designs could be built very quickly, and an entire ecosystem of components and functionality became available. But, Bootstrap came with a dark reality, nearly all the sites built with bootstrap ended up looking like a site built with bootstrap. At some point, I used bootstrap to build this site. It made sense, I'm not a designer, I'm not a frontend engineer. I needed something that I knew would work and I would be easy to build with. But I was never truly happy with the outcome.

And so things mostly stayed until 2019, when TailwindCSS was released. Tailwind did away with the rigidity of bootstrap, and gave web designers even more flexibility to build complex websites. Tailwind also came with a CLI tool to compile your CSS on the fly, and only include the parts of TailwindCSS library that you're using, as well as providing greater customisation tools of sizes and colours. I was happy to switch to TailwindCSS as soon as I had some free time, and I've been using TailwindCSS for all my web design ever since.

However, for all the modern utilities and responsive layout tools these frameworks provide, nearly all the sites built with them always end up being just another centre aligned column layout, there's usually a hamburger menu, and there's probably a strap-line in big centred text, maybe a hero image. There's nothing wrong with modern web design, it's the natural evolution of responsive design that can expand vertically to accommodate dynamic content. But it's getting a little predictable. I long for the time when we built websites in photoshop, when 3D graphics were exciting and used for no other reason than that. A time when typography was exciting, and text alignment was pixel perfect. If you're too young to remember this time, or you're ready for the nostalgia trip, I recommend checking out the Golden Age of Web Design at the Web Design Museum.

The New Design

The general design plan is to try and capture the compact feel of the early webs sites. The whole site will be laid out with pixels, no REMs, no percentages. It will be best viewed on a desktop, but will resize as you'd expect for smaller screens. Empty space will likely get filled with decorative blocks.

Although the primary site layout will be a 720px wide left aligned column, some pages will make full use of the horizontal space.

A key element of the design will be the relationship of the page content and the background canvas. The canvas is currently just drawing the page grid, but in the future I want to render shapes, patterns, and typographic elements. A lot of the canvas designs will be previewed on the Canvas section of the site.

Another, as yet not implemented design requirement, is a really strong typographic system. The typography today is pretty non-existent.

In addition to the design, I want each page to just have more visualisation of any relevant data. I want the site to have the user experience of a dashboard, were everything can be visualised, and everything is linked.

Above all, I want design elements purely for the sake of showing off design. This will not be a minimalist re-design, whitespace will probably get filled with design flourishes, patterns, additional metadata, or visual helpers related to the content. In the future, I'll put together another post with the design inspiration.

The Grid

The whole site layout is built around a 120px x 120px grid system. All sections on the site are forced to fit within this grid, both horizontal and vertical. Horizontal is easily handled by CSS, but the vertical fitting has to be handled via a Javascript callback that runs when necessary to resize elements on the page to fit the grid. It's not perfect (yet), but it's good enough for now.

The Canvas

Instead of a background colour or image, the design makes use of an absolutly positioned canvas element, that currently draws the grid crosshairs, but will be used to add additional type and imagery based on the current page. The canvas will be a living background. I've got lots of ideas of where to take the canvas, but it could have animation, and react to user interaction.

The Future

The re-design is happening live, in realtime, warts and all. Although I've migrated quite a lot of the elements to the new grid, there's still a lot to do, and a lot of bugs to fix. Some pages will take some time to migrate, and others will probably look broken for quite some time.

This post is a test of the features of this publishing system. Specifically testing formatting and layout

Heading 1: Markdown test

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading level 2: Basic Markdown Formatting

This paragraph contains bold and italic text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Heading level 2: Lists

Heading 3: Bullets

• Red
• Green
• Blue

Heading 3: Ordered

1. Ultraviolet
2. Visible Spectrum
3. Infrared

Heading level 2: Quotes

Big things have small beginnings – Lawrence of Arabia

Heading level 2: Codeblocks

Command Line example goes here

# Bash commands
~ uptime
11:00  up 7 days,  2:09, 3 users, load averages: 3.23 2.84 3.18
~ whoami
philbalchin

# Ruby codeblock
class Person
  attr_accessor :name, :surname
  def initialize name: "John", surname: "Smith"
  end

  def full_name
    [name, surname].join(" ")
  end

  def greet
    $stdout.write "Hello #{full_name}"
  end
end

# Javascript
let headings = document.getElementsByName("h1")
for (let heading of headings) {
  heading.style.backgroundColor = "#336699"
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.