“De website van Oud-Utrecht heeft een wat frissere uitstraling nodig. Daarvoor is er een ontwerp gemaakt volgens de bijlage. We zouden graag een offerte krijgen voor de aanpassingen,” mailde Martijn Maandag, webmaster van de vereniging, naar ons. We zijn gek op restylen, dus we openden vol verwachting de bijlage. Over het ontwerp waren we meteen enthousiast. Deze klus wilden we wel!
Dat ontwerp, van BNO-ontwerper Jeroen Tirion, ging vergezeld van een stroomschema waar we een paar keer naar moesten kijken voor we ook maar enigszins doorkregen wat nou precies de bedoeling was (aha: ook nog een herstructurering). Gelukkig stond een stukje verderop in de mail “Misschien is naar aanleiding van dit bericht nog aanvullende informatie nodig, dan zijn wij daar zeker toe bereid”, dus we voelden ons niet bezwaard om een heel rijtje vragen op Martijn af te vuren.
Met de antwoorden op die vragen konden we een gedetailleerde inschatting maken. En omdat we het fijn vinden om bij de start helemaal op één lijn te zitten met onze opdrachtgever (de beste websites maak je immers samen), namen we in die inschatting ook een kick-off meeting op. In zo’n gesprek nemen we alle wensen nog eens rustig door, in detail, zodat we echt een goed beeld hebben van wat de klant wil. De uiteindelijke offerte baseren we dan op die inschatting, aangevuld met de punten uit de kick-off.
Vragen, vragen, vragen
We wisten al dat er naast ons nog een collega-bedrijf in de race was voor de klus. Aangezien dat bedrijf al behoorlijk lang meedraait in het Joomla-wereldje, hielden we ons hart vast: wie zouden ze kiezen? Een week of twee nadat we onze inschatting gemaild hadden, kwam het verlossende woord: Oud-Utrecht had besloten met ons in zee te gaan! “Jullie zijn wel duurder,” zei Martijn, “maar jullie stelden vragen, en jullie wilden alles met ons doornemen. Dat vonden we heel positief.” We sprongen een gat in de lucht (mentale notitie: altijd vragen stellen).
Stap 1: de kick-off meeting
De kick-off was de start van een prettige samenwerking. Er was een prima klik met Martijn en Jeroen, die het project begeleidden. We namen het hele stroomschema door, kregen een toelichting op het ontwerp, stelden vragen, beantwoordden vragen, dronken liters thee en aten stroopwafels. De offerte die we daarna maakten was eigenlijk vooral om formeel vast te leggen wat we zouden gaan doen.
En dan nu aan de slag!
In de weken die volgden pasten we de structuur van de site aan conform het stroomschema (dat we inmiddels kenden als onze broekzak). Op basis van het ontwerp stelden we een template samen met behulp van Helix Ultimate (het template framework waar we graag mee werken). Voor de verschillende paginatypes maakten we eigen layouts.
De pagina’s met overzichten vormden de grootste uitdaging. Daarvoor hebben we dankbaar gebruik gemaakt van de extensie Articles Anywhere, die het mogelijk maakt om (onderdelen van) Joomla-artikelen op allerlei manieren op verschillende plekken in je site te laten zien. Dat gaf ons de mogelijkheid om de pagina’s conform het ontwerp op te maken.
VOOR
NA
Weergave wijzigen met één klik
Op de homepage staat een nieuwsoverzicht, waar twaalf nieuwsberichten worden getoond. De redacteuren kunnen zelf bepalen welke nieuwsberichten en in welke volgorde. De nieuwsberichten kunnen op drie verschillende manieren worden getoond. De redacteuren kiezen met één klik een van die drie weergaven. Toch niet mooi? Dan kunnen ze het net zo gemakkelijk veranderen. Daarvoor gebruiken we eigen velden (custom fields), die standaard aanwezig zijn in Joomla. We hebben een eigen veld “weergave” gemaakt, waarin de weergave gekozen wordt, en de pagina-opmaak neemt die weergave over. Handig en gebruiksvriendelijk.
Header met afbeeldingen
In de fotoheader op elke pagina wordt de hoofdafbeelding uit het artikel geladen, of, als er geen hoofdafbeelding is, een willekeurige afbeelding uit een mapje waar Martijn zelf afbeeldingen aan kan toevoegen. Over die fotoheader scrollt een dynamisch menu met links naar de belangrijkste onderdelen van de website (agenda, nieuws, lid worden, nieuwsbrief, webwinkel en erfgoed).
Samen de uitwerking doornemen
Zo’n ontwerp op papier is mooi, maar het is altijd even afwachten hoe het op het scherm uitpakt. De meeste ideeën van Jeroen bleken goed te werken. Tijdens verschillende voortgangs- en puntjes-op-de-i-besprekingen verzonnen we oplossingen voor die elementen die zich niet gedroegen zoals Jeroen het voor ogen had. Dat waren gezellige en vruchtbare besprekingen, waar we allemaal vrolijk van werden.
En dan is het klaar
Eigenlijk, diep in ons hart, vinden we het een beetje jammer dat de site af is. Martijn doet zelf het technisch onderhoud, dus we zijn nu echt klaar. Tegelijkertijd zijn we, net als Oud-Utrecht zelf trouwens, heel blij met het resultaat. Dus als we heimwee hebben, bekijken we de website gewoon weer eens.
Martijn Maandag, webmaster Oud-Utrecht, wilde de site opfrissen:
Bij de historische vereniging Oud-Utrecht proberen we een jonger publiek te trekken. Onze website, in Joomla, was al een paar jaar oud, had een wat sombere uitstraling en dat moest beter kunnen. Jeroen Tirion [BNO] ontwerp en advies, verzorgt al jaren de vormgeving voor Oud Utrecht voor alle publicaties (website, tijdschrift, jaarboek en nieuwsbrief). Ik heb hem wat voorbeelden van templates laten zien en aan de hand daarvan heeft hij een nieuw ontwerp gemaakt. Leidraad daarbij was dat niet de organisatie van de vereniging centraal moest staan, zoals bij de oude site, maar de bezoeker van de website.
We hebben dit ontwerp voorgelegd aan een vertegenwoordiging van het bestuur en daarna bij twee bedrijfjes een offerte aangevraagd. Het resultaat? We kregen van Weblab42 een reactie met allemaal vragen en dat voelde wel positief. Ondanks dat hun offerte hoger was dan de andere aanbieding hebben we voor Weblab42 gekozen.
Initieel zijn we bij elkaar geweest om alles door te spreken. Daar konden we sparren over datgene wat er moest komen. Gaande het proces hebben we het tussenresultaat teruggekoppeld naar een aantal personen binnen de vereniging. Uiteindelijk hebben we vlak voor oplevering nog een bijeenkomst gehad om de puntjes op de I te zetten.
En de site? Wel, die spreekt voor zichzelf. Moderne uitstraling, geen sombere donkere site maar een frisse website die weer jaren mee kan. Ga maar een kijkje nemen.
Is jouw website nou ook toe aan een restyling? Neem contact op!
