Janssen - Report to the community 2013
The first report with the our brand-new Contend CMS
Janssen asked us to do the website part of their second CSR report. This would be a nice way to showcase our new CMS, so we took the challenge.
An agency provided the moodboards, the Janssen communication team the articles, and we created a good looking website in just 216 hours (templating, webdesign, programming, project management & content input + page optimizations of the 3 languages).
Project outline
-
CSR report concept
A report structured in 3 main categories, collecting diverse stories about social, economic & ecological sustainability initiatives.
-
How we achieved it
We improved the structure of the previous report. Our biggest challenge was optimizing all the pages in a short amount of time.
Concept
A collection of articles
The report was structured in 3 main categories collecting diverse stories about social, economic & ecological sustainability initiatives and 2 secondary categories with more details about Janssen and a summary of the full report (about this report). Each category had its own icon and colors.
Related links
Navigation structure
The IA strategy defined a blog structure. A main navigation limited to 2 levels and every article surrounded with related (same category hierarchy) and interesting (same tags) article teasers.
Related links
PDFs of each article
Our CMS creates a PDF file of each article with a Webkit based engine that allows custom fonts & CSS3 styles. An additional stylesheet was used to transform the existing page header & headnav into a print header and to remove all other navigation elements. Each page had a link to its PDF file (no download basket).
Responsive styling for tablet & desktop
Most of the responsive styling was basic, only the homepage got special attention by reordering elements & photo ratios and the header received 3 different versions.
All articles where optimized to have equal columns lengths in tablet & desktop scaling.
GRI indicators
The Index GRI lists all the GRI indicators and their corresponding webpages. Most of links were to the articles of the report, some of them pointed towards other Janssen reports.
Related links
Adaptable elements to create a detailed report in a short period
We didn't need a lot of preparation for this project. We copied the structure of the previous report, and improved it based upon Janssen's feedback.
Our own CMS, built upon IA foundations, works with a structure that extends into all the page elements: an in-page element can become page or a section and vice versa. In-page blocks can hold more in-page blocks and all nesting is controlled by rules. Changing orders and positioning elements on other pages etc... is a piece of cake.
While waiting on the content & design, we already created the first templates in HTML5 & CSS, ready to be fine-tuned later.
The communication agency delivered us a general look & feel (mood board) of the website, which we used as a guideline to start the design of the website in CSS, improving template by template. Gradually we received final content which we put directly in the CMS and we could start fine-tuning the styles further, place photos and optimize the pages.
Responsive breakpoints are built in, so we could easily check tablet & website versions during the creation process. By using a combination of adaptable templates and a built-in grid system, we could quickly and easily optimize pages with minimal feedback from the client.
Multiple text styles
We made 5 different text templates with each their different semantic meaning & styles and 2 additional templates (PDF file & automatic in-page navigation). The HTML5 contenteditable editor and live previews of template switches (before saving) made it very easy to detail the content of all the pages. Most templates allowed nesting, so we could maximize the usage of our grid system.
Multiple photo & image styles
We received hundreds of photos, sorted them by topic in folders and uploaded them to our built-in image gallery. When the text on a page was ready we chose related photos for each article (the header image was chosen by the communication agency).
With the built-in image gallery and the grid-aware configurable cropping tool, it was easy to fine-tune and place our selections in the articles. Our photo template has multiple options for placing and styling captions.
Infographics & charts
Janssen briefed the infographics, we made small improvements where possible and hired Peter Eeckelaert to design them.
The charts are interactive and controlled with Excel sheets (easy updates & translations).
Our built-in note system allowed us to put notes on both the infographics and charts.
Detailed tables driven by Excel sheets
Our built-in table-styler allowed us to select an Excel file and design the table with a WYSIWYG interface on cell, row & column level. The table-styler saved all the styling rules in a hidden sheet, and prepared a translation sheet in the Excel fle.
The CMS translates the numbers automatically and the text based upon matching cells in the translation sheet.
Project information
- Client: Janssen
- Project website: Janssen - report to the community 2013 (website)
- Bie Van de Vloet: project management
- Ann Dierckx: content
- Frederik Van Zande: webteam lead, webdesign, templating, content input, fine-tuning
- Wim Put: development, content input, fine-tuning
- Juneau Cayenne: design concept
- Peter Eeckelaert: design (infographics)