Spotlight: BBC CSR Report

Sep 25, 2009

We take a look at the challenges of producing the BBCs 08/09 Corporate Social Responsibility Report.

When the BBC needed their 08/09 CSR report designing to not only look great in print, but work so well on the web that they wouldn't ever need to print a copy, they came to us.

The result is a vibrant, rich document that shouts about the public purpose and impact of the BBC in every way, from great photographs to easy to understand infographics and balanced text.

BBC Corporate Responsibility Report, 3 pages stacked.

With more readers digesting information digitally on screen and mobile devicies, producing a report which works online isn't only good common sense, it's also another important step in working towards a green BBC. Despite being one of their most important publications, no copies were printed or distributed, taking another chunk out of the beebs carbon footprint.

Producing the report

Previous years report layout wireframe

The original report was set in a format meant to be printed and wasn't designed to be read or navigated on screen.

New report layout grid

So the first thing we did was switch the layout to landscape A4 which fits much nicer on screen without the need to scroll. We then created a 4 column grid, splitting projects into two columns each, defining them with image regions at the top and bottom. This broke up the projects nicely while still keeping the maximum amount of information on each page.

New report wireframe layout

After receiving the sample content we decided the project regions needed to be much more defined and flexible as to include bigger projects, pull quotes and links to other reports. By altering the top and bottom image regions to be full bleed and variable in height we created two defined but flexible regions which could be used in a variety of ways.

BBC RaW and BBC Blast page from previous year's report BBC RaW and BBC Blast page from the new report

Extend and Diversity page showing graphs from new report

The result is a visually exciting layout that works as well on screen as it works on paper. The reader can now view two projects per 'screen' in easy to read chunks and immediatly flick through pages without having to scroll or zoom in and out.

Detail view of contents page showing link descriptions

Another great thing about optimising a pdf for screen viewing is the ability to link directly to sites on the web or other reports. We used a simple icon system to show the reader which links were external sites and which linked to other pages within the report.

A link to another page shown in the flow of text of a case study

We also included a 'back to contents' link on every page making it easier to flick between chapters, encouraging the reader to browse in the order they choose.

Return to Contents Page link shown at the bottom of a report page

After the report was complete all pages were bookmarked allowing ease of navigation.

Page bookmarks for the report shown in Adobe Reader set up for each chapter and section

All content was then arranged in the correct reading order with full alternate text for graphs, tables and images making it accessible to screen readers, and more optimised for search engines. This last step is vital for people with specific accessibility needs, and provides convinient features for other readers such as bookmarks and better searching.

Detail view of graph and some text

View the finished report

You can view the finished report and previous reports on the BBC Outreach Reports Page

We also produce the website and newsletter for BBC Outreach.


Advice.

Charity website advice white paper

Sign up to our newsletter and receive a free copy of our "Effective Charity eCommunications" white paper.