Färg HTML-mallar

Färgglada HTML-mallar byggda på en tydlig innehållsordning

I en skrivbordsdemo ser tre tjänsteblock på tre olika bakgrunder helt avsiktliga ut. Färgerna ligger bredvid varandra, kontrasten är en del av kompositionen och hela raden kan läsas av vid en första anblick. Öppna samma mall på en mobiltelefon och blocken förvandlas till en vertikal följd av färgstarka rektanglar. Inget har förändrats förutom ordningen i vilken innehållet presenteras, och det är nu den ordningen som bär upp sidan.

När kolumner staplas vertikalt

Sida vid sida förmedlar en färgad bakgrund diskret att tre element hör ihop. När de staplas försvinner det budskapet eftersom läsaren aldrig ser dem samtidigt. En HTML-färgmall har antingen en underliggande struktur som håller ihop grupperingen, eller så tvingas färgpaletten göra hela arbetet ensam.

Det finns tre kontroller som är värda att göra innan du bestämmer dig för en fil:

1. Föreställ dig att bakgrunderna är borta och se om sektionerna fortfarande hålls isär. Om de bara existerar som färg existerar de egentligen inte alls.
2. Läs mobilvyn uppifrån och ner och bekräfta att ordningen förmedlar det budskap du vill, helt utan skrivbordskompositionen i bakhuvudet.
3. Leta efter allt som enbart skiljs åt av färg: kategorier, tillgänglighet eller framhävda element. En besökare ska kunna skilja dem åt via texten också.

Kodstruktur som klarar omordning

Rubriker bär upp grupperingen genom alla layoutförändringar. När varje tjänst eller fallstudie inleds med en egen rubrik och jämförbara element upprepar samma struktur överlever grupperingen. Läsaren förstår var ett element slutar och nästa börjar även på en helt neutral bakgrund. Nicepage Grid Element placerar text, bilder och knappar i celler som ordnas om på mindre skärmar, och via Responsive Modes kan du granska mobilvyn separat från datorvyn.

Tre saker är värda att titta närmare på i den smalare vyn:

1. Varje färgat block inleds fortfarande med en rubrik, även de som ligger långt nedanför hero-sektionen.
2. Jämförbara kort behåller samma interna struktur i stället för att bli tre olika specialvarianter.
3. Texten förblir fullt läsbar på vilken accentfärg den än hamnar på när elementen staplas.

Ett tankeexperiment i gråskala

Här är det snabbaste sättet att bedöma en HTML-färgmall: Föreställ dig sidan med alla bakgrunder satta till vitt och alla accenter till grått. Kan du fortfarande avgöra vilka sektioner som finns, vilka element som hör ihop och vad som kommer först? Om svaret är ja kan färgpaletten vara precis så iögonfallande som projektet kräver. Faller sidan däremot samman har färgen bara hållit uppe en struktur som ingen egentligen byggde.