Aká je správna veľkosť hlavičky webovej stránky pre vašu stránku?

Je pravda, čo hovoria – prvý dojem sa počíta. Hlavička vášho webu je prvá vec, ktorú ľudia uvidia, keď prídu na váš web. Viaceré štúdie sledovania očí objavili, že ľudia skenujú obrazovky počítačov a mobilných zariadení, začínajúc od hornej časti a vytvárajú cik-cak vzor po obrazovke. Hlavnou funkciou hlavičky webovej stránky je navigácia. Ale tiež zohráva dôležitú úlohu pri komunikácii štýlu a vzhľadu vašej značky. V tejto príručke preskúmame svet hlavičiek webových stránok a položíme si otázku, aká by mala byť ideálna veľkosť hlavičky webových stránok.

1. Branding

Začnite vytvorením obrázka, grafiky alebo iných vizuálnych konceptov, ktoré zobrazujú podstatu vášho produktu alebo služby. Grafika by mala zobrazovať značku vašej firmy a mala by mať aj logo. Umelecká hlavička bude mať správny výber štýlu a farby, ktoré zodpovedajú vašej webovej stránke, ktorá inšpiruje čitateľov.

Veľký, odvážny, netradičný: Atlassian

Atlassianova hlavička je veľká a odvážna. Možno kývnutie na svojho menovca Atlasa, gréckeho boha Titána, ktorý „niesol nebesia na svojich pleciach“. Modrá značka Atlassian sa objavuje v hypertextových odkazoch, tlačidlách výzvy na akciu a snímkach.

Tlmené, minimálne: Apple

Len málo značiek dokáže dosiahnuť taký minimalistický pocit ako Apple. Pre organizáciu s mnohými divíziami a viac ako 130 000 zamestnancami po celom svete vyniká tým, že všetko zjednodušuje a vizuálne komunikuje svoju značku tak stručne.

Akčné: Oxfam

Globálna mimovládna organizácia Oxfam používa svoju hlavičku na podporu najdôležitejšej akcie: darov. Umiestnenie, veľkosť, farba a nápadnosť „panelu akcií“ neslúži len ako navigačný nástroj, ale aj ako spôsob, ako oznámiť svoj účel, ale predovšetkým podnietiť akciu.

Čítať:  Aktualizácia algoritmu Google dnes 18. 6. 2024

Vyhľadávanie vpredu a v strede: Shutterstock

Stránka s obrázkami Shutterstock je o vyhľadávaní. Vyhľadávací panel je výrazný a bezproblémovo označený pomocou značky písma, farby a ikonografie.

2. Veľkosť

V prípade webových stránok predávajúcich produkty je hlavička užitočným nástrojom na prezentáciu obľúbených produktov a akcií. Kolotoče alebo posúvače sa často používajú na otáčanie cez odporúčané produkty alebo sekcie, ktoré slúžia ako štartovací bod do kľúčových častí stránky.

Hlavička Zary slúži takmer ako zátaras a zvýrazňuje kolotoč kolekcií. Indikátory karuselu (bodky) sú zobrazené zvisle vpravo dole, zatiaľ čo hlavička vypĺňa obrazovku na 100 % s navigáciou prekrytou v hornej časti. Jeho nápadný vzhľad.

Internet.org je ďalším príkladom full-frame hlavičky so stlmenou hornou navigáciou. Ale namiesto karuselu používa ľavú stranu hlavičky ako duálnu navigáciu a oblasť obsahu. Keď používateľ urobí výber, stránka sa posunie doľava, čím sa obrázok hrdinu presunie doľava a na pravej strane sa odkryje obsah tela.

V tejto variácii od Virgin Galactic v plnej šírke slúži hlavička ako hlavný navigačný prvok s videom na pozadí, ktoré poskytuje úžasné vizuálne prvky.

3. Obsah

Každý prvok v hlavičke vašej lokality musí spolupracovať. Umiestnenie a veľkosť každého objektu v hlavičke poskytuje používateľom vizuálne informácie o tom, ako sa pohybovať a používať vaše webové stránky, keď sa okamžite dostanú. Farba tlačidla, medzery a odsadenie okolo prvkov alebo veľkosť písma nadpisu môžu znamenať rozdiel medzi tým, či používateľ vykoná požadovanú akciu alebo nie.

