An alternative title for this post could’ve been “Falling Into Information Design”. When we conceived of India Ink, it was going to be “social-first”. We mentioned this in the first post in this series but the general idea was that the website would only be an archive. All our content would be native to social media but we’d still have a website because that would give us permanency. That is now how we really think of it anymore.
There have been projects all across the world that think about how to exploit the advantages of the web to make documents more interactive. One of my favourites is The Pudding, that talks about their work as “visual essays”. Another one closer to home is EPW Engage, that had a very similar remit to us. Engage took academic papers and built interactive pages for them. Each page was a new experiment in communicating academia to a general audience. But Engage had a much larger budget and a much larger team than we do.
We wanted a layout for articles that took advantage its digital nature but that was still standard and replicable – not something new for every piece. Now, we haven’t really done web development before – we’ve just been tinkering with internet projects for almost 2 decades at this point. (Visvak and I had our first WordPress blog in the mid-2000s. Funny story, ask us about it at some point.) And we definitely haven’t done any information design – beyond thinking about structuring texts as writers. (Good writing is information design and don’t let anybody tell you different!) So we weren’t going to be technologically sophisticated.
Let me walk you through what we came up with.
Annotating An Article
At the top, we have an image. This image gives the page some colour and life – but mostly it’s there because without an image, links look like crap on social media.
From here on, we stick to a clear colour palette that matches the rest of the site. Black, Yellow and White. High contrast for easy reading – that’s the hope at least.
Then, we have the “Why You Should Read This” section. This is a lesson that journalists have painfully learned – everything needs a hook. In this section, we tell readers why this article is relevant to them, usually by placing it within some current debate. For example, a paper about dravidian politics was relevant as old debates were renewed in the run-up to elections in Tamil Nadu. It also contains word counts so audiences can know how much time we’ve saved them. (One academic suggested we add a “zzz-meter” to rate how boring a paper was to read – we decided that maybe that would be rude, hmm.)
Then, we come to the main body of the article. Like with the “Why You Should” section, every point in this section is in a kind of box that can be opened and closed. This is a standard HTML5 element called the details tag. Unlike the “Why You Should” section, these boxes start “closed” – it’s up to the reader to open them.
This comes from an attempt to have our cake and eat it too. We want readers to be able to choose how in-depth they wanted to go. If they just wanted the gist, they could skim the top level points and be done in 2 minutes. And that’s totally fair – the central ideas we put there are about what we’ll remember anyway. But if readers wanted more context – on every point or just one or two specific areas – they could expand that point and get it.
Now these are lists for many reasons. I won’t go into all of them except to point out two things. First, the top level points are numbered because we found that it makes reading seem much more straightforward. No matter how complicated the topic – when you see there are only 7 points, you are going to feel less intimidated. And second, there’s a small + sign on each box to show they can be maximized. We initially made the boxes without them and nobody understood that they were meant to be clicked on.
Finally, we come to the end of the article where we have a citation with a link to the source paper. If we can find an open access link, we use that. Otherwise, we resort to jstor. This section also now contains a disclaimer – something we started adding retroactively after about 2 months based on reader feedback. We wanted to flag that these summaries had limited scope and shouldn’t be read as an overview of an area. As non-experts, it’s essential that we don’t overstate the value of what we do.