Hero-arkitektur

Det visuella centrumet

Hero-sektionen är det första besökaren ser. Den avgör om de stannar eller stänger fliken. Tekniskt sett kombinerar den allt du lärt dig: positionering, typografi, kontrast och responsivitet plus en ny komponent: CTA.

Call to action

En CTA (call to action) är det viktigaste klicket på sidan. Det är knappen eller länken som pekar besökaren mot vad de ska göra härnäst: Kontakta oss, Boka tid, Se vårt sortiment.

En bra CTA:

• Är synlig direkt utan att scrolla
• Är formulerad med ett verb (“Boka”, “Se”, “Kontakta”), inte ett substantiv (“Kontakt”)
• Matchar det din persona faktiskt vill göra på sidan

En CTA ser nästan alltid ut som en knapp, men den är oftast en länk. Den utför ingenting, den leder någonstans: till kontaktsidan, till bokningen, till sortimentet. Rätt element är alltså <a href>, klädd i knappkostym. Precis det byggde du i Hit areas, och receptet finns som Knappen i Receptsamlingen: generös padding, display: inline-block, aldrig fasta mått.

Centrera med grid

Här kommer glimten av CSS Grid som utlovades i Flexbox. Grid är Flexbox tvådimensionella komplement: där flex lägger element i en riktning, en rad eller en kolumn, bygger grid rutnät med rader och kolumner samtidigt. Kursen går inte på djupet med det, men grids enklaste trick är för bra för att vänta på: perfekt centrering.

Vanlig block-layout centrerar nämligen inte vertikalt, text-align: center hjälper bara i sidled, och just centrering var länge ett sorgebarn i CSS. Med ett grid som har ett enda barn löser det sig på två rader:

.hero {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    text-align: center;
}

display: grid aktiverar place-items: center, som centrerar barnet i båda axlarna, oavsett skärmstorlek.

Lägg också märke till att det står min-height, inte height. Med height: 100dvh kan innehållet bryta ut ur sektionen om det är för stort. Med min-height växer sektionen med innehållet, men är aldrig kortare än skärmen.

100dvh eller 100vh?

min-height: 100dvh;

På mobil har webbläsarens adressfält en otäck egenskap: 100vh inkluderar det i beräkningen när sidan laddas, men fältet visas ovanpå innehållet. Herons nederkant hamnar dold.

dvh (dynamic viewport height) uppdateras i realtid när adressfältet rullas undan eller visas. Stöds i alla moderna webbläsare sedan 2023. Äldre webbläsare faller tillbaka på sitt eget beteende, dvh är rätt val för ny kod. För att kontrollera om något stöds i din webbläsare kan du kolla caniuse.com men testa också i DevTools (se nedan).

Bakgrundsbild, background-image eller img?

Det finns två sätt att lägga en bild bakom text. De har fundamentalt olika användningsfall.

background-image (CSS-dekor):

.hero {
    background-image: url("/img/hero-bakgrund.webp");
    background-size: cover;
    background-position: center;
}

• Skärmläsare ignorerar den helt, ingen alt-text, inget meddelande
• Rätt val när bilden är dekorativ och sätter stämning
• Fel val om bilden förmedlar information besökaren behöver

<img> (HTML-innehåll) placerad med positionering:

<section class="hero">
    <img src="/img/hero.webp" alt="Beskriv vad bilden visar" class="hero__img" />
    <div class="hero__content">
        <h1>Företagets budskap</h1>
        <a href="/kontakt" class="btn">Kontakta oss</a>
    </div>
</section>

.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content {
    position: relative;
    z-index: 1;
}

Känns mönstret igen? Det är overlay-receptet från Avancerad positionering: heron är koordinatsystemet (position: relative), och bilden spänns ut över hela ytan med position: absolute och inset: 0. Det nya är object-fit: cover, som låter bilden beskäras i stället för att tryckas ihop när ytan har fel proportioner, och z-index: 1 på innehållet så att det ritas ovanpå bilden.

En sak till innan du väljer bild, oavsett teknik: hero-bilden är ofta sidans i särklass tyngsta fil, och den laddas överst, före allt annat. Reglerna från Bildformat & upphovsrätt gäller dubbelt här: WebP, komprimera i Squoosh och testa med Slow 3G. En fullskärmsbild på flera megabyte sänker exakt det förstaintryck som heron finns till för att skapa.

Läsbar text på bild

Vit text på en ljus bakgrundsbild uppfyller sällan WCAG-kravet på 4.5:1 kontrast. Lösningen känner du igen från förra delen: en overlay, ett halvtransparent mörkt lager mellan bilden och texten.

<section class="hero">
    <div class="hero__overlay"></div>
    <div class="hero__content">
        <h1>Företagets budskap</h1>
        <a href="/kontakt" class="btn">Kontakta oss</a>
    </div>
</section>

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.hero__content {
    position: relative;
    z-index: 1;
}

Exakt samma recept som bildoverlayen i Avancerad positionering: heron är redan koordinatsystem, overlayen spänns ut med inset: 0, och innehållet lyfts ovanpå med z-index: 1. Justera alpha-värdet (0.45) tills kontrasten godkänns i WAVE.

Pröva i DevTools: testa mobilhöjden live

1. Öppna din sida, tryck F12 och aktivera mobilvy (ikonen med telefon/läsplatta längst upp).
2. Välj en telefon i listan, t.ex. iPhone 14.
3. Klicka på .hero i Element-panelen och hitta min-height: 100dvh i Styles. Avmarkera det och ändra till 100vh, ser du skillnaden när adressfältet räknas in i höjden?