Obrazový kolotoč

Obrázkový karusel sa bežne používa v hlavičkách webových stránok, pretože dosahujú niekoľko vecí:

  • Komunikuje po jednom obsahu, aby sa predišlo zámene
  • Vo veľkej miere sa spolieha na vizuálnu komunikáciu (čo je najlepšie, pretože ľudia vo všeobecnosti skenovať obsahu, na rozdiel od čítať obsah)
  • Zvýrazňuje dôležitý obsah
  • Správa sa ako predbežná navigácia a umožňuje používateľovi preskúmať rôzny obsah bez opustenia hlavnej stránky
  • Známy a očakávaný prvok webovej stránky, ktorý používatelia vedia používať a interagovať s ním: posúvaním alebo ťuknutím na bodky posúvajte snímky
Čítať:  Medzinárodný kontrolný zoznam SEO: 10 vecí, ktoré treba urobiť pred prekročením hranice

Hlavička HTC má tri snímky s tromi novými technológiami:

Výzva na akciu (CTA)

Niekedy jednoducho chcete, aby používateľ vykonal akciu. V tomto prípade chce The Information zachytiť e-mailovú adresu návštevníka. Odstránením každého ďalšieho prvku a 100% zameraním sa na CTA sa The Information dokáže optimalizovať pre požadovanú akciu:

Redakčný štýl

BMW prepracovalo svoju stránku tak, ako keby bolo vydavateľom a predstavuje používateľovi príbehy a články počnúc hlavným článkom v hlavičke o histórii loga M a farbách:

Štýl katalógu

Webová stránka spoločnosti Target napodobňuje ich fyzický katalóg s hlavičkou, ktorá sa používa na prezentáciu noviniek Women’s New Arrivals, po ktorej nasledujú rôzne ďalšie oddelenia v rámci obchodu, ktoré miešajú kolekcie, propagačné akcie, jednotlivé produkty a informácie.

Ako nájsť správnu veľkosť pomocou WordPress

Najlepším miestom, kde začať, je skontrolovať „Nastavenia médií“ na karte „Vzhľad“ v správcovi WordPress.

  • Najlepšia šírka obrázka pre obrázok v blogovom príspevku (napríklad 1024 pixelov je pre tému Showcase Pro) a
  • Aká veľkosť obrázka bude najlepšie fungovať na bočnom paneli vašej témy (300)

Táto sekcia však neposkytuje optimálne rozmery obrázka pre vašu domovskú stránku, obrázok hlavičky alebo bannery stránok.

V závislosti od vašej témy by mal WordPress uvádzať optimálne veľkosti obrázkov pre vašu domovskú stránku/obrázok hlavičky v časti Vzhľad —> Prispôsobiť —> Obrázok hlavičky prednej strany. Väčšina tu zobrazených veľkostí je približne 1600 x 1050 px.

Čítať:  Google odpovedá, či je používanie indexovacieho API pre normálnu webovú stránku dobré alebo zlé

Zadajte adresu URL svojho webu do prehliadača Chrome a pomocou funkcie Inspect získajte presnú veľkosť obrázka pomocou nasledujúcich krokov:

    1. Pravé + kliknutie / Control + kliknutie (Mac) na webovej stránke
    2. Kliknite na položku Skontrolovať
    3. Kliknite na ponuku s tromi bodkami, aby ste mohli zobraziť Prvky v spodnej časti, takže zobrazenie stránky nereaguje

Tu je prvok v spodnej časti stránky:

    1. Kliknite pravým tlačidlom myši na obrázok hlavičky. Vyberte obrázok, ktorý je rovnaký ako banner hlavičky
    2. Rozmery: Nastavte presnú veľkosť obrázka použitú v ukážke témy

V tomto príklade nižšie je veľkosť 2548 px x 227 px. Zatiaľ čo šírka hlavičky reaguje, výška hlavičky môže byť príliš malá na to, aby bola hlavičkou.

Ak hlavička Home (1600px x 1050px) nemá rovnakú veľkosť ako banner hlavičky blogu (1080px x 960px), použite obrázky, ktoré vyzerajú dobre v dlhých a úzkych priestoroch.

Aj keď sa obrazovky zväčšujú, šírka hlavičky 1024 pixelov je stále najobľúbenejšou veľkosťou. Webové stránky sú navrhnuté pre rozlíšenie 1024 x 768 px.

Ak chcete použiť hlavičku, ktorá má viac ako 1 000 pixelov, použite jednu z týchto veľkostí hlavičky:

  • 1280 pixelov
  • 1366 pixelov
  • 1440 pixelov
  • 1600 pixelov
  • 1920 pixelov.

Ide o veľkosti s vysokým rozlíšením, ktoré sa dajú bez problémov upraviť tak, aby si zachovali rozlíšenie vyššie ako 1920.

Aká je správna veľkosť pre váš web?

Najpopulárnejšie veľkosti hlavičiek pre webové stránky:

VEĽKOSŤ HLAVY WIDTH VÝŠKA RATIO (pomer).
Veľkosť hlavičky 1024 1024 256 4:1
Veľkosť hlavičky 1024

Jedna tretia strana (extra výška)

1024 300 24:7
Veľkosť hlavičky 1024

Polovičná strana

1024 384 8:3
Veľkosť hlavičky 1024 Celá strana (hlavička hrdinu) 1024 768 4:3
Veľkosť hlavičky 1280

Jedna tretia strana

1280 267 24:5
Veľkosť hlavičky 1280

Jedna tretina strany (extra výška)

1280 375 24:7
Veľkosť hlavičky 1280

Pol strany

1280 400 16:5
Veľkosť hlavičky 1280

Celá strana (hlavička hrdinu)

1280 800 8:5
Veľkosť hlavičky 1366

Jedna tretia strana

1366 256 16:3
Veľkosť hlavičky 1366

Polovičná strana

1366 384 32:9
Veľkosť hlavičky 1366

Celá strana (hlavička hrdinu)

1366 768 16:9
Veľkosť hlavičky 1440

Jedna tretia strana

1440 300 24:7
Veľkosť hlavičky 1400

Polovičná strana

1440 450 16:5
Veľkosť hlavičky 1440

Celá strana (hlavička hrdinu)

1440 900 8:5
Veľkosť hlavičky 1600

Jedna tretia strana

1600 300 16:3
Veľkosť hlavičky 1600

Polovičná strana

1600 450 32:9
Veľkosť hlavičky 1600

Celá strana (hlavička hrdinu)

1600 900 16:9
Veľkosť hlavičky 1920

Jedna tretia strana

1920 360 16:3
Veľkosť hlavičky 1920

Polovičná strana

1920 540 32:9
Veľkosť hlavičky 1920

Celá strana (hlavička hrdinu)

1920 1080 16:9
Čítať:  Ako získať spätné odkazy .Gov z vládnych webových stránok

Na záver

Najprv sa zamyslite nad tým, čo chcete, aby používatelia urobili, keď vstúpia na váš web, a optimalizujte svoju hlavičku pre túto akciu. Uistite sa, že vaše obrázky nie sú väčšie ako 72 dpi a že používajú farebný formát RGB. Čím menej prvkov máte v hlavičke, tým sústredenejšia je požadovaná akcia. Naopak, čím viac prvkov v hlavičke, tým viac je používateľ zaťažený skenovaním obsahu a interpretáciou toho, čo je preňho najrelevantnejšie. Neexistuje žiadne správne alebo nesprávne, všetko závisí od vašich typických ciest používateľa a zamýšľanej akcie, ktorú chcete vykonať. Majte na pamäti, že čím viac multimediálnych údajov v hlavičke, tým dlhší čas načítania a väčšia veľkosť stránky vášho webu. Vždy skontrolujte rýchlosť načítania svojich webových stránok pomocou SEOptimeru, aby ste zaistili správnu rovnováhu medzi optimálnou používateľskou skúsenosťou a optimálnou rýchlosťou načítania.

Nové Publikácie:

ODPORÚČANIE