Revisiting a Guardian storytelling piece

Redesigning this blog made me revisit some of the posts that I had written over the last two years. I had set it up as a little extra space to post some beautiful pieces of design, the odd note to my future self as well as somewhere to publish small bits of writing. So far, it’s been slow ~ only few posts published sporadically ~ but the redesign made me want to revive this blog and start writing a little bit more again.

Back in the day

This process brought back some old memories. It reminded me of the blog I kept when I first started teaching at Greenwich fifteen years ago. It was a place for course notes and learning materials as its primary purpose, but also included a design blog, web news and design links. This blog is now long gone from the live web and sadly I lost my backup of the site during a tech failure of drives. For purely sentimental reasons, I thought I’d look for it in the Wayback Machine. And there it was, (mostly) wonderfully intact still. (◠‿◠)

It was quite a trip down memory lane to look through my teaching materials, wonderful student projects (though most of those are sadly broken) and the content posted around design back in the day. Many fond moments resurfaced in my mind and then there was a very short post from November 2012 about a wonderful piece of storytelling about the American elections that year in The Guardian.

An old piece of design

It is always quite a moment when you look back at old design pieces. Many (if not most) of them make us all cringe… But then there are some which, surprisingly, survive quite well. And this old blog with its retro design made me smile. As this was a site for my students, I remember having great fun putting it together with the aim of sharing all sorts of design-related content as well as using it as a home for my teaching materials.

It’s probably fair to say that design would now be called retro or old fashioned but I still like it. It has a tactile feel with paper textures, corners tucked into the background for the menu panel and the RSS link. It is set in one of the most beautiful friendly serif typefaces, Vollkorn. And it was built as a grid-based WordPress theme ~ even responsive (though not quite as well executed as it would be if built today). It also featured a lovely little tool called #grid (hashgrid) by Analog (they were a designer collective around 2010-12 and no longer exist): this allowed the display of an underlying grid by holding down the [G] key. A nice little touch for a blog about design. I like it so much that I’ve now added it to this very blog as well, try it (◠‿◠)

I wanted to make sure to keep at least one glimpse of this old blog online myself, so I rebuilt that post as a static page for viewing in the browser. I’ve added a banner to highlight it as an extracted static version and kept the links in place ~ they all now lead to the archived pages on the Wayback Machine; be warned ~ while many pages work, some links lead to broken pages.
Take a look (◠‿◠)

Storytelling through parallax

This is the piece which my blog post was pointing to was so nice to revisit. I came across it back then via a tweet from Cole Henley who shared the link with a delighted “wow” and I have to say ~ I could not have agreed more. It was called “America: Elect!”, published by The Guardian, and tells the story of the US Election Day 2012. Unlike the usual news articles, this was told in graphic novel form.

Parallax scrolling was everywhere in 2012, and I know I had grown very tired of it to the point of being annoyed and frustrated by seeing it everywhere. It was basically overused and abused, applied in the same predictable way to anything and everything. This is why I still remember seeing it used for this particular publication ~ in this case, it was very effective, it had a real purpose. It was telling a story and was used to enhance the narrative. It was one of only very few examples I had seen that made good use of this particular effect.

view via waybackmachine:
“America: Elect! The action-packed journey to US election day in graphic novel form”

And seeing it again, now 14 years later, I still feel it’s a strong piece of storytelling. This is a perfect example of how trends and effects might date quickly, but if used in the right context, for the right reasons, they will survive and stand the test of time.

There would be much to say about the technical aspects, but there’s an article written by the developer on how it was built. This will give you better insight into the process if you are interested. The article itself is still on the Guardian website, even if it looks a little broken now. It is a great read ツ
The Guardian’s developer blog: How we built our ” America: Elect!” graphic novel interactive.

How lovely work can disappear

When I opened the original “America: Elect!” page on The Guardian’s website, it was blank in every browser I tried. The article which explains how it was created survives, yet the piece itself does not. The same is true for my own blog, which only exists because the wonderful Wayback Machine was keeping a copy, and many pages survive but not all.

We don’t often stop and think about what happens to websites that are online right now. For some reason we often think of the web as something fairly permanent because the URL might stay the same for years. But that isn’t the work itself. The code, its scripts, the images, dependencies, infrastructure behind it can disappear. They can change and they can stop it working. And the address then merely points at an empty page… What a shame to lose so many beautiful pieces of online design and publishing.

Thanks to the amazing Internet Archive

Were it not for the brilliant Wayback Machine, we would not be able to still view this wonderful piece in our browsers. Of course, this is not quite the smooth presentation I remember from back in the day. You do have to scroll and wait a little here and there. There may be some broken bits as well. It feels a little bit like looking at the old web through another layer, a layer of time, if you will. In this case, enough survives to show the creative approach taken in telling this story, and that is a wonderful thing! (◠‿◠)

This post isn’t meant as a technical piece about digital preservation or anything like it. It is simply my observation, as a designer who loves looking at wonderful pieces of work. I was struck by how this beautiful piece of storytelling and web design was so effective back in its day and remains a pleasure to view today. This does leave me wondering how the treasures hidden on the web might survive and which ones might slip away without anyone noticing.

PS: about Vollkorn

This beautiful serif typeface was designed by Friedrich Althausen ~ it’s open source and was the first typeface on Google Fonts at the time of its launch. The demo page is currently showing a security warning due to non-https delivery – I’d hate for it to get lost. So I took a screenshot to preserve it ツ Please excuse the lo~o~o~ong screenshot… just had to include it in full! I do love this typeface and here’s why ~ just take a look at its beauty (◠‿◠)