Online First.

Thinking digitally in Corporate Reporting.

When we talk about Online First, we see this as a new “approach to reporting” rather than a “solution”. Sure, there is a technical dimension to it as it is built on a web-based multi-channel Content Management System. But Online First goes far beyond that tool, it is a new way of approaching corporate reporting. From our perspective this is the most important dimension to explain. In this year’s Round Table, we have therefore decided to focus on the visionary dimension and the rationale behind it. We wanted to explain “how to think online first”.

Why “thinking digitally”?

Print runs from companies all over the world are declining. On the other hand, we see a rising usage of digital reports: Your audience already reads your reporting content on a screen. And this is no surprise, because our information needs have changed.

print runs of annual reports

When interested in a certain piece of company information, I won’t wait 3-7 shipping days until I get a printed copy of the report. I want the information instantly. This does not only apply to my daily news but also to corporate reporting. I also want to access this information no matter where I am: if it’s in a train, during a meeting or on my desk. For most online reports mobile usage is already at 10 to 20 percent, for some reports even up to 35 percent. And as all trend analyses show, mobile use will continue to grow in importance.

Just think about this for a minute: Almost all content today is read on screen, yet content creation for corporate reports still typically starts with a printed page in mind. This is a paradox situation in today’s reporting.

Paradox in today’s reporting

Even as we think that stakeholders will consume reporting information on screen, most companies still follow a print-centric approach. But to be straight forward, there is no best of both worlds: in a print-led process everything is optimised to fit the outcome in portrait format, multi-column, double-spread. Of course, this outcome does usually not suit well for mostly landscape-shaped screen devices.

And to be honest: When someone asks us, as digital reporting experts, how many reports are 100% thought for digital today, guess what our answer would be? Zero. We don’t know a single report, that is – in every aspect – truly designed, prepared, structured or written for the digital audience. This – of course – also includes our own Online First projects. For us, the journey has just begun and it’s always good to have a goal. We want to help our clients to think about their corporate report from a digital perspective, which is a gradual shift as it involves lots of people with different backgrounds, needs and challenges. But every journey starts with the first step.

PDF is a digital format

“Online First” means starting with the online version instead of the printed report. Taking a closer look, the key idea behind Online First is to think about what works best on a screen in terms of presenting content and information. And optimising content for the usage on digital devices also includes PDFs as they are read on a screen device most often.

For example, a double-column layout works fine when printed, but on a screen the user would need to scroll down and up while reading to switch the column. There are only few examples of web-optimised PDFs. One example would be the adidas PDF, which has a landscape format. What is also really helpful is that the different tables of contents are linked as well as the running head which allows the users to jump directly to the section they are interested in.

adidas Annual Report

So we would call this a best practice example for a screen-optimised PDF, but no matter how much you optimise your PDF for the screen, you need to keep in mind that PDF by idea is no genuine, flawless online format. The PDF format, developed in 1993, was designed to share and archive static documents. The capabilities of interactivity, multimedia, accessibility or usability are extremely limited compared to online reports. You will understand instantly if you, for instance, try to read the adidas PDF on a smartphone. And by that we are not talking about time or bandwidth needed to download the PDF (read more about the limitations of PDFs).

A responsive online report always adapts itself to the screen size, no matter if it is a landscape or a portrait format. This ensures that the user always has the best possible experience. To achieve this, the whole digital concept, regardless of whether it refers to the basic layout, the navigation or even interactive elements, always needs to take different devices into account.

Online First in a nutshell

From a technical perspective Online First is a seamless multi-channel publishing solution for corporate reporting. It allows for the creation of several report formats from one single source, the CMS. Starting with the online version, other report formats – such as the web PDF, printed version and mobile apps – are generated automatically from the CMS. “Automatically” means at the push of a button, without use of any other software (e.g. InDesign), and fully repeatable at any stage.

Online First Annual Report

In general, the whole implementation process is not that much different from a print-led approach, so it starts with project planning, conception, design and the set-up of the report framework in the CMS. The main difference is the focus on the digital experience. This includes that structure, layout, images, tables, graphs, texts and all interactive report content is kept as flexible possible in order to serve all report versions and their use on screen. Read more on our Online First approach on

Case: HHLA Online First Annual Report

What does this mean in practice? The HHLA Annual Report is a good example and case study. It has been produced as an Online First report for three years now. The landing page, for example, follows a purely digital concept. The main idea is to use a rotating compass wheel, which offers various teasers and links into the online report. The background video and the background images on the landing page create an association with the logistics industry. By clicking on the different icons, the user gets various key figures and more information about the CEO letter, together with links which bring the user to the more detailed content.

HHLA annual report

