Nyrstar - Annual report 2012
A collection of stories next to the usual facts & figures
Our job was to create a good looking annual report in a short period of time with a small team. We had a few weeks of preparation time, but only received the final content 2-3 weeks before deadline (+140 pages of text in 3 languages)
The concept was to create 2 different sections:
- a smaller 2012 review + stories section whit lots of design detailing and full width pages
- a huge facts & figures section that contains all the required information of an annual report, with a side navigation
Related links
Project outline
-
Annual report concept
An annual report optimized for tablets & desktops with a download basket for PDF's & Excel files.
-
How we achieved it
Preperation took 3 weeks with 3 persons and we finalized it in 2 weeks with a small team of 5.
Concept
Responsive design for desktop & tablets
A mobile optimization wasn't required, but the report had to be optimized for tablet usage.
Next to the more common responsive tricks we did some specials for that time:
- previous & next buttons at the bottom, swiping for tab content
- overviews with changing ratios: each overview block changes ratio and size when you scale the website. Only one image was used and its parent element defined the ratio and acted as a mask allowing us to have different compositions with the same image
Create your own PDF report
Each page had a CMS generated PDF, which used a special stylesheet to remove & transform the interface for print optimization. Every table had a downloadable Excel file.
On the download basket page you can select pages and sections to download them as a single PDF. If you select Excel files, you receive a ZIP file.
Related links
Fast table workflow with Excel files
We used our own "table mapper" tool to style and translate the 138 tables for the report. This tool also allowed us to easily update the tables when the final data arrived. It works as follows:
- select an Excel sheet as source in the table mapper.
- style the table with the WYSIWYG interface, and embed notes from the CMS into them. The tool saves the styling in a separate sheet of the Excel file.
- the table mapper creates a sheet for translations, for each language a column. Numbers are translated by the CMS.
- the files are sent to the content team, who could change the data & translate the cell text. Once we upload the update, we have a good looking table in 3 languages with the same data.
The Excel downloads are created by the CMS and contain only 1 sheet with the translated content & numbers, and the notes injected at the bottom of the file.
Related links
How we achieved this in such a short time
After receiving the first final content we only had 3 weeks of putting it all together before deadline, while receiving corrections.
With a small 5-man team for production, the few weeks of preparation with 3 persons were crucial.
- setting up the CMS, and the basic structure, preparing the table mapper, and basic templates
- making design drafts, implementing them into our templates with CSS, creating different options & styling configurations for each template
- making basic selections of photos we could use
Once the content arrived, we had 2 extra persons to fill in the content. In the meantime we:
- set up the final structure, pages & content blocks and fine-tuned these so our content staff could fill them in
- created new templates & styling, fine-tuned existing templates, made the website responsive
- filled in the photos, created the infographics
- prepared the pages for translation
- optimized all the pages for equal column heights
A flexible header concept
We created a flexible header concept for the 2012 review & stories section that could include multiple elements:
- main photo with optional a caption + control over the styling & location
- clipart with infographics
- navigation elements layered on top
- related pages (right top) that linked to related facts & figures pages
- inpage navigation (left bottom)
Frequent use of infographics
We received a lot of infographics from Nyrstar, which we improved, translated and prepared to be used on the website.
- used in some page headers
- full summary pages with only infographics to communicate key figures
- reuse of infographics in the content to highlight certain key numbers
Photos
The in-house Comfi CMS which we built specifically for these projects, has a built-in cropper tool to easily crop photos from the image gallery in the correct dimensions.
Different caption styles
I created multiple class switchers in the image templates to place one or more captions above, under and on the photos.
Captions on the photos provided more fine-tuning options like the location & color for maximum contrast.
Multiple photo compositions
I created +10 photo composition templates that allowed us to maximize the use of photos on a small space.
Templates could be switched with 2 few clicks to try out new compositions. Each template had its own options to manipulate the height, and communicated that with the used grid space (width) to our cropping tool.
Template options for text styling
I created different text templates each with their own semantic HTML and styling. We also created a note connection into the WYSIWYG editor, to attach (reused) notes in the content.
Titles in the template have extra styling options that change title size without changing semantics. When nesting the title templates the HTML adapts (eg. H3 becomes H4).
Emphasizing the responsible manager
I created a custom template for the manager's review quote. We placed them at the bottom of the pages related to his achievements.
A few custom templates
For a few important communication points I created custom semantic templates.
Multiple table styles
It's easy to add styles to the WYSIWYG table mapper. The tool assigns CSS classes to the selected cells, rows & columns. I could reuse and tweak the default ones, and added a few custom styles for Nyrstar.
Project information
- Client: Nyrstar
- Agency: Comfi
- Marion Van Parys: project manager
- Frederik Van Zande: webteam lead, UX, templating
- Wim Put: development
- Peter Eeckelaert: design
- Brecht Traen: content input