Article 19

An intuitive online eReader for an immersive user experience

Article 19 Online Reader Screenshot

Project overview

Wholegrain Digital has worked with Article 19 since 2017. An organisation dedicated to analysing and reporting on freedom of expression, Article 19’s team is based in multiple cities all over the world, working on both regional and global issues.  A few years ago, we designed and built a brand new website for the charity.

In the final quarter of 2019, we worked on an online reader project for Article 19 in a bid to revolutionise how the organisation presents their most important work.

Features

  • Intuitive eReader experience
  • Unique URLs for each section
  • Next and previous chapter buttons
  • Interactive footnotes
  • Responsive tables

463ms

reader load time

0.22g

of c02 per page view

The Problem

Most of Article 19’s work relies heavily on documentation. The organisation produces hundreds of reports of high quality research by experts, relating to freedom of expression challenges.

More and more, the Article 19 team realised how dependent they had become on PDFs to showcase their work online. While PDFs aren’t necessarily a bad thing, there are many reasons why they can hinder an organisation’s efforts to showcase their work in the best way possible. These reasons are elaborated below:

  • Text in PDFs cannot be crawled by search engines. This means that organisations like Article 19 may not rank for relevant search queries, despite having produced quality resources on the subject being searched
  • PDFs cause accessibility issues, particularly for those using mobile devices
  • It is not possible to track user journeys with PDFs, or see what sections of your documents are being read the most
  • PDFs are not easy to share – if the document is large, you may need to use a service like WeTransfer due to attachment size limits in email.

The Solution

After meeting with Article 19 to brainstorm a solution, we agreed to develop an elegant online reader which would reduce the organisation’s reliance on PDF-based content. Article 19 wanted a sleek and editorial feel for the online reader – something that gave their documents the platform that they deserved.

From a content entry perspective, we decided to create the reader inside Article 19’s existing WordPress site, rather than splitting it out into a seperate sub-site.

Article 19 Online Reader Screenshot

The Result

The new online reader is a beautiful online experience that allows users to explore Article 19’s incredible work with ease. Design-wise, we used muted colours and a serif font, creating a break from the style of the main Article 19 site. This gives users the experience of leaving the main site and “entering the reader”. Removing the main menu and footer allows for an uninterrupted reading experience, while a button is always present to take users back to the main site if they need to access it.

The launch of the online reader coincided with the launch of the Global Expression Report 2018/2019 – Article 19’s most significant piece of work, which is released annually.

Key features of the online reader include:

  • A linked table of contents that allows users to jump from section to section
  • Unique URLs for each section to allow users to share information more easily
  • Next and previous chapter buttons
  • Interactive footnotes that expand on click
  • Tables which allow Article 19 to present information in a way that is accessible on both desktop and mobile devices.

Another benefit of the online reader is that videos can be embedded in any section. This allows for a more immersive experience that PDFs simply cannot offer.

Most importantly, Article 19 can now see what parts of their documents users are most interested in, as page views for each section of the document are easily accessed.

One thing we understood from the outset was that PDFs are not obsolete – there may be many cases where users would want a version of the report as a PDF, to print or use in other ways. This is why we added a download PDF button that is always available in the header, should a user need it.

Interactive footnote functionality

Documents that are accessible and sustainable

Often, those who are most at risk when it comes to freedom of expression rights are located in parts of the world with lower bandwidths. As with Article 19’s main site, it was very important to ensure that the Online Reader loaded fast.

When tested, the reader scored a load time of just 463ms on Pingdom.

At Wholegrain, our mission is to green the internet. Good performance and sustainability go hand in hand. By ensuring that the online reader was coded efficiently and avoiding bloated frameworks, this piece of work has low impact when it comes to data transfer.

Article 19 Online Reader screenshot

Article 19 can now be confident that they are providing a more immersive and accessible experience for users across the world.

 

View the online reader

The quality of your design work is very high. We have found WG a very supportive professional partner in helping us develop a better website and digital communications products and workflows. You understand our needs and issues very well and are always able to offer thoughtful, useful advice and suggestions.

article 19 logo

Sophie Hall