Kleur HTML-sjablonen

Gekleurde HTML-templates gebouwd op een duidelijke inhoudsvolgorde

In een desktopdemo ogen drie serviceblokken op drie verschillende achtergronden heel bewust gekozen. De kleuren staan naast elkaar, het contrast maakt deel uit van de compositie en de hele rij is in één oogopslag te lezen. Open hetzelfde template op een smartphone en die blokken veranderen in een verticale reeks felle rechthoeken. Er is niets veranderd behalve de volgorde waarin de content verschijnt, en die volgorde draagt nu de pagina.

Wanneer kolommen verticale stapels worden

Naast elkaar laat een gekleurde achtergrond subtiel zien dat drie items bij elkaar horen. Eenmaal gestapeld verdwijnt die boodschap, omdat de lezer ze niet meer gelijktijdig ziet. Een HTML-kleurentemplate heeft óf een onderliggende structuur die de groepering bewaart, óf het kleurenpalet moet al het werk doen.

Het loont om drie zaken te controleren voordat u een bestand kiest:

1. Stel u voor dat de achtergronden weg zijn en kijk of de secties nog steeds duidelijk gescheiden zijn. Als ze alleen als kleur bestaan, bestaan ze in feite helemaal niet.
2. Lees de smartphone-weergave van boven naar beneden en controleer of de volgorde het gewenste verhaal vertelt, los van de desktopcompositie.
3. Let op alles wat uitsluitend door kleur wordt onderscheiden: categorieën, beschikbaarheid of uitgelichte items. Bezoekers moeten het verschil ook aan de hand van de tekst kunnen opmaken.

Markup die herschikking overleeft

Koppen dragen de groepering door elke lay-outwijziging heen. Wanneer elke dienst of casestudy opent met een eigen kop en vergelijkbare items dezelfde opbouw herhalen, blijft de samenhang intact. De lezer weet zelfs op een neutrale achtergrond waar het ene item eindigt en het volgende begint. Het Nicepage Grid Element plaatst tekst, afbeeldingen en knoppen in cellen die op kleinere schermen herschikken, en met Responsive Modes kunt u de mobiele weergave afzonderlijk van de desktopversie inspecteren.

Drie punten verdienen de aandacht in die smallere weergave:

1. Elk gekleurd blok begint nog steeds met een kop, inclusief de blokken die zich ver onder de hero-sectie bevinden.
2. Vergelijkbare kaarten behouden dezelfde interne structuur in plaats van te veranderen in drie afwijkende varianten.
3. Tekst blijft uitstekend leesbaar op het accentvlak waar deze na het stapelen op terechtkomt.

Een gedachte-experiment in grijstinten

Dit is de snelste manier om een HTML-kleurentemplate te beoordelen: stel u de pagina voor met elke achtergrond in het wit en elk accent in het grijs. Kunt u nog steeds zien welke secties er zijn, welke items bij elkaar horen en wat het belangrijkst is? Is het antwoord ja, dan mag het kleurenpalet zo uitgesproken zijn als het project verlangt. Valt de pagina uit elkaar, dan hield de kleur een structuur overeind die in werkelijkheid ontbrak.