Als je naar je website kijkt dan zie je de structuur van de lay-out, je webteksten en grafische elementen. De opbouw van het webdesign is in zijn algemeenheid vergelijkbaar met andere websites namelijk: de header, de content en de footer.
Maar vraag je je wel eens af wat de onderliggende structuur is van een website en wat dit zegt over de kwaliteit van webdesign?
HTML & CSS
De bouwstenen van een website zijn de programmeertalen HTML en CSS.
HTML (Hyper Text Markup Language) is in 1990 ontwikkeld door Tim Berners-Lee als een van de grondleggers van het World Wide Web. In 1995 hebben de Nederlander Bert Bos en de Noor Håkon Wium Lie in Chicago het voorstel gedaan van CSS (Cascading Style Sheets) dat is overgenomen door het WordWilde Web Consortium (WWC).
Deze talen zijn het fundament van de Internet revolutie. Ze zijn onlosmakelijk verbonden met wat we allemaal ondernemen op het internet. Maar dat zie je niet direct als je je website bekijkt.
Vóór 2003 was je altijd afhankelijk van de kennis van HTML en CSS om een website te kunnen bouwen. Dat veranderde drastisch met de ontwikkeling van content management systemen zoals Joomla en WordPress. Daarmee kan je een blog starten of een website bouwen zonder veel kennis van deze programmeertalen.
De pagebuilders & online diensten
De volgende grote stap in de evolutie van webdesign is de ontwikkeling van de pagebuilders en online diensten zoals Wix. Zij hebben de grens tussen de webdesigner en de doe-het-zelver verder doen vervagen. Een ontwikkeling die de vraag oproept: wat verstaan we onder kwalitatief webdesign?
Dat kwalitatief webdesign zich onderscheidt, is geen subjectieve kwestie. Er zijn namelijk legio design gerelateerde aspecten die van belang zijn om tot een optimale gebruikerservaring te komen. En je kan de zichtbare, visuele kwaliteit van webdesign niet loskoppelen van de ‘onzichtbare’ kant, de programmeertalen.
De output van pagebuilders
De kracht van een pagebuilder is dat het de HTML en CSS in modules of widgets presenteert die je eenvoudig in de layout kunt plaatsen. Het zijn hapklare brokken zoals bij Mc Donalds of Burger King. Het ligt op je bord (canvas) maar je hebt geen idee wat er allemaal inzit.
Dat geldt ook vaak voor pagebuilders. Ze zijn gemaakt voor het gemak en houden zich daarbij niet perse aan het genereren van kwalitatieve code. Als je niet dieper kijkt dan het visuele aspect zul je ook geen weet hebben van de tekortkomingen ervan.
En een van die tekortkomingen is het genereren van overbodige code. ‘Ingrediënten’ die niets wezenlijks toevoegen aan de kwaliteit. Maar die wel degelijk impact hebben op de algehele leesbaarheid van de code.
Het meest voorkomende probleem noemt men ‘divception’. Een <div> tag is een container of sectie waarbinnen de HTML elementen worden geplaatst. Door div tags onnodig te gaan nesten, creëer je een brei van code. In deze video zie je wat het verschil is in output bij Elementor, Beaver builder en Oxygen. Excuses voor het gevloek van de Oxygen developer die zich een hoedje schrikt van de code.
Maar wie leest die code dan? Google en andere zoekmachines die je website indexeren. Je kan je voorstellen dat het laden en interpreteren van een website met divception meer tijd vergt dan een website die gebouwd is vanuit de WWC standaard.
Ik heb de afgelopen jaren met diverse pagebuilders gewerkt. Naast Oxygen heb ik vrij recentelijk een nieuwe pagebuilder ontdekt, namelijk Bricks. Ook deze pagebuilder onderscheidt zich door de kwaliteit in development en de code die wordt gegenereerd. De interface is overzichtelijk en de laadtijd is super snel omdat de builder een WordPress thema is en geen extra plugin vergt. De developers hechten waarde aan het genereren van W3C valide code en ze ontwikkelen hun product in lijn met wat de webdesigner klanten graag willen terugzien qua functionaliteiten.
De input van de webdesigner
Het volgende aspect dat niet direct zichtbaar is, manifesteert zich in de kwaliteit van het gebruik van de semantische HTML-tags. De vraag is of de pagebuilder hierin voorziet én dat de webdesigner deze correct toepast. Deze tags geven de betekenis aan de content die ze omvatten. Dat ondersteunt de zoekmachines in het indexeren van je content.
Dan hebben we nog de toegankelijkheid van je website. In Nederland leven ongeveer 300.000 mensen met een visuele beperking. Daarvan maakt een substantieel gedeelte gebruik van een screenreader om de content op je website te beluisteren. De screenreader scant de content en de code die wordt omgezet naar spraak. Een correcte toepassing van de HTML-tags om de screenreader optimaal te voorzien van functionele informatie is van cruciaal belang voor de toegankelijkheid. Een divception website creëert juist nieuwe drempels voor deze doelgroep.
CSS Framework
De visuele weergave van je website wordt grotendeels gerealiseerd door de CSS code. Elk HTML element kan in de CSS code worden aangeroepen en naar wens worden gestyled. Hierin spelen CSS klassen de hoofdrol. Een CSS klasse heeft een specifieke naam die meestal gerelateerd is aan het HTML element. In de meeste pagebuilders zul je de CSS klassen niet zien staan. Dat speelt zich allemaal af binnen de instellingen van de modules of widgets. Je kan wel specifieke CSS code aanmaken die je gericht toepast om bepaalde design aanpassingen door te voeren die niet realiseerbaar zijn met de instellingen van een module.
Het management van CSS blijft hierdoor omslachtig en het helpt je niet om je website flexibel te houden als er design wijzigingen worden doorgevoerd. Om dit te ondervangen heb je CSS frameworks. Dat is eigenlijk een bibliotheek aan voorgedefinieerde geoptimaliseerde klassen die je website breed kunt inzetten. De kracht hiervan is dat je aanpassingen sneller en consistenter kunt doorvoeren. Je website groeit eenvoudig dynamisch mee op een overzichtelijkere wijze qua structuur.
Automatic.css heeft zo’n framework ontwikkelt voor de pagebuilders Bricks en Oxygen. Met op termijn uitbreidingen naar de Gutenberg block editor, Cwicly en Zion Builder. Dit framework maakt van een pagebuilder een design platform op steroïden. Vergelijkbaar met de professionele online applicatie Webflow.
Onderscheidend webdesign
Je ziet dat er veel aspecten zijn die je niet direct kunt waarnemen maar die wel bijdragen aan de kwaliteit van webdesign.
De pagebuilder Bricks in combinatie met Automatic.css en Frames geven mij de tools om websites te bouwen die in kwaliteit en toegankelijkheid onderscheidend zijn. Je kan daarom bij Chaja Design rekenen op kwaliteit van webdesign dat ook onder de motorkap geoptimaliseerd is.
