Kada radite s web stranicom, prva oznaka s kojom se programer susreće u HTML-u je
Kako i gdje ga koristiti?
U HTML-u
Primjeri korištenja
Vježbanje rada s oznakom omogućit će vam potpuno razumijevanje načela rada.
Jedan od načina postavljanja "zaglavlja" stranice pomoću oznake je
HTML5
Osim naslova, ovdje također možete dodati željene elemente i oznake, osim
Na mojim gornjim informacijski projekti Najprije stručnjak za temu sastavlja strukturu članka (naslove i podnaslove), a zatim tekstopisci pišu tekst na temelju njih.
Struktura je zapravo vrlo važna ako vam je stalo do kvalitete. A da biste stvorili normalnu strukturu, morate razumjeti kako h oznake rade.
h1 je glavni podnaslov u članku, obično se nalazi iznad teksta.
Prvi naslov trebao bi biti vizualno veći od ostalih naslova na stranici.
h2-h6 su mali podnaslovi koji se postavljaju po principu ugniježđenja.
Čemu uopće služe zaglavlja?
Za one koji nisu baš upućeni u tematiku, evo u principu jednog dobrog videa o osnovama sastavljanja podnaslova h1-h6. Ako se ne smatrate stručnjakom, pogledajte:
I da učvrstimo gradivo, malo slabiji video:
Naslovi su dizajnirani tako da u jednoj frazi ili čak riječi istaknu glavnu bit, ideju sljedećeg teksta. Obično osoba prvo obrati pozornost na njih, odlučujući hoće li pročitati ostatak materijala. Naslovi su posebno važni u reklamnim tekstovima i pismima, te služe kao glavni alat za privlačenje pozornosti ciljane publike.
U kodu oznaka izgleda ovako:
, gdje slovo h dolazi od riječi “header”, što znači “naslov”. Svaka razina je označena odgovarajućim brojem.
H-tagovi kroz oči ljudi
Tekst podijeljen u podnaslove izgleda urednije i lakše se čita. Moderan korisnik Odavno sam naučio pregledavati članke u samo nekoliko sekundi i brzo donositi zaključke o tome vrijedi li pročitati cijeli tekst, sadrži li to korisne informacije koju traži. Naslovi upadaju u oči, ističući glavnu stvar i dajući korisniku priliku da analizira materijal.
Oznake h1, h2, h3, h4, h5, h6 omogućuju vam stvaranje svojevrsne karte za čitatelja pomoću koje se može brzo kretati kroz tekst. A ako ti istaknuti dijelovi uspiju privući pozornost, tada će se osoba zadržati na stranici i vjerojatno će pročitati cijeli članak. Rezultat možete provjeriti na čimbenici ponašanja. Ako ljudi ostanu na stranici i poduzmu neke radnje, to znači da SEO posao nije obavljen uzalud.
H-tagovi kroz oči tražilica
Roboti za pretraživanje prikupljaju informacije od njih za semantičku analizu. Razine naslova h1, h2, h3 od posebne su važnosti za botove. Njihova nedosljedna ili pogrešna primjena može negativno utjecati na rangiranje stranice. Ako uopće nema h-oznaka u HTML kodu, web mjesto će imati poteškoća s promicanjem. Razine h4, h5, h6 manje su značajne.
Hijerarhija H-oznaka
Glavno pravilo pri slaganju naslova je njihova hijerarhija. Nije nužno da tagovi slijede jedan za drugim po veličini, ali je neprihvatljivo koristiti npr. h3 u tekstu ako nigdje nemate h2 meta ili koristiti h6 bez h5.
Ovako izgleda hijerarhija s ispravnim ugniježđenjem:
Što je h1 oznaka?
Oznaka h1 je sadržaj teksta (poput naslova knjige ili naslova novinskog članka).
Svaka stranica treba imati jedan i samo jedan h1 tag.
Što se tiče atraktivnosti za korisnika, ono je od primarne važnosti. Ali za SEO promociju, .
Naslov je također naslov, ali nije napisan samo za ljude, već i za robote. Ne prikazuje se na samoj stranici, već samo u kartici preglednika i u isječku kao aktivna poveznica na stranicu. Zapravo, naslov je alternativni, ali glavni naslov za HTML dokument. Ako ga nema, onda tražilica uzima h1 kao osnovu i koristi ga u srp.
Zašto bi se h1 razlikovao od naslova?
Vrlo je važno razumjeti da su h1 i Title različite naslove. I u skladu s tim, moraju se vješto kombinirati. Evo osnova o ovoj temi:
Zanemarivanje pravila jedinstvenosti i relevantnosti naslova može dovesti do toga da stranica padne pod filter. U zadnje vrijeme tražilice su počele obraćati pozornost Posebna pažnja kvalitetu sadržaja i njegove SEO postavke. Duplikati, spam, kaotično postavljanje naslova i njihova neusklađenost sa sadržajem su kažnjivi.
Zahtjevi za duljinu H1
Preporuča se da H1 bude sažetiji od naslova, ne premašujući broj znakova veći od 50. Ali neće biti katastrofa ako naslov ispadne duži, kada nije moguće ugurati cijelu bit u naznačeno broj.
Posebni dodaci za WordPress omogućuju analizu ispravno punjenje sve meta izravno u editoru.
Pravila za pravilno pisanje h1
- Mora biti jedinstven za cijelu stranicu i apsolutno čitljiv;
- Ne ponavlja se naslovna oznaka, ali mu također ne proturječi;
- Ne biste trebali biti predugi (naslov možete učiniti voluminoznijim);
- Korišten samo jednom po stranici;
- Relevantno za tekst i odražava semantičku bit materijala;
- Zanimljiv i privlačan korisniku;
- Ne možete staviti točku na kraju i preporuča se minimalna upotreba interpunkcijskih znakova.
Primjena ključeva
Glavni ključne fraze, prije svega, mora sadržavati naslov. Ali i oni bi trebali biti napisani u h1. U oba slučaja bolje je to učiniti na samom početku. Ali bilo bi bolje da se ključne riječi ne dupliciraju jedna drugu u ove dvije oznake. Morate koristiti različite oblike riječi ili razrijeđene pojave u h1 i izravne pojave u naslovu.
Neki uzimaju sve ključeve na stranici i koriste ih za stvaranje strukture članka. Odmah imajte na umu da će bez cool PF-ova takvo rasipanje ključeva u podnaslovima biti kažnjeno filtrom za neželjenu poštu.
Psihološke tehnike za pisanje atraktivnog naslova
Naslov bi trebao biti privlačan. Evo videozapisa Maxima Ilyakhova, stručnjaka u području medija, rektora Škole urednika i tvorca usluge Glavred:
Evo još par “trikova” koji se koriste pri pisanju naslova.
Riješenje
Imajte na umu da čovjek uvijek ne traži informacije ili robu, već, prije svega, rješenje za svoje probleme, želje, potrebe. Točno se pozabavite željenim problemom ciljane publike
Primjer dobrog naslova: „Opada li vam kosa? Zaustavite gubitak kose u tjedan dana."
Primjer lošeg naslova: “Može li se zaustaviti gubitak kose?”
U prvom slučaju jasno identificiramo problem i predlažemo specifično rješenje. U drugom slučaju neizravno se utječe na problem i zamagljuju se opcije za njegovo rješavanje.
Intriga
Primjer dobrog naslova: “Otkrivamo tajnu najučinkovitijeg recepta za gubitak kose.”
Primjer lošeg naslova: " Najbolji recept za gubitak kose."
Prijemni "ispit"
Ovako napisana rečenica izaziva čitatelja, poziva ga da sam sebe iskuša.
Primjer dobrog naslova: “Jeste li sigurni da se ispravno borite protiv gubitka kose?”
Primjer lošeg naslova: “Znate li sve o gubitku kose.”
Naravno, ovo nisu sve metode koje pomažu utjecati na percepciju osobe i privući njezin interes. Čitajte knjige o marketingu da biste saznali više ako ste zainteresirani za ovu temu. Inače, naslov može biti i “primamljiv”. Štoviše, najvjerojatnije je on taj koji je istaknut u Rezultati pretraživanja. Njegov prikaz možete provjeriti nakon što se stranica indeksira.
Zašto su potrebni podnaslovi h2-h6?
Oznake od h2 do h6 nalaze se u tijelu samog članka, strukturno ga dijeleći na tematske odlomke, te u kodu HTML dokumenta, ističući ga značajni elementi. Oni su također identificirani roboti za pretraživanje za semantičku analizu stranice.
Potrebno je hijerarhijski označiti sve važno i vrijedi pogledati korisnika na stranici. Ova struktura pomaže osobi da se brzo snađe u informacijama i procijeni njihovu usklađenost s njihovim potrebama.
h2 – fokusira pozornost korisnika i tražilice na glavni sadržaj članka. Prikazuje najvažnije stvari u tekstu.
h3 je podstavka za informacije koje idu pod H2, otkrivajući ih još dublje.
h4, h5, h6 – definiraju se kao ugniježđeni podnaslovi (detaljno otkrivaju bit H2 ili H3) i koriste se u tekstu za isticanje sitnica i smislene riječi, kao iu izborniku, bočnoj traci i drugim komponentama web dokumenta.
Sve h-oznake moraju biti unutar 50 znakova.
Kako pravilno napisati podnaslove h2-h6
- Nemoguće je da najmanji podnaslov bude prisutan bez većeg. To jest, ako tekst sadrži meta oznaku h4, tada joj moraju prethoditi h2 i h3.
- Što je viši nivo naslova, to bi font trebao biti veći. U WordPressu su zadane postavke obično postavljene tako da se oznake automatski ispravno formatiraju.
- Sve h-oznake moraju odgovarati sadržaju sadržaja i odražavati bit informacija.
- Neprihvatljivo je koristiti h1-h6 kao sidra ili aktivne veze.
- Ne možete pisati druge oznake unutar oznake h.
- U h-tagovima dopušteni su samo tekst i interpunkcija.
- U podnaslovima ne smije biti spama ključne riječi. Najbolje je koristiti ključne riječi u naslovu, h1, h2, au manjim, poput h3, h5, h6, fokusirati se na detaljnu raspravu o temi.
Ako izgled stranice sadrži naslov i glavni naslov H1, ali sam tekst članka nije prevelik i ne sadrži podnaslove, to nije pogreška. Postoji dosta stranica u TOP-u gdje je sadržaj gotovo kontinuirana traka, možda podijeljena na paragrafe. Možete doći na vodeću poziciju bez "mađijanja" nad označavanjem teksta, stavljajući veći naglasak na. WordPress stranice lako se indeksiraju od strane tražilica. Ipak, korištenje ovih oznaka ne samo da olakšava zadatak, već i čini sadržaj lakšim i ugodnijim za vizualnu percepciju.
Kako ispuniti h-tagove u WordPressu
h1 se obično popunjava u polju iznad teksta u objavi:
Da biste napravili podnaslove h2-h6, morate istaknuti neophodan element i, lebdeći pokazivač iznad kartice "naslovi", odaberite onaj koji vam je potreban klikom na njega. Učinite isto za svaki od podnaslova, uključujući ih u željenom formatu.
Postoji još jednostavniji način - možete upisati tekst u Word koristeći potrebne oznake i jednostavno kopirajte i zalijepite članak u WordPress uređivač. Istaknuto u Naslovi riječi automatski će se pojaviti u prave veličine. Ako je potrebno, možete ih ispraviti pomoću alata za uređivanje WordPress CMS-a.
Pustili smo nova knjiga“Sadržajni marketing na društvenim mrežama: Kako ući u glave svojih sljedbenika i natjerati ih da se zaljube u vaš brend.”
Zaglavlje web stranice je gornji dio stranica, drugim riječima, zaglavlje stranice, važna komponenta web resursa, koja vam prva upada u oči.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Što je zaglavlje web stranice na primjeru našeg života? Na primjer, na glavi graditelja vidimo kacigu, a na glavi kuhara vidimo bijelu kapu. Mladenkina glava je ukrašena velom, a muslimanka je pokrivena hedžabom. Vidimo krunu na kraljevoj glavi. Kažu da pokrivalo za glavu utječe na ponašanje, a po njemu često možemo točno odrediti kakva osoba stoji ispred nas.
Zaglavlje stranice nalazi se na svakoj stranici, a može biti isto na svakoj stranici ili različito. Ako koristite različita zaglavlja na stranicama, zapamtite da je dizajn zaglavlja interna stranica trebala bi biti skraćena verzija zaglavlja početna stranica. Ovo je pravilo dobre forme u dizajnu web stranice.
Što treba pisati u zaglavlju stranice
Kao i za posjetitelje, tako i za tražilice, vaša web stranica počinje zaglavljem. Stoga se u zaglavlju nalazi:
- naziv tvrtke (ili web stranice);
- kontakti;
- drugo važni elementi: slogan, radno vrijeme, Kratki opis aktivnosti itd.;
- vrh horizontalni izbornik- to je ono što bi trebalo završiti zaglavlje.
Imajte na umu da su elementi zaglavlja koji moraju biti prisutni na svakoj stranici ime i kontakti.
Ne zaboravite na prezentacijsku ulogu zaglavlja, stoga njegov dizajn treba privući pozornost, ali ne smije odvratiti posjetitelja od pretraživanja potrebne informacije. Loše zaglavlje može odbiti posjetitelje i oni će otići na drugu stranicu koja možda ima lošiji sadržaj od vašeg.
Zašto je važno staviti kontakte u zaglavlje?
Tražilica svakoj stranici dodjeljuje određenu regiju, od kojih je jedna glavna. Prije svega, fokusira se na kontakte navedene u zaglavlju stranice. Nakon toga traži stranicu "Kontakti", gdje možete odrediti dodatne regije.
Zaglavlje web stranice i HTML pravila
Za uspješna promocija stranica treba primijeniti nekoliko pravila kada razvija zaglavlje.
- Ime i kontakti nikada ne bi trebali biti prikazani kao slika. Samo tekst koji tražilica može razumjeti.
- Imati H1 zaglavlje koje je isto na svim stranicama vaše web-lokacije ometat će promociju resursa.
- Nemojte koristiti teške slike, flash ili puno grafike. To otežava učitavanje stranice i smeta mnogim korisnicima.
- Nemojte ugrađivati horizontalni izbornik u Flash, nemojte prikazivati izbornik u obliku slika. Koristite samo tekst. Inače, ako trebate promijeniti stavke izbornika, možete naići na određene poteškoće.
- Napravite HTML zaglavlja. Dolje zaglavlja koja se u potpunosti sastoje od slika ili flash animacija! Zašto si otežavati posao? Ako se želite istaknuti, možete nenametljivo koristiti elemente dinamičkog dizajna koji se pokreću na skriptama.
- Zaglavlje treba biti visine koja ne ometa percepciju sadržaja. Za izvori informacija Logično je napraviti nisko zaglavlje (100-200 piksela). Za odredišne stranice i stranice s prezentacijskim posjetnicama, veličina zaglavlja može biti malo veća.
Kako stvoriti pravo zaglavlje
Ako imate gotovu knjigu brendova, tada sve stranice web mjesta, uključujući zaglavlje, trebaju biti dizajnirane u skladu s njom. Važan zadatak web dizajnera je postići ujednačenog stila između zaglavlja, polja sadržaja i podnožja stranice.
Dajte prednost pozitivnim slikama: ljudi s osmjehom na licu, lijepa djevojka, priroda. Da biste stvorili ozbiljnu atmosferu, koristite slike bez lica u prigušenom Shema boja, uvijek s logom.
Recimo da nam treba zaglavlje za web stranicu praonice rublja. Odaberite fotografiju perilica za rublje(morate odmah pokazati posjetitelju na koju stranicu je došao i što mu ovdje mogu ponuditi). Alternativno, možete koristiti fotografiju atraktivne djevojke koja pere odjeću, kao i elemente dizajna koji izazivaju osjećaj čistoće i svježine. Svaka fotografija mora biti unikatna ili barem unikatna grafički urednik. Možete izraditi logotip, na primjer, shematski bubanj za pranje i val unutar njega. Pored logotipa navodimo naziv.
Stranicu dočekuje zaglavlje, jedinstveno je poslovna kartica. Stoga, kada razvijate web stranicu, obratite maksimalnu pozornost na zaglavlje!
Često naizgled jednostavni zadaci izgleda zahtijevaju složenu strukturu HTML označavanja i korištenje CSS trikova. Centriranje elemenata ili poravnavanje sadržaja može biti vrlo zamorno. Jedan takav zadatak je poravnavanje elemenata na vrhu stranice tako da je logotip s lijeve strane, a stavke izbornika s desne strane. Možete koristiti float i position:absolute, a za okomito poravnanje možete dodati marginu i ispunu različite elemente. Čini se da nije ništa komplicirano. Ali ako se stranica treba ispravno prikazati na Mobilni uredaji, pojavljuju se mnogi problemi.
Dolje je sažet način rješavanja ovog problema.
HTML oznake su najjednostavnije moguće:
Super loše
Visina zaglavlja je fiksna, dod poravnanje teksta: poravnanje, za podređene elemente:
Zaglavlje ( poravnanje teksta: poravnanje; razmak između slova: 1px; visina: 8em; ispuna: 2em 10%; pozadina: #2c3e50; boja: #fff; )
Dodati prikaz: inline-block za sve elemente nav tako da ih možete poredati jedan za drugim:
Zaglavlje h1, navigacija zaglavlja (prikaz: inline-block;)
Pripisati poravnanje teksta: poravnanje radilo onako kako želimo, moramo upotrijebiti mali trik s pseudoelementima, koji je pronađen u članku Perfectly justified CSS grid technique using inline-block, autora Jelmera de Maata:
Zaglavlje::nakon ( sadržaj: ""; prikaz: inline-block; širina: 100%; )
Rezultat je bio horizontalno poravnanje, bez korištenja plutati I pozicija: apsolutna. Sada morate okomito poravnati elemente. Korištenje okomito poravnati za elemente nav postojat će ovisnost o visini nadređenog bloka – zaglavlja. A ovo nije baš točno. Primjeri korištenja vertical-align: top i vertical-align: middle na jsbin. Ispod je možda najviše prikladan način okomito poravnanje.
Upotrijebimo ponovno pseudo elemente. koristeći primjer iz članka Centriranje u nepoznatom, koji spominje Michał Czernow:
Zaglavlje h1 (visina: 100%; ) zaglavlje h1::prije (sadržaj: ""; prikaz: inline-block; okomito poravnanje: sredina; visina: 100%; )
Rezultat je ono što vam je potrebno:
Ostala su dva problema za riješiti: ispravan prikaz na velike količine tekst u zaglavlju i prilagodljivost. Ako je naslov stranice predugačak, izgled će početi kliziti:
Korištenje trika s pseudoelementima Zaglavlje:
CSS kod
zaglavlje ( poravnanje teksta: poravnanje; visina: 15em; ispuna: 2em 5%; pozadina: #2c3e50; boja: #fff; ) zaglavlje::nakon ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje > div, zaglavlje nav, zaglavlje div h1 ( prikaz: inline-block; okomito poravnanje: sredina; ) zaglavlje > div ( širina: 50%; visina: 100%; poravnanje teksta: lijevo; ) zaglavlje > div: :prije (sadržaj: ""; prikaz: inline-block; okomito poravnanje: sredina; visina: 100%; )
Puno bolje izgleda:
Sada prijeđimo na prilagodljivost. Postoji nekoliko načina za rješavanje ovog problema, možete jednostavno ne postaviti visinu zaglavlja, a svi unutarnji elementi će biti prilagodljivi visini. Ovo neće zahtijevati drugi trik s pseudo-elementima, živi primjer na jsbin.
CSS kod
zaglavlje ( poravnanje teksta: poravnanje; ispuna: 2em 5%; pozadina: #2c3e50; boja: #fff; ) zaglavlje::nakon ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje h1, navigacija zaglavlja (prikaz: inline-block; okomito poravnanje: sredina; ) zaglavlje h1 (širina: 50%; poravnanje teksta: lijevo; padding-top: 0.5em; ) navigacija zaglavlja (padding-top: 1em; )
Ako trebate postaviti visinu zaglavlja, tada ćete morati upotrijebiti drugi trik s pseudoelementima i dodati medijski upit za zaslone različite veličine:
@media screen and (max-width: 820px)( header ( height: auto; ) header > div, header >
Rezultat je prilagodljiv i izgleda ovako na mobilnim uređajima:
U primjeru se radi jasnoće koristi 820px; na živom mjestu vrijednost bi naravno trebala biti drugačija, u skladu sa zahtjevima. Za podršku Internet Explorer 8 potrebno je koristiti “:” umjesto “::” za pseudoelemente.
Konačni CSS kod
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margina: 0; ) body ( background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;) header ( text-align: justify ; visina: 8em; ispuna: 2em 5%; pozadina: #2c3e50; boja: #fff; ) zaglavlje::nakon ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje > div, zaglavlje > div::before, zaglavlje nav, zaglavlje > div h1 ( prikaz: umetnuti blok; okomito poravnanje: sredina; poravnanje teksta: lijevo; ) zaglavlje > div ( visina: 100%; ) zaglavlje > div::prije ( sadržaj : ""; visina: 100%; ) zaglavlje > div h1 (veličina fonta: 3em; stil fonta: kurziv; ) zaglavlje nav a (padding: 0 0,6em; razmak: nowrap; ) zaglavlje nav a:zadnji -child ( padding-right: 0; ) @media screen and (max-width: 720px)( header ( height: auto; ) header > div, header > div h1, header nav ( height: auto; width: auto; display : blok; poravnanje teksta: centar; ) )
Proizlaziti:
Kao što znamo, ne postoji druga prilika da se ostavi prvi dojam. U području digitalni dizajn ova istina je pojačana visoka konkurencija i širok izbor dostupnih rješenja. Štoviše, sasvim je očito da su pri stvaranju prvog dojma neki dijelovi web stranice važniji od drugih, na primjer, zaglavlje stranice (zaglavlje stranice). Danas ćemo pogledati sve nijanse koje se odnose na ovaj pojam:
Bilješka je prijevod članka s uxplaneta, veliko hvala autorima na njoj.
Što je zaglavlje web stranice?
U klasičnom rasporedu, blok zaglavlja nalazi se na samom vrhu. To je ono što ljudi prvo vide kada dođu na vaš projekt. Budući da je na neki način pozivnica, sadrži osnovne informacije o proizvodu i niši na koju se stranica odnosi - važno je da korisnici u roku od nekoliko sekundi shvate o čemu se radi.
Dizajn zaglavlja web stranice ima puno prostora za kreativnost, ali također treba biti privlačan, sažet i koristan. Ovdje se nalaze ključni elementi navigacija.
Snimka zaslona prikazuje Početna stranica online trgovina stripovima: na vrhu zaglavlja stranice pronaći ćete logotip, glavni izbornik, kao i ikone košarice i pretraživanja.
Što je uključeno u zaglavlje stranice?
Ovaj blok može uključivati različite objekte:
- obilježja robne marke: logo, ime, naziv robne marke, slogan, maskota, fotografija tvrtke ili njezinog vođe itd.;
- informacije o proizvodu ili usluzi koja se predstavlja;
- poveznice na važne elemente sadržaja ();
- poveznice na profile društvenih mreža;
- kontakti (telefon, E-mail i tako dalje.);
- prebacivanje jezika s višejezičnim sučeljem;
- blok pretraživanja;
- polje za pretplatu;
- poveznice na proizvod: preuzimanje demo verzije, adresa u AppStoreu itd.
Ne smiju se koristiti sve gore navedene točke. Pazite da dizajn zaglavlja za web mjesto nije preopterećen nepotrebne informacije, što sprječava posjetitelje da se usredotoče na glavne aspekte.
Ispod su primjeri postavljanja takvih elemenata:
Bjorn web stranica (projekt studija za dizajn interijera)
Na vrhu izgleda nalazi se fiksno (ljepljivo) zaglavlje na stranici, koje omogućuje da ostane stalno vidljivo dok se pomičete. S lijeve strane nalazi se logo brenda, a s desne poveznice “Proizvodi”, “Studio”, “Novosti” + ikona “Trgovina”. Središnji prazan prostor vizualno odvaja dva bloka.
Ovdje zaglavlje web-mjesta ima drugačiji pristup: logotip i marka su u sredini, a lijevo i Desna strana svaki ima dvije veze koje korisnicima omogućuju brzi skok do odjeljaka koji su im potrebni.
Zašto je zaglavlje važno za web stranicu?
To je zbog niza razloga. Prvo, kada ljudi posjećuju određeni web resurs (osobito prvi put), oni ne gledaju cijelu stranicu pažljivo i detaljno, već je brzo prelete, tražeći nešto što će privući pozornost i uvjeriti ih da ostanu. Razni pokusi pokazali su prisutnost tipični modeli pokreti očiju korisnika. Spominju se tri glavne opcije:
Prva shema tipična je za stranice s ujednačenom prezentacijom informacija i slabom vizualnom hijerarhijom. Identificira četiri aktivne zone, od kojih su dvije povezane s područjem zaglavlja stranice.
Z-model
Drugi obrazac pokreta očiju je u obliku slova Z i tipičan je za stranice s vizualnim odvajanjem blokova sadržaja. Ovdje oči čitatelja idu od gornjeg lijevog kuta do istog desnog, prvo gledajući ovo zaglavlje.
Često korisnici pokazuju sljedeći pristup:
- U početku se oko pomiče vodoravno, obično uz vrh - prvu prugu modela u obliku slova F.
- Pogled posjetitelja tada se spušta niže i stranica se ponovno "skenira" vodoravno, ali pokriva više kratko područje nego u prvom stavku. Ovo je dodatni element F-sheme.
- Na kraju, oko se pomiče na lijevu stranu ekrana, koja se gleda okomito. Ponekad ovaj proces prilično sporo i sustavno, što se pojavljuje kao čvrsta traka na toplinskoj karti kretanja očiju. U drugim slučajevima, pogled se kreće brže. Ovaj posljednji element, stvarajući korijen slova F.
Sve tri opcije pokazuju da gledanje počinje u gornjem vodoravnom području. Dakle, zaglavlje web mjesta na stranicama web projekta istovremeno igra dvije uloge: korisniku se daje prilika da brzo pronađe ključne informacije, a programer ima priliku da ih kompetentno predstavi. Zbog toga je blok zaglavlja tako važan za stručnjake za promociju sadržaja i proizvoda.
Kao što Bogdan Sandu ističe u članku, "stranica mora odmah privući pažnju, inače će biti veliki promašaj."
Unatoč svemu važne bilješke iz članka, treba napomenuti da ne treba svaki web resurs ovaj element. U mnogim kreativnim dizajnima, zaglavlje i njegove funkcije povezane su s drugim područjima izgleda.
Dizajn zaglavlja web stranice
Čitljivost i vizualna hijerarhija
Ova se stavka reproducira važna uloga, pa vam je potreban pažljiv pristup zaglavlju i njegovoj boji pozadine. Korisnik mora uočiti i percipirati sve informacije što je moguće brže i bez napora.
U konceptu trenutnog predloška vijesti, vidjet ćete izbornik u zaglavlju stranice s dva aktivne poveznice na kategoriju publikacija, poveznicu na “live” prijenos i polje za pretraživanje. Logo je u sredini, kao u jednom od gornjih primjera.
Ovdje koristimo popularni s izlomljenom apstraktnom mrežom, a zaglavlje stranice uspješno ga nadopunjuje: lijevi dio je vizualno duži, sastoji se od logotipa i tri poveznice; desna je kraća, s elementima pretraživanja i pretplate.
Morate upamtiti da se zaglavlje web-mjesta može drugačije ponašati dok se korisnik kreće po stranici:
- neki programeri koriste "ljepljivi" (fiksni) blok, uvijek vidljiv i aktivan;
- drugi to jednostavno skrivaju;
- Postoji i opcija kada zaglavlje ne nestane u potpunosti, već se na određeni način smanji na , ostavljajući dostupne samo osnovne važne informacije.
Jelovnik za hamburgere
Popularno dizajnersko rješenje koje skriva osnovne veze na odjeljke iza odgovarajućeg gumba. Na blogu smo već raspravljali o ovoj značajci u članku o njezinim alternativama.
Ovaj gumb danas je često punopravni element u zaglavlju web mjesta, a mnogi korisnici već znaju da je glavni izbornik skriven iza njega. Ovaj pristup oslobađa prostor, čineći raspored minimalističkim i laganim, a istovremeno dopušta više prostora za druge objekte. Osim toga, to vam omogućuje stvaranje skladnog sučelja za različite vrste uređaja.
Ovdje je prikazana verzija "kompaktnog" izbornika u zaglavlju stranice, koji sadrži mnogo poveznica i održava jednostavan opći stil predloška. Osim njega, u zaglavlju postoje dva područja: s lijeve strane marka i kratka informacija o projektu; Ikona za pretraživanje također se nalazi u desnom području. Središnji dio je ostavljen slobodan, dodajući lakoću i ravnotežu cijelom rasporedu.
Mnogo je toga u strukturi stranice s lijeve strane prazan prostor, a logo i naziv tvrtke su unutra gornji kut, gdje počinje kretanje očiju. Dalje u dizajnu zaglavlja nalaze se poveznice na glavne odjeljke. Ova vam opcija omogućuje skrivanje mnogih poveznica i organiziranje dobre vizualne hijerarhije.
I premda ovu odluku je još uvijek predmet aktivne rasprave, još uvijek se koristi kao navigacija u zaglavlju stranice. Njegovi protivnici ističu da ova blokada može zbuniti neiskusne i nove korisnike interneta. Zato je preporučljivo odluku o uvođenju gumba “hamburger” donijeti tek nakon istraživanja ciljane publike.
Popravljeno (ljepljivo) zaglavlje web stranice
Ovdje izgled ima fiksni blok na samom vrhu koji se ne skriva prilikom pomicanja. Sadrži naslov, ikonu povećala za pretraživanje i gumb "hamburger".
Ispod je još jedan primjer kreativnog pristupa učinkovit dizajn zaglavlja stranice. Kada se prvi put prijavite, možete vidjeti samo njegovu minimalističku implementaciju s ikonama društvenih mreža i pretraživanja (bez izbornika i sl.). Ali dok se pomičete, formira se fiksna traka s tradicionalnim skupom elemenata.
Dupli meni
Navigacija u zaglavlju stranice može se sastojati od dva različite jelovnike. U moderno doba ovo je standardni potez.
U GIF-u ispod vidjet ćete "ljepljivo" zaglavlje koje se sastoji od dvije "linije":
- Na vrhu se nalaze veze na društveni mediji, gumb za pretraživanje, trgovinu i izbornik; u sredini je logo.
- Druga linija fokusirana je na glavne dijelove projekta: katalog proizvoda, lokaciju prodajnih mjesta, novosti i ponude, usluge i kontakte.
Hijerarhija zaglavlja čini sve elemente jasnima i lakima za čitanje, pružajući snažno korisničko iskustvo.
Ukupno
Zaglavlje web stranice je strateški važno područje u dizajnu izgleda. Naravno, svaki konkretan slučaj zahtijeva drugačiji pristup i (eventualno) istraživanje korisnika, ali uvijek treba uzeti u obzir osnovne nijanse o kojima smo govorili.
Ako imate što dodati članku iz osobnog radnog iskustva, napišite ispod - zanimljivo je čitati. Koja vam se implementacija zaglavlja najviše svidjela?
