Rex at Fimoculous.com recently relaunched his site with a brand new look, and a brand new approach to blogging — intended, he says, to signal the notion that “the future of blogging is self-aggregation”:
In a sense, we’re going back to the future. Blogs are starting to take on more of a “personal homepage” feel — a collection of media, writing, lists, reviews, events, geography, etc. In other words, we’re introducing structured data into what was previously just a text-based form.
That idea inspired me, and really got me thinking about what I want from my own website, and what I want to use it for. I asked myself: Do I just want a blog with other bits tacked on? Or do I want a site for and about me, a hub to collect and store all kinds of information relevant to and for me (events in my life and my thoughts on the world; links to other sites that interest me; what I’m reading/watching/listening to)? The site as it was is best described as the former; what I wanted was the latter. But how to get from one to the other?
Rethinking the site
Content-wise, earlier versions of this site have varied in focus, the content models always shifting in emphasis. I did previously make a few attempts to bring a kind of balance between the three main elements of my site — the longer blog entries, the shorter links, and the non-blog content. But whether it was due to my own web design limitations or whatever, nothing quite worked out exactly the way I wanted, my enthusiasm would swiftly dwindle, and I’d get itchy to change after a few months, or even weeks.
The design this current one replaces is a good case in point: it was a fresh, bold move to go with something that broke away from the typical/classic ‘weblog’ look, and it was perfect for the shorter links. But it was impersonal and anonymous despite its bold appearance; the de-emphasising of the main weblog was a mistake in hindsight; the rest of the site, too, suffered from the restrictions that came with the design; and the whole thing quickly became a nightmare to maintain technically.
Addressing the issues
So a clean sweep was deemed necessary. I had to decide exactly what I wanted from the site — both as it is right now, and where I’d like to take it in the future. From that, I had to choose a layout that would best suit the site’s main constituent elements, without being tailored towards one and jury-rigged to fit the others. And from there, my goal was to produce a design that kept things simple from a coding perspective, and visually neutral to benefit the content (but no so bland that it would disappear into the web ether).
The end result of the above decisions is what you now see before you. At the very least, it’s a start along the path I want this site to follow.
The spare layout was influenced by print design, and by clean, modern websites — like Khoi Vinh’s Subtraction — that don’t sacrifice utility for their appearance. The last thing I wanted to do was over-design the site like I’ve done in the past; my intention is for the content to come first.
The front page is now a three-column portal to my aggregated self: the tumble-esque links on the left, signifying their importance; the longer entries in the centre, the bedrock of the site; and my media consumption/status information/everything else on the right, an area left open for more aggregated information or detail to be added in the future.
Beyond the front page, meanwhile, the first two columns merge to create a basic two-column-with-sidebar layout that can be used for any purpose, and brings a much more harmonious uniformity to the site. Only a few subtle changes, for instance, separate my list of recently read books from my collection of photos.
And regarding the code, I’ve tried to minimise my use of divs for positioning page elements, as well as keep down the number of classes for styling the text; the result is a streamlined site that should load a lot faster, with a new stylesheet that’s something like 33% smaller than the last. It only took me a week to produce from concept to finished article, too.
- The layout grid as it is has been aligned in blocks of 25 pixels using Smiley Cat’s very helpful background image grid. I may in future decide to realign the layout to a stricter grid a la Mark Boulton’s five simple steps to designing grid systems, which would only require a few minor tweaks to the CSS file, but there’s no rush.
- The icon in the masthead image (and favicon, if you can see it) comes from AIGA’s set of passenger/pedestrian infographic symbols which was recently made freely available on the web, and is admittedly an influence on the new look. I’ve created a few of masthead images like the one above using various icons from AIGA’s collection, which I will be swapping around as and when I see fit — and since they’re technically div backgrounds declared by the stylesheet, I only need to change one line of code each time and I’m good to go.
- I’m still playing around with the format of the monthly/category archive listings for the Macrolog and Microlog, to see if I can make them more useful for anyone digging around. But again, there’s no rush.
- Speaking of categories: I’ve begun a bit of a purge of the category archives, removing posts that no longer have any relevance to me or to the site in context. A few of these are outright deletions — such as the many outdated entries filed under Site Updates — but many will be exported to more suitable homes.
Now that the hard work is done with the design, it’s time to add the content, and start experimenting with ways to aggregate more personal data and better represent the non-blog content on the front page.
I’ve already got four months’ worth of links saved in my ‘Blogfodder’ folder awaiting distillation/publication — not to mention that whole API business to figure out — so I’d better get to it.