Jamedo Websites ontwikkelt voor haar klanten websites in WordPress. Ook biedt Jamedo Websites webdesigners de mogelijkheid om hun ontwerpen, white labelled te laten uitvoeren en beheren. WordPress wordt hier ingezet als content management systeem. Voor de opmaak van een website met WordPress wordt gebruik gemaakt van een zgn. theme. Een theme is gescheiden van de rest van de code. Er is echter geen stricte scheiding tussen code en design. Ook in een theme kan PHP worden gebruikt. Qua beveiliging vormt dit laatste een extra risico.
De gekozen opzet van WordPress maakt het mogelijk themes onafhankelijk te ontwikkelen. Binnen een bestaande WordPress installatie kan zonder verdere wijziging van content of functionaliteit een andere theme worden gebruikt. In de praktijk ondersteunen niet alle themes dezelfde functies en kunnen bij het wisselen toch functionaliteiten verloren gaan.
Voor haar klanten ontwikkelt Jamedo Websites op basis van het gewenst ontwerp dus ook steeds een uniek theme. Om een theme te ontwikkelen worden steeds een aantal stappen doorlopen. Deze stappen zijn steeds hetzelfde. De verschillende stappen kunnen door verschillende mensen worden uitgevoerd. Door het proces te standaardiseren, kunnen designers, slicers en programmeurs beter samenwerken. Tevens wordt de gebruikte code van de theme herbruikbaar, wat in de eerste plaats de kosten drukt en in de tweede plaats zorgt dat het werk makkelijker over te dragen is.
Aan mij de opdracht om een voorstel te doen voor deze standaardisering
Het proces
De meeste websites beginnen met een interaction design. Op basis van het interaction design levert een ontwerper een ontwerp voor de website. Ontwerpen worden in 90% van de gevallen aangeleverd in Photoshop (.psd) bestanden. De volgende stap is basing / slicing. In deze stap wordt het ontwerp omgezet naar geldige html-code. Jamedo Websites levert al haar projecten responsive op. Dit wil zeggen dat de website werkt op een PC, tablet en mobiele telefoon, zonder verlies van functionaliteit. Vanwege de responsiviteit wordt de html-code opgeleverd in html5 met css3. Op basis van de geleverde html-code wordt vervolgens een WordPress theme gemaakt. Deze stappen worden uitgevoerd door verschillende mensen. Per stap kan nu gekeken worden volgens welke standaards gewerkt kan worden en hoe deze stappen het beste op elkaar kunnen worden aangesloten.
Basiselementen
Voor de eerste twee stappen, het interactie design en het websiteontwerp heb ik in kaart gebracht welke onderdelen voor elke website ontworpen moeten worden. Dat zijn de volgende onderdelen:
- voorpagina
-
- twitterfeed
- subpagina met tekst (full)
-
- social media buttons
- pagina met twee kolommen
- pagina met drie kolommen
- contactformulier
- reactieformulier / reacties
- form elementen; textarea, radio buttons, checkboxes, select boxes, buttons
- tekst elementen; h1 t/m h9 headers, strong, emphasized, paragraaf, quote, code
Uiteraard hebben alle pagina’s een header, footer en een content deel. Naast de basiselementen levert de designer ook een klantspecifiek ontwerp op, wat per definitie niet alle basiselementen hoeft te bevatten.
Standaardisering van de html- en css-code
Ook voor responsive design zijn er inmiddels diverse frameworks die direct kunnen worden ingezet als basis. Enkele voorbeelden zijn Gumby Framework en Yaml. De laatste tijd is op dit gebied ook de Twitter Bootstrap CSS framework sterk in opkomst. De keuze voor een vast framework en grid, zal ook de interactie- en webdesigner helpen. Het Grid vormt dan immers ook de basis voor het ontwerp.
Het ontwikkelen van het theme
De juiste manier om themes te ontwikkelen is het creëren van een zgn. child theme op basis van je basis of parent theme. Dit stelt je in staat de basisfuncties te updaten zonder dat je eigen code overschreven wordt. Zoals ik eerder al aangaf, heeft het opnemen van PHP code in de themes risico’s. Een goed opgezet theme structuur zorgt ervoor dat je code uptodate blijft en eventuele security problemen doeltreffend kunnen worden opgelost. Lees ook: Blogging Pitfalls: Why You Should Update Your Themes (and Use Child Themes)
Eindconclusie
Mijn advies aan Jamedo Websites is een css framework te kiezen en op basis daarvan een parent theme te ontwikkelen. In plaats daarvan zou eventueel ook een bestaand parent theme gekozen kunnen worden. Goede kandidaten lijken dan XXtreme theme (op basis van yaml) of WordPress Bootstrap (op basis van Twitter Bootstrap). De juiste keuze wordt gemaakt in overleg met de verschillende ontwikkelaars en designers. Mijn persoonlijke voorkeur gaat uit naar de Twitter Bootstrap. WordPress Bootstrap is op zijn beurt weer afhankelijk van het Bones theme framework. Om een te grote afhankelijkheid te voorkomen lijkt het daarom tevens verstandig het basis theme zelf te ontwikkelen en onderhouden.
Bij een keuze voor Twitter Bootstrap kan nog gekeken worden naar WordPress Twitter Bootstrap CSS. Deze plugin kan helpen reeds ontwikkelde projecten sneller naar de standaard te brengen.
Ondanks de standaardisering blijft het belangrijk hierin flexibel te blijven. Het gehele proces dient continu geëvalueerd en verbeterd te worden. Zo is het belangrijk bijvoorbeeld de eerder genoemde basislijst van elementen, actueel te houden. Blijkt achteraf voor een klant iets te missen, kijk dan of het niet bij de basiselementen hoort en andersom wordt er nooit een twitterfeed gevraagd schrap deze dan.