Old the front page! The story of 1821 Mode

To celebrate the Guardian’s 200th anniversary we turned the theguardian.com network front into its 19th-century ancestor. Here’s how we transformed the hack into reality using a selection of tools, some styling and creative thinking

Frederick O''Brien, Ara Cho, Mario Savarese, Samantha Gottlieb

Published on Tuesday, 22 June 2021


The Manchester Guardian, first edition, 5 May 1821. Page one
The Manchester Guardian, first edition, 5 May 1821. Page one Photograph: David McCoy/The Guardian

In April we participated in our first Hack Day. It was a chance for new software engineering fellows to get to know each other and make something fun in a no-pressure environment. We settled on the idea of an old-school homepage that paid tribute to the paper’s first print edition, published on 5 May, 1821. We made 1821 mode – an Easter egg webpage rendering today’s stories in the style of the (then) Manchester Guardian’s first edition.

The first iteration was a React app that pulled through stories from the Guardian Content API (CAPI). By feeding content into one long column using the column-count CSS property, we could imitate the layout of a 19th-century newspaper.

The hack in real life

After hack day was over it was a surprise to be asked to implement 1821 mode on the website in celebration of the anniversary. It was possible, provided some of the features in the original hack were scaled back.

Instead of pulling through the latest articles, it would be a custom, unchanging selection that would be linked from the homepage for one week. Furthermore, articles would not have standalone pages – ‘continue reading’ links would take visitors back to the real 2021 mode site. With engineering manager Jon Soul’s guidance, we built the page. The Guardian’s executive editor, reader revenues, Mark Rice-Oxley provided the articles on the day and group product manager, Abi Bendall, helped pull it all together.

Keeping our Content API happy

A big part of making it work was how it interacted with our Content API. In the original hack whenever someone visited the page it would request articles from our Content API and populate the page. That’s fine for a demo with one user, but what happens when a page gets thousands of views, each one sparking eight Content API calls? Some back of an envelope calculations showed hundreds of thousands, even millions of requests weren’t beyond the realm of possibility.

We wrote a script that requested the chosen articles and stored them in a static file. The app would then make ‘requests’ to that file. That way if the 1821 Mode page had eight stories, only eight Content API requests would be needed for the initial build. Beyond that it wouldn’t be needed at all.

Styling and ads

Creating the 1821 mode for real also gave us time to improve its styling and responsiveness. We added media queries so the number of columns would change depending on device size. For desktop it was six, for mobile, two. Font sizes got similar treatment.

The fonts themselves came from Google Fonts and mostly carried over untouched from the Hack Day design.

The font used in the original hack masthead was UnifrakturCook, which was fit for purpose, but for the second version we were provided with a beautiful crisp SVG of the original Manchester Guardian splash as seen on the first edition.

We also updated the pricing. The first edition cost sevenpence. In this version, we created links to the Guardian’s subscription and contributions pages.

All ads in 1821 mode used free-use images found on Wikimedia Commons.

un-edited ads from Wikimedia Commons
Unedited ads from Wikimedia Commons Illustration: Frederick O'Brien/The Guardian

After manipulation in the open-source GIMP photo editor, we reduced these to PNG files, with the lines solid black and everything else transparent. That way they could replicate the ink on paper look we needed.

Edited carrossier ad.
Edited carrossier ad. Illustration: Frederick O'Brien/The Guardian

Collaboration with editorial

Of course, all of the above would have been moot without the most important part of any newspaper: its editorial stories. During our kick-off meeting, it was agreed Mark would curate a selection of journalism appropriate for 1821 mode, complete with 19th century headlines, which we could input using a find and replace function in the app.

Mark also knew exactly how many issues of the Manchester Guardian were published, and what edition the 5 May 2021 would be: 54, 337 to be precise. With all these elements in place, we were ready to assemble the page on the morning of the 200th anniversary … or so we thought.

Ship it

Putting the page together on the day was relatively straightforward. We never could get the ads to sit just right due to the flexible super column approach. Sometimes the page sat beautifully; other times it didn’t. Still, the ‘full’ page wouldn’t look too out of place in the 1800s:

First edition vs 1821 mode.
First edition vs 1821 mode. Illustration: Frederick O'Brien/The Guardian

When the time came to publish, it was time to decide where. The original hack had been partially deployed on Surge, which we struggled to map the official URL to. We had similar issues with Netflify before eventually settling on an Amazon S3 bucket.

1821 mode treat link guardian homepage
1821 mode treat link guardian homepage. Illustration: Frederick O'Brien/The Guardian

And that was it! We featured as a treat on the network front and the author Margaret Atwood even liked it!

We’d like to thank everyone in product and engineering and editorial who worked with us to bring this project to life. It was an amazing experience and introduction to Guardian culture.

Continue reading

Virtual Hack Day April 2021 A Day in the Life: Max Duval