Nieuwe site layout voor Theaterkoor Voice Box

“Die restyling van onze website, hè,” zei Anton van Theaterkoor Voice Box, “kunnen we het daar nog eens over hebben?” Het Amersfoortse koor Voice Box was al een paar jaar klant bij ons voor onderhoud en kleine klusjes. Hun site, dé plek waar leden kunnen inloggen om hun partijen in te studeren en/of te downloaden, werkte prima. Hij was alleen wat gedateerd (want een jaar of tien geleden gebouwd) en daardoor wat minder aansprekend en aantrekkelijk. Leuk, een restyling. Daar hadden we wel zin in!

We spraken af via Zoom (najaar 2020, coronacrisis). Niet alleen onze vaste contactpersoon Anton zat bij het gesprek, ook zijn opvolger Ruud, een vrolijke man die als gloednieuwe webmaster meteen met zijn neus in de boter viel: hij mocht de restyling aansturen.

Bestaande site, nieuwe look

Met Ruud en Anton gingen we aan het tekenen. Aan de structuur van de site hoefde eigenlijk niets te veranderen, maar voor elk hoofdmenu-item bedachten we een eigen verzamelpagina met daarop een hoofdtekst en onderaan vier blokjes die naar sub-pagina’s leiden. Dat maakt de site overzichtelijk en helder. Met de leuke foto’s van het koor mocht wel wat meer gedaan worden. De hoofdkleuren? Ruud en Anton waren het erover eens dat het fris moest zijn: witte achtergrond, zwarte letters, en rode accenten, de kleuren van het Voice Box logo dus. De site moest meteen laten zien waar Voice Box voor staat, zodat mensen zin krijgen om bij Voice Box te komen zingen.

“En,” zei Ruud, “ik heb ook al een lettertype uitgezocht. De Comic Sans.”

Oh. Jee. Een controversieel lettertype waar we zelf eigenlijk niet zo’n fan van zijn. We vroegen Ruud om het toe te lichten.

“We zijn een vrolijk koor, een gezellig koor, en daar past een ronde, speelse letter bij,” zei Ruud. “We willen dat onze letter uitstraalt wie we zijn. Toegankelijk en vriendelijk.”

Oké, die redenering konden we volgen. Wij gebruiken over het algemeen Google lettertypen, dus we stelden voor een vergelijkbare Google letter te zoeken, dat vond Ruud ook goed, en die hobbel was genomen.

 

Boven: website voor restyling. Onder: website na restyling.

Makkelijk bij te houden

We richtten een testomgeving in en gingen aan de slag. We begonnen met Home. Daar kwam een slideshow, een tekstblok en vier blokjes die doorklikken naar andere pagina’s. Die blokjes zijn, zoals meestal bij Joomla, modules. In deze modules worden Joomla-artikelen geladen. Als Ruud de tekst of de afbeeldingen van de blokjes wil wijzigen, hoeft hij alleen de artikelen aan te passen. Dat geldt eigenlijk voor de hele site. Ook de slideshow is eenvoudig aan te passen. Voice Box had al een fotogalerij geïnstalleerd, RSMedia Gallery, waarvoor ook een slideshow-module bleek te bestaan. Die hebben we geïnstalleerd. Als Ruud een foto wil toevoegen aan de slideshow, zoekt-ie ‘m op in RSMedia en hoeft hij alleen maar een tag toe te voegen.

Na Home gingen we door met de andere verzamelpagina’s (Het Koor, Voorstellingen en de pagina waar leden na inloggen het repertoire, smoelenboek, reglement en andere informatie vinden). De lichtgrijze balk met de vier blokjes komt terug op elk van die verzamelpagina’s. Het zijn daar natuurlijk steeds andere blokjes, maar volgens hetzelfde principe: Joomla modules die artikelen laden.

Alternatief voor Comic Sans

Voor de Comic Sans vonden we een prima Google alternatief: de Comic Neue. Een evenwichtige, volwassen versie van het klassieke lettertje. En die blijkt, dat moeten we Ruud nageven, heel goed te werken in de site.

Styling automatisch in orde

Ondertussen werkte Ruud aan de content van de site. In veel artikelen was tekst rechtstreeks vanuit Word geplakt, met als gevolg dat het een rommelige aanblik bood. Het fijne aan Joomla is dat je je teksten niet zelf hoeft te layouten; daar heb je een template voor. Voice Box gebruikt JCE Editor; die kun je zo instellen dat bij plakken vanuit Word alle overbodige opmaak wordt verwijderd. Dat hebben we gedaan, zodat bij nieuwe content geen opmaak meer wordt meegekopieerd.

Smoelenboek

Tot slot hebben we het smoelenboek aangepakt, de pagina waar leden elkaars contactgegevens kunnen zien. Daarvoor werd op de oude site de standaard Contact component van Joomla gebruikt waarin de gegevens van de leden onder elkaar werd weergegeven: foto aan de linkerkant en daarnaast de contactgegevens. Dat kon wel wat mooier, vonden we. We maakten een override, oftewel een aanpassing van de standaard layout, met drie foto’s naast elkaar en de contactinformatie onder elke foto, zodat dat er ook een heel stuk frisser en overzichtelijker uitziet.

Ook toe aan een makeover?

Is jouw site qua inhoud en structuur ook nog prima, maar kan-ie wel een nieuwe look gebruiken? We helpen je graag! Neem contact op met Hilda Abbing om de mogelijkheden te bespreken.