Stedin Organogram

Naast PowerPoint presentaties werkt Stedin ook graag met interactieve PDF bestanden. Voor de nieuwe organisatiestructuur werd in eerste instantie ook een PDF gevraagd. Uitgangspunt voor de vormgeving was echter een cirkel met daarin verschillende schijven (taartpunten) die de afdelingsdoelen per onderdeel binnen Stedin moeten weergeven. Nadat we de opzet in InDesign en Illustrator hadden gemaakt kwamen we tot de pijnlijke conclusie dat die verschillende taartpunten niet als 'hoverable' elementen konden worden gemaakt. InDesign, en dus PDF, accepteert namelijk alleen rechthoeken als interactief element.

Maar een erg groot probleem met interactieve PDF bestanden, is dat die niet in elke browser goed getoond worden. Aangezien dit organogram op het intranet geplaatst zou worden, betekende het ook dat het in verschillende browsers (Google Chrome, Apple Safari, Firefox, Microsoft Edge en zelfs Microsoft Internet Explorer) moest werken. En niet elke browser van de bezoeker van het intranet binnen Stedin heeft Adobe Acrobat als plugin geïnstalleerd. Om het organogram toch voor een zo'n groot mogelijk publiek visueel te maken hebben we een aantal scenario's bekeken en uiteindelijk besloten om een SVG (Scalable Vector Graphic) te maken omdat dit zelfs door Internet Explorer 9 wordt ondersteund.

De SVG werd als code (dus het XML bestand waarin de SVG wordt beschreven) op het intranet geplaatst, en vrijwel elke browser kan dat weergeven zonder extra plugins of andere hulpmiddelen in de browser. Een ander groot voordeel van SVG is dat het een XML bestand is, wat in dit geval betekent dat er ook CSS aan toegevoegd kan worden. En dat is wat we met deze SVG hebben gedaan. Naast een goed uitgekiende laagvolgorde in Illustrator, de basis waarin we het SVG bestand hebben opgemaakt en geëxporteerd, hebben we in een code editor de nodige CSS toegevoegd om de hover effecten te realiseren.

Het resultaat overtrof de wensen van Stedin, en tot op heden staat deze SVG te pronken op het intranet van Stedin.
(Ik kan uiteraard niet de URL van het intranet opgeven, maar hieronder zie je de SVG zoals die ook op het intranet van Stedin te zien is)

De SVG is gemaakt tijdens mijn dienstverband bij oOdesign.