Vad är rätt storlek på webbplatshuvudet för din webbplats?

Det är sant vad de säger – första intryck räknas. Rubriken på din webbplats är det första folk ser när de landar på din webbplats. Flera eye-tracking-studier har upptäckt att människor skannar dator- och mobilskärmar som börjar upptill och gör ett sicksackmönster nerför skärmen. Webbplatshuvudets primära funktion är navigering. Men det spelar också en viktig roll för att kommunicera ditt varumärkes stil och utseende. I den här guiden kommer vi att utforska världen av webbplatsrubriker och ta itu med frågan om vad den idealiska storleken på webbplatshuvuden ska vara.

1. Branding

Börja med att skapa en bild, grafik eller andra visuella koncept som visar essensen av din produkt eller tjänst. Grafiken ska visa ditt företags varumärke och även ha en logotyp. En konstnärlig header kommer att ha ett korrekt val av stil och färg som matchar din webbplats som inspirerar läsarna.

Stort, djärvt, okonventionellt: Atlassian

Atlassians sidhuvud är stort och djärvt. Kanske en nick till dess namne, Atlas, den grekiska titanguden som “bar himlen på sina axlar”. Atlassians blå varumärke finns med i hyperlänkade kopior, uppmaningsknappar och bilder.

Dämpad, minimal: Apple

Få märken kan uppnå den typ av minimalistisk känsla som Apple gör. För en organisation med många divisioner och över 130 000 anställda över hela världen är den utmärkt i att förenkla allt och visuellt kommunicera sitt varumärke så kortfattat.

Actiondrivet: Oxfam

Global NGO Oxfam använder sin rubrik för att driva den viktigaste åtgärden: donationer. Placeringen, storleken, färgen och framträdandet av “åtgärdsfältet” fungerar inte bara som ett navigeringsverktyg utan ett sätt att kommunicera deras syfte men framför allt för att uppmuntra till handling.

Sök fram och i mitten: Shutterstock

Bildsajt Shutterstock handlar om sökning. Sökfältet är framträdande och märks sömlöst med varumärkets teckensnitt, färg och ikonografi.

2. Storlek

För webbplatser som säljer produkter är rubriken ett användbart verktyg för att visa upp populära produkter och kampanjer. Karuseller eller reglage används ofta för att rotera genom utvalda produkter eller sektioner som fungerar som en startpunkt till viktiga delar av webbplatsen.

Zaras sidhuvud fungerar nästan som en vägspärr och lyfter fram en karusell av samlingar. Karusellindikatorerna (prickarna) visas vertikalt längst ner till höger medan rubriken fyller skärmen till 100 % med navigering överlagd. Det är ett slående utseende.

Internet.org är ett annat exempel på en full-frame header med dämpad toppnavigering. Men istället för en karusell använder den den vänstra sidan av rubriken som ett dubbelt navigerings- och innehållsområde. När användaren gör ett val glider sajten åt vänster och flyttar hjältebilden till vänster och avslöjar kroppens innehåll på höger sida.

I denna fullbreddsvariation från Virgin Galactic fungerar rubriken som ett hjältenavigeringselement med bakgrundsvideo som ger imponerande bilder.

3. Innehåll

Varje element i din webbplatshuvud måste fungera tillsammans. Platsen och storleken på varje objekt i rubriken ger användarna visuella ledtrådar om hur man navigerar och använder din webbplats när de omedelbart landar. Färgen på en knapp, avståndet och utfyllnaden runt element eller teckensnittsstorleken på en titel kan betyda hela skillnaden mellan att användaren gör den önskade åtgärden eller inte.

Bildkarusellen

En bildkarusell används ofta i webbplatsrubriker eftersom de uppnår ett antal saker:

• Kommunicerar ett innehåll åt gången för att undvika förvirring
• Förlitar sig mycket på visuell kommunikation (vilket är bäst eftersom människor i allmänhet skanna innehåll, i motsats till läsa innehåll)
• Ger framträdande plats åt viktigt innehåll
• Fungerar som förnavigering, vilket gör att användaren kan utforska olika innehåll utan att lämna huvudsidan
• Bekanta och förväntade webbplatselement som användare vet hur man använder och interagerar med: svep igenom eller tryck på prickarna för att flytta fram bilderna

HTC:s header har tre bilder med tre nya teknologier:

Uppmaningen till handling (CTA)

Ibland vill man bara att användaren ska vidta åtgärder. I det här fallet vill The Information fånga besökarens e-postadress. Genom att ta bort alla andra element och fokusera 100 % på CTA:n kan The Information optimera för önskad åtgärd:

Den redaktionella stilen

BMW har omarbetat sin webbplats som om de vore en utgivare och presenterar berättelser och artiklar för användaren med början med hjälteartikeln i rubriken om historien om M-logotypen och färgerna:

Katalogstilen

Targets webbplats emulerar deras fysiska katalog med rubriken som används för att visa upp kvinnors nya ankomster följt av de olika andra avdelningarna inom butiken som blandar samlingar, kampanjer, individuella produkter och information.

Hur man hittar rätt storlek med WordPress

Det bästa stället att börja är att kontrollera dina “Medieinställningar” under fliken “Utseende” från WordPress Admin.

• Den bästa bildbredden för en bild i ett blogginlägg (till exempel är 1024px för temat Showcase Pro), och
• Vilken bildstorlek fungerar bäst i ditt temas sidofält (300)

Det här avsnittet ger dock inte optimala bildmått för din startsida, sidhuvudbild eller sidbanner.

Beroende på ditt tema bör WordPress lista optimala bildstorlekar för din startsida/huvudbild under Utseende —> Anpassa —> Framsidans sidhuvudbild. De flesta storlekar som visas här är cirka 1600 px x 1050 px.

Ange webbadressen till din webbplats i webbläsaren Chrome och använd Inspektera för att få exakt bildstorlek genom att använda följande steg:

1. 1. Höger + Klicka / Kontroll + Klicka (Mac) på webbsidan
   2. Klicka på Inspektera
   3. Klicka på menyn med tre punkter så att du kan se elementen längst ner så att sidvyn inte är responsiv

Här är elementet längst ner på sidan:

1. 1. Högerklicka på huvudbilden. Välj en bild som är samma som rubrikbannern
   2. Mått: Ställ in exakt bildstorlek som används i temats demo

I det här exemplet nedan är storleken 2548 px x 227 px. Medan bredden på rubriken är känslig, kan höjden på rubriken vara för liten för att vara en rubrik.

Om Home-huvudet (1600px x 1050px), det inte är samma storlek som Blog Header-bannern (1080px x 960px), använd bilder som ser bra ut i långa och smala utrymmen.

Medan skärmarna blir större, är en rubrikbredd på 1024px fortfarande den mest populära storleken. Webbplatser är designade för 1024 x 768px upplösning.

Om du tänker använda en rubrik som är mer än 1000 pixlar, använd en av dessa rubrikstorlekar:

• 1280 pixlar
• 1366 pixlar
• 1440 pixlar
• 1600 pixlar
• 1920 pixlar.

Dessa är högupplösta storlekar som kan justeras för att bibehålla upplösningar på mer än 1920 utan problem.

Vad är rätt storlek för din webbplats?

De mest populära rubrikstorlekarna för webbplatser:

Sammanfattningsvis

Tänk först på vad du vill att dina användare ska göra när de landar på din webbplats och optimera din header för den åtgärden. Se till att dina bilder inte är större än 72 dpi och att de använder RGB-färgformatet. Ju färre element du har i din header desto mer fokuserad är den önskade åtgärden. Omvänt, ju fler element i rubriken desto mer belastas användaren med att skanna innehållet och tolka det som är mest relevant för dem. Det finns inget rätt eller fel, allt beror på dina typiska användarresor och avsedd handling du vill köra. Tänk på att ju mer rich media i din rubrik, desto längre laddningstid och större sidstorlek på din webbplats. Kontrollera alltid din webbplats laddningshastighet med Ahrefs för att säkerställa att du får en bra balans mellan optimal användarupplevelse och optimal laddningshastighet.