Fagbevægelsens Hovedorganisation
Hvilket CMS skal vi vælge?
Da LO og FTF slog sig sammen til Fagbevægelsens Hovedorganisation, FH, skulle der naturligvis laves et nyt website til de 1.400.000 medlemmer.
Ønskerne var mange, og det vigtigste var at brande den nye organisation med en moderne formidling af lønmodtagernes holdninger, politik og baggrundsstof.
Ud over et moderne kommunikations-website med mange redaktører og en pæn håndfuld integrationer til diverse eksterne systemer, skulle sitet også have en intern shop-løsning til materialebestilling.
Så hvilket CMS skulle de så vælge? De to organisationers websites var lavet i henholdsvis Typo3 og WordPress, og begge var glade for deres eget. Flere af interessenterne var lune på Drupal, så der var nok at vælge mellem.
Peytz er blandt de største danske aktører i alle de tre nævnte CMS'er (og har desuden et par stykker mere i værktøjskassen), så vi vidste, at alle tre kunne løfte opgaven. Men FH havde brug for en anbefaling.
Vi ville benchmarke os mod de bedste nyhedssites. Og det mener jeg, er lykkedes. Vores præsentation er second to none i organisationsverdenen, og det er jeg sindssygt glad for.
Martin Goldbach, Digital redaktør, FH
På højde med de store dagblade
Vores anbefaling blev WordPress.
WordPress har p.t. verdens bedste redaktør-interface kaldet "Gutenberg". Det sætter en helt ny standard for, hvor nemt og frit en redaktør kan opbygge sine sider - og stadig overholde de visuelle guidelines. (Og helt ærligt havde vi ikke kunnet opfylde FH's mange ønsker om fleksible sidetyper og egen styring af layout og visuelt udtryk til mindste detalje uden).
Ønsket om en webshop klarede WordPress med deres fornemme integration til en af verdens bedste e-commerce løsninger, WooCommerce (som laves af den samme organisation, der står bag WordPress.)
Det var afgørende, at Peytz kunne levere alle systemer, og derfor kunne give os en relativt uafhængig anbefaling.
Martin Goldbach, Digital redaktør, FH
Tre måneder fra aftale til lancering
På kun tre måneder gennemførte FH og Peytz en fuld UX- og Designproces, med fokus på at tale til medlemmerne i øjenhøjde, sætte et menneskeligt ansigt på forbundet og understrege brandet.
Logo og farver blev leveret af FH's egen designer. Derfra udviklede vi sitet med en kombination af troværdig typografi, stærke kontrastfarver, et moderne layout og et billedbrug, der viser medlemmernes hverdag “uden filter”. Resultatet skaber identitet og følger best practice User Experience.
Backenden indeholder flere tunge integrationer med et skarpt fokus på hurtige svartider, blandt andet ved at benytte teknologier som React, Vue.js og Elastic Search.
Resultatet er et site, der opfylder FH's drømme, og blev færdigt til tiden - også selvom vi har arbejdet agilt hele vejen og ændret scope undervejs, når behov og ønsker ændrede sig.
Blocks og frontend-teknologier
Fho.dk benytter WordPress editoren Gutenberg til at opsætte indholdet på de enkelte sider. Det giver en stor fleksibilitet, da layoutet kan ændres for hver enkelt artikel, og redaktøren kan samtidig se layoutet, mens artiklen opbygges.
For at opnå et designmæssigt komplekst udtryk og samtidig bibeholde en redaktionel dynamisk arbejdsprocess har vi udvidet Gutenberg til, også at kunne håndtere Nested Blocks. Flere blocks er udviklet med REACT, og er både statiske og dynamiske. De resterende er udviklet med REACT backend hvor visningen renderes i PHP, og dermed udnytter serverside rendering for højere performance.
Ved at udnytte WordPress native REST API kan redaktøren fremsøge indhold fra WordPress Posttypes, så et sidelayout hurtigt kan opbygges ved hjælp af artikler, emner, citater, medarbejdere mv. For at lette redaktørarbejdet med ældre ikke Gutenberg kompatible 3.parts løsninger har vi wrappet shortcodes i blokke.
Søgningen er bygget med Vue.js for at øge performance i forhold til filtreringer. Søgningen benytter WordPress' indbyggede REST API til at returnere resultater. Samme søgning lægger grundstenene for deres arrangementer, der kan filtreres på emner og områder.
Frontend teknologier brugt på på projektet
- Webpack (assets bundling/dependency graph tooling)
- Optimization (optimerer kode på live-sitet)
- Autoprefixing (sikrer kodekvalitet og -kompatibilitet på tværs af browsere og OS)
- Style linting (sikrer kodekvalitet)
- Babel (Code transpiling for legacy browsers)
- Browserlist (til deling af browser target config mellem diverse frontend tools)
- Polyfills (sikrer kodekompatibilitetl med ældre browser versioner)
- Ecmascript 6 (nye js features, renere syntax)
- PostCSS (styling syntax mm.)
- CSS Variables
- VueJS
- ReactJS
- Plus det sædvanlige
Det er en fantastisk følelse, at vi kom i luften til tiden. Vi var først betænkelige ved valget af WordPress som løsning, men Peytz gjorde det klart for os, at platformen kan klare meget avanceret teknologi, og det ses tydeligt i det færdige resultat. Vi kunne ikke være gladere for, at vi valgte Peytz til samarbejdet.
Martin Goldbach, Digital redaktør, FH
Moderne og sikkert
Naturligvis åd FH ikke vores anbefaling helt uden videre. De gav os en lang række spørgsmål at besvare, før de følte sig trygge ved at bygge deres vigtigste ansigt udadtil i "et gammelt blogger-værktøj," som nogle ynder at kalde WordPress for.
Her får du FH's tre vigtigste indvendinger:
- Det måtte ikke ligne et WP site. Den digitale redaktør var bange for at se "generisk og billig" ud. Den frygt gjorde vores designer til skamme.
- Sitet skulle integrere til mange API-integrationer, og FH var nervøs for, om WordPress kunne håndtere dem. Det kunne vi let, fordi WordPress er født med et fuldt REST API til at håndtere integrationer. Derfor kunne vi også vise eksempler på omfattende integrationer med Navision, Medlemsdatabaser, M3, Groupcare, Tredjeparts loginsystemer og meget andet.
- Endelig mente de, at WordPress har et dårligt sikkerhedsmæssigt ry. Her kunne vi berolige med, at WordPress blandt sikkerhedskonsulenter regnes for særdeles sikkert, når blot systemet bliver holdt opdateret – den forudsætning gælder i øvrigt for alle digitale løsninger. Peytz' hosting opdaterer WordPress automatisk for hundreder af sites på en og samme gang.
