Hierbij dan de aftrap van mijn eerste website review.
Voordat ik start eerst een paar belangrijke mededelingen.
Als eerste is het niet mijn intentie om iemands website af te kraken. Ik geef mijn visie vanuit de intentie om je nieuwe inzichten te geven.
Ten tweede, ik breng bepaalde elementen van de website niet in beeld zoals het logo of afbeeldingen om er voor te zorgen dat er geen direct verband kan worden gelegd met de website van de ondernemer.
Oké, dat was de intro en nu aan de slag met de review!
Het gaat hier om de website van een ondernemer uit de kunstenaars branche.
Inhoudsopgave review
De eerste impressie van de homepage
Bij de eerste impressie gaat het mij om wat in beeld komt nadat de homepage is geladen. Dit is alles dat boven de vouw (fold) zichtbaar is zonder dat je naar beneden gaat scrollen. De vouw is de onderste horizontale rand.
Dit valt mij op
- dat de naam van de ondernemer een vrij groot gedeelte van de ruimte inneemt;
- dat er nauwelijks textuele content wordt aangeboden;
- dat het menu net zichtbaar is met een klein en dun lettertype;
- dat de productfoto (het witte vlak) een prominente plek inneemt en niet geheel in beeld is. Dat kan je niet zien vanwege het anonimiseren;
- dat de productfoto dicht tegen de zwarte balk aanzit;
- dat de groene link nauwelijks opvalt.
Dat roept bij mij de volgende vragen op
- Waarom wordt de ondernemer hier niet in beeld gebracht?
- Waarom staat hier geen informatie over de ondernemer?
- Wat is de noodzaak van de brede horizontale zwarte balk?
- Waarom neemt de naam zoveel ruimte in?
- Wat is de meerwaarde van de productlink op deze plek?
Alles boven de vouw (fold) heeft als functie om de bezoeker enthousiast te maken, te prikkelen om verder te scrollen. Hier laat de ondernemer een aanzienlijke kans liggen om zichzelf te presenteren.
De zwarte balk met de naam communiceert niets inhoudelijks. Daarom zou de naam van de ondernemer in een kleiner lettertype links van het menu geplaatst kunnen worden zodat er ruimte vrijkomt om de content meer naar boven te plaatsen.
Als ik helemaal naar beneden scroll zie ik foto’s waarop de kunstenaar aan het werk is.
Waarom staan deze foto’s niet aan het begin van de homepage?
Een video waarop de kunstenaar in actie is te zien, kan hier ook meerwaarde hebben.
Ik vermoed dat de ondernemer handelde vanuit de visie dat er verkocht moet worden en daarom besloot om eerst een kunstwerk te laten zien met een link naar de verkooppagina. Voor de kunstenaars branche lijkt me dit een té commerciële benadering.
De layout
De kunstobjecten van de ondernemer komen tot stand vanuit een creatief proces waarin felle primaire kleuren worden gebruikt of alleen zwart. Het zijn voornamelijk organische vormen.
De layout van de website is juist blokkerig met harde lijnen en kleuren. De producten komen hierdoor niet voldoende tot hun recht.
Als je naar beneden scrollt, zie je dat de content op verschillende plekken meer of minder inspringt vanuit links of rechts. Hierdoor krijgt de flow van de content een onrustig verloop. In de footer is er nauwelijks ruimte tussen de content en de uiterste randen van de layout.
Open hier het overzicht van de homepage. De rode vlakken, die ik heb toegevoegd, laten zien hoe de content flow is op de pagina.
Het beeldmateriaal
De foto’s zijn van een goede kwaliteit. Alleen komen ze niet goed tot hun recht omdat ze te compact naast elkaar worden gepresenteerd. En er zit geen consistentie in de vormgeving.
De typografie
Op de homepage worden 4 lettertypes gebruikt die geen harmonische verbinding met elkaar hebben. Dat geeft de tekstuele content een onsamenhangende uitstraling.
Juist door slechts een tot twee lettertypes te gebruiken, die aansluiten bij de identeit van de ondernemer, de dienstverlening of het product, creëer je een consistente typografie.
Verder is er geen sprake van het toepassen van verticale ruimte (lijnhoogte) tussen verschillende tekstelementen (titels en paragraaf) zodat de hierarchie beter tot haar recht komt.
In onderstaande screenprint zie je dat de ruimte tussen de titels en de paragraaf tekst hetzelfde zijn. En de iconen zijn veel te groot in relatie tot de rest van de content.
De navigatie
Zoals ik al aangaf, is het menu niet optimaal zichtbaar. Dit komt doordat het lettertype slechts een lijn dikte heeft van 300 (dat staat voor de CSS waarde m.b.t. de dikte van een lettertype).
Meestal wordt het menu ook weergegeven in de footer van de website. Maar hier ontbreekt het, waardoor je eerst helemaal naar boven moet scrollen om een andere menu item te kunnen aanklikken.
Extra functionaliteiten
Als je door de homepage scrollt, valt me op dat het inschrijfformulier voor de nieuwsbrief drie keer op de pagina is geplaatst. De styling van het formulier is steeds weer anders.
Het repeteren van het inschrijfformulier vergroot niet de kans op een inschrijving. Het heeft eerder een negatief effect op de bezoeker, omdat je de indruk wekt dat jouw intenties vooral gericht zijn op het verzamelen van e-mailadressen.
De zoekmachine optimalisatie (SEO)
Er staan geen webteksten op de homepage die van waarde kunnen zijn voor de vindbaarheid. De naam van de ondernemer is voorzien van een H2 tag. De titel van het kunstwerk heeft een H1 tag. Maar er zijn nog twee titels op de homepage die een H1 tag hebben. Op een webpagina gebruik je maximaal één H1 tag. Dat is de belangrijkste titel waarin zoekwoord(en) staat waarop je wil ranken.
De afbeelding van het kunstwerk is niet voorzien van een alt-tag omschrijving. Elke afbeelding op je website dient een alt-tag omschrijving mee te krijgen. Dat is van belang voor de indexering door de zoekmachines en de toegankelijkheid van je website.
Onder de motorkap
Je vraagt je nu misschien af: wat heeft dit met webdesign te maken?
Lees dan het artikel de ‘onzichtbare’ kwaliteit van webdesign.
De kwaliteit van de HTML-code zegt veel over de kwaliteit van het webdesign en het effect daarvan op het indexeren van je content door de zoekmachines en voor de toegankelijkheid.
Uit de code blijkt dat de website is gebouwd met Elementor. Een pagebuilder die door miljoenen mensen wordt gebruikt. Een van de nadelen van Elementor is dat het onnodige HTML genereert en het niet zo nauw neemt met het toepassen van semantische HTML, de structuur van de webpagina.
Om dit te verduidelijken, heb ik een screenprint toegevoegd waarin ik de tool voor ontwikkelaars heb geactiveerd in de browser, rechts in beeld. Daarmee kan jwebsite-reviewe de HTML en CSS structuur checken van de webpagina. De structuur onder de horizontale zwarte balk met links de teksten en rechts de afbeelding (witte vlak) zou in compacte HTML opgebouwd moeten zijn uit 1 sectie, 1 container en 2 divs. De sectie is het HTML-element dat alle content omvat met daarin de container waarin de beide div HTML-elementen worden omvat. Je kan je het visueel voorstellen als een grote doos (sectie) met daarin een kleinere doos (container) met daarin twee dozen (divs) waar in een doos de teksten zitten en in de andere doos de afbeelding.
Schrik niet, maar dit is wat Elementor creëert: 3 SECTIES en 32 DIVS!
Dit is een semantische nachtmerrie die het lezen van de HTML-code door zoekmachines niet vergemakkelijkt. Het is ook een nachtmerrie voor de webdesigner, omdat je door de onnodige HTML-elementen het overzicht verliest. Voor mij is dit ook de reden waarom ik geen websites meer ontwikkel met Elementor.
Een bijkomend en niet te verwaarlozen effect is dat Elementor websites daardoor geen hoge scores halen voor pagespeed. Voor deze homepage is het pagespeed prestatie percentage 73%, gemeten op pingdom tools.
De responsiviteit
De layout van je website hoort zich automatisch aan te passen aan de resolutie van het beeldscherm. Dit noemen we responsive design.
In deze review heb ik me gefocust op de layout in de desktop resolutie (1920×1080) weergave.
Als de resolutie kleiner wordt, krijgt de content minder ruimte en zal zich gaan herschikken door het aantal kolommen te verminderen. Op een smartphone betekent dat meestal dat de content onder elkaar in 1 kolom wordt weergegeven.
Als ik de website bekijk in de resoluties van smartphones en tablets, zie ik geen onregelmatigheden die de leesbaarheid en het scrollen door de content kunnen verstoren.
De toegankelijkheid
Ik kan de homepage niet helemaal aflopen via de TAB-toets. Elk element met een link of een invoerveld moet via de TAB-toetsen toegankelijk zijn. Echter op twee plaatsen loop ik vast.
De contrasten tussen de teksten en de achtergrond zijn voldoende voor een goede leesbaarheid.
De e-mail invoervelden van het inschrijfformulier voor de nieuwsbrief hebben alleen een placeholder tekst. Dat is de informatieve tekst die in het invoerveld staat vermeld. Voor het verbeteren van de toegankelijkheid is een label boven het invoerveld wenselijk.
Conclusie en adviezen
De kansen die de ondernemer op de homepage ten aanzien van de presentatie en de vindbaarheid laat liggen, zijn substantieel. Het precisieuze werk van de kunstenaar staat haaks op de gebreken in het webdesign.
Ik zou deze ondernemer de volgende adviezen willen meegeven:
- presenteer jezelf direct aan het begin van de homepage;
- vermeld je unieke verkoopargumenten (USP’s : Unique Selling Points);
- plaats veel meer inhoudelijke tekst;
- optimaliseer de teksten voor vindbaarheid (SEO);
- plaats reviews van klanten op de homepage;
- breek het design open door het minder hoekig te maken;
- verbeter de visuele presentatie van je kunst door juist minder werken te presenteren;
- gebruik een of twee lettertypes die qua style beter aansluiten bij je kunst;
- maak de kleurstelling lichter;
- plaats de inschrijving voor de nieuwsbrief slechts een keer op de homepage of alleen in de footer van de website zodat het op elke pagina zichtbaar is;
- maak de navigatie duidelijker en vermeld de links ook in de footer van de website.
Heb je na het lezen van de review nog vragen?
Plan dan hier een vrijblijvend gesprek in.