A novelty this year was the CEO video that has been produced for the first time. Videos are perfect for giving the report a more personal touch and make great use of the internet as a multimedia channel. Another highlight of the report is the digital-only magazine, where a compelling storytelling concept about the anniversary of 50 years of container shipping has been developed. To make this topic more engaging, gimmicks and interactive solutions have been developed. The whole report is responsive, which means that the content adapts itself automatically to the screen size of mobile devices such as iPads, iPhones, any android devices and others.

A further element that is optimised for the digital usage is the materiality analysis which is not presented as the usual static coordinate graphic but as an interactive version. Users can filter topics by relevance and/or area and all the topics are also linked to the more detailed content.

As mentioned before, the report PDF can be generated anytime from the online report, at the push of a button. To make it clear, there is no typesetter involved in creating this PDF. The layout of the PDF is created automatically based on pre-defined format requirements according to the HHLA print specifications. These specifications include settings such as: one or double column layout, justification, hyphenation, margin left/right/top/bottom, position of running head and page numbers, fonts and font-sizes, layout of tables, graphics and special pages.

Technically this is done with independent style sheets for online and for the PDF, each with their own specifications, which allows us a high flexibility for taking all format needs into account. A PDF for example is a static document which is often printed out and therefore needs to follow completely different rules. Interactive infographics, e.g., need to be replaced for the PDF with a static image which includes at least the most important information.

Case: Shell’s Today’s energy needs graphic

“Thinking digitally” is also important in terms of information design. In the Shell Sustainability report you will find a lot of interactive graphics. For instance, this graphic on Today’s energy needs has been created primarily for digital use. It is clickable and the user can explore all the required information. It also adapts its layout to fit smaller screens, all the information is now underneath instead of next to each other. On mobile devices the graph also reacts on touch commands and it scrolls to more detailed information. But how can this be translated into an automatic PDF? For the PDF, a version which shows all information at a glance has been created, as it is not possible to add interactive elements to a PDF.

Shell interactive graphic

This example shows how digital thinking works. The internet, as a digital channel, suits very well to communicate complex information as it layers content that can be revealed on click. By making this infographic interactive the user is not overwhelmed with information, and can explore the information in an engaging way, whereas in the PDF the goal is to transport all available information and still fit it on one page.

Case: Merck digital magazine

Another example for thinking digitally is the storytelling part of the Merck Corporate Responsibility Report, which revolves around the theme of “stakeholder dialogue”. It consists of three stories. In each story a Merck employee and a stakeholder discuss specific focus areas. As the decision was made to have these stories only online, the idea was developed to present the dialogues in a way which is typical for nowadays digital communication, as an interactive smartphone chat. As the reader scrolls down, chat bubbles pop up and the participants start to share messages, pictures, links and videos. But not only that – readers can go as far as to decide what the next topic of the chat will be.

Merck magazine csr report

Case: Web accessibility

Accessibility is also a very important topic in digital reporting. The internet is an essential channel to access and provide information and services. Web accessibility allows everyone, including people with disabilities, to perceive, understand, navigate, and interact with websites. Screen readers, for example, can read the content of a website out loud for blind users. Therefore, digital reports are the best option to make your content available to everyone, including people with disabilities.

Shell accessibility

Shell has very strict guidelines for web accessibility. For this year’s reports the focus was on enhancing the accessibility of charts and world maps even more, together with a refinement of the existing charts. Besides the optimisation of the colour palette in order to ensure best contrast experience, new markers within the world maps have been introduced. By using different markers and shapes for assets it is ensured that colour does not convey a message. Otherwise it would be hard for colour-blind people to comprehend the information in these charts. To support this, small letters have been introduced within the legend of the chart.

These examples clearly show how easy it is to make the reporting content more accessible for people with disabilities. The web is the best place to work on this, as there are many standards and tools available that help these people to make their life easier. This is also something which needs to be considered when “thinking online first”.

Conclusion and outlook

Digital media is already well established at the heart of today’s information world. Everyone uses the digital channel to receive information. But shaping these messages to fit to the quite different needs of the digital channel is still in infancy. Especially when it comes to larger amount of content like in Corporate Reports, we see that digital thinking is still the exception rather than the norm.

Digital thinking does not necessarily mean you need to start creating content from an online first perspective, but it certainly makes things easier if your communication concept takes the digital channel into account right from the beginning. Think about how it can help you to transport your messages.

If you allow us a prediction for how this will shape up in the future, I would foresee that not one channel will replace another, but rather support each other to whatever works best for the users of information. Pretty much like everyone expected television will kill radio, which as we now know, did not happen.

So, in terms of digital vs. PDF vs. print, we see that digital will be the channel for instant access to information and it will be increasingly mobile. PDF will continue to serve as a point of reference, be used to archive and will probably adapt to better fit on screen devices. Finally, I see print to serve as a brand ambassador, to communicate quality and probably we will see print to focus on just a few high-level information from the reports.