Kada radite sa web-stranicom, prva od 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 da u potpunosti razumijete principe rada.
Jedan od načina za postavljanje “zaglavlja” web stranice pomoću oznake je
HTML5
Osim naslova, ovdje možete dodati i sve željene elemente i oznake osim
Na mojim gornjim informacioni projekti Prvo, stručnjak za tu temu sastavlja strukturu članka (naslovi i podnaslovi), a zatim autori tekstova pišu tekst na osnovu njih.
Struktura je zapravo veoma važna ako vam je stalo do kvaliteta. A da biste kreirali normalnu strukturu, morate razumjeti kako funkcionišu h oznake.
h1 je glavni podnaslov u članku, obično se postavlja iznad teksta.
Prvi naslov bi trebao biti vizualno veći od ostalih naslova na stranici.
h2-h6 su mali podnaslovi koji su postavljeni prema principu ugniježđenja.
Čemu uopće služe zaglavlja?
Za one koji nisu baš upoznati s temom, evo, u principu, dobrog videa o osnovama sastavljanja podnaslova h1-h6. Ako se ne smatrate stručnjakom, pogledajte:
I za konsolidaciju materijala, malo slabiji video:
Naslovi su dizajnirani da istaknu u jednoj frazi ili čak riječi glavnu suštinu, ideju sljedećeg teksta. Obično osoba prvo skrene pažnju na njih, odlučujući hoće li pročitati ostatak materijala. Naslovi su posebno važni u reklamnim tekstovima i pismima i služe kao glavni alat za privlačenje pažnje ciljne publike.
U kodu oznaka izgleda ovako:
, gdje slovo h dolazi od riječi “header”, što znači “naslov”. Svaki nivo je označen odgovarajućim brojem.
H-oznake kroz oči ljudi
Tekst podijeljen na podnaslove izgleda urednije i lakši je za čitanje. Moderan korisnik Odavno sam naučio da skeniram članke u samo nekoliko sekundi i brzo izvlačim zaključke da li se isplati čitati cijeli tekst, da li to sadrži korisne informacije koju on 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ćavaju vam da kreirate neku vrstu mape za čitaoca pomoću koje se može brzo kretati po tekstu. A ako ovi naglasci uspiju privući pažnju, osoba će se zadržati na stranici i vjerovatno će pročitati cijeli članak. Rezultat možete provjeriti putem faktori ponašanja. Ako ljudi ostanu na stranici i poduzmu neke radnje, to znači da SEO posao nije obavljen uzalud.
H-oznake očima pretraživača
Roboti za pretraživanje prikupljaju informacije od njih za semantičku analizu. Nivoi naslova h1, h2, h3 su od posebne važnosti za botove. Njihova nedosljedna ili pogrešna primjena može negativno utjecati na rangiranje stranice. Ako u HTML kodu uopće nema h-tagova, tada će stranica imati poteškoća u promociji. Nivoi h4, h5, h6 su manje značajni.
Hijerarhija H-tagova
Glavno pravilo u uređenju naslova je njihova hijerarhija. Nije neophodno da oznake prate jedna drugu veličinom, ali je neprihvatljivo koristiti npr. h3 u tekstu ako nigde nemate meta h2, ili koristite h6 bez h5.
Ovako izgleda hijerarhija sa ispravnim ugniježđenjem:
Šta je h1 oznaka?
Oznaka h1 je sadržaj teksta (poput naslova knjige ili naslova novinskog članka).
Svaka stranica treba da ima jednu i samo jednu h1 oznaku.
Što se tiče atraktivnosti za korisnika, to je od primarnog značaja. 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 na kartici pretraživača i u isječku kao aktivna veza do stranice. U stvari, naslov je alternativa, ali glavni naslov za HTML dokument. Ako nedostaje, onda pretraživač uzima h1 kao osnovu i koristi ga u srpu.
Zašto bi se h1 trebao razlikovati od Title?
Vrlo je važno shvatiti da su h1 i Title različiti naslovi. I shodno tome, moraju se vješto kombinirati. Evo osnova o ovoj temi:
Zanemarivanje pravila za jedinstvenost i relevantnost naslova može dovesti do toga da stranica potpadne pod filter. U poslednje vreme tražilice su počele obraćati pažnju Posebna pažnja kvaliteta sadržaja i njegovih SEO postavki. Kažnjivi su duplikati, prekomjerna neželjena pošta, haotično postavljanje naslova i njihova neusklađenost sa sadržajem.
Zahtjevi za dužinu H1
Preporučljivo je da H1 bude sažetiji od naslova, da ne prelazi broj znakova veći od 50. Ali neće biti katastrofa ako se naslov pokaže dužim, kada nije moguće cijelu suštinu ugurati u naznačeno broj.
Posebni dodaci za WordPress vam omogućavaju analizu ispravno punjenje svi metas direktno u editoru.
Pravila za pravilno pisanje h1
- Mora biti jedinstven za cijelu stranicu i apsolutno čitljiv;
- Ne ponavlja se title tag, ali isto tako nije u suprotnosti;
- Ne bi trebalo da bude predugačak (naslov možete učiniti obimnijim);
- Koristi se samo jednom po stranici;
- Relevantno za tekst i odražava semantičku suštinu materijala;
- Zanimljiv i atraktivan za korisnika;
- Ne možete staviti tačku na kraj i preporučuje se da znakove interpunkcije koristite na minimum.
Primjena ključeva
Main ključne fraze, prije svega, mora sadržavati naslov. Ali ih također treba napisati 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 u ove dvije oznake. Morate koristiti različite oblike riječi ili razrijeđena pojavljivanja u h1 i direktna pojavljivanja u naslovu.
Neki uzimaju sve ključeve na stranici i koriste ih za kreiranje strukture članka. Odmah imajte na umu da će bez cool PF-ova takvo raspršivanje ključeva u podnaslovima biti kažnjeno filterom za prekomjernu neželjenu poštu.
Psihološke tehnike za pisanje atraktivnog naslova
Naslov bi trebao biti privlačan. Evo video snimka Maksima Iljahova, specijaliste za oblast medija, rektora Škole urednika i kreatora usluge Glavred:
Evo još nekoliko "trikova" koji se koriste prilikom pisanja naslova.
Rješenje
Zapamtite da čovjek uvijek traži ne informacije ili dobra, već prije svega rješenje svojih problema, želja, potreba. Bavite se tačno predviđenim problemom ciljne publike
Primjer dobrog naslova: „Opada li ti kosa? Zaustavite gubitak kose za nedelju dana."
Primjer lošeg naslova: "Može li se zaustaviti gubitak kose?"
U prvom slučaju jasno identifikujemo problem i predlažemo specifično rešenje. U drugom slučaju, problem je indirektno pogođen i opcije za njegovo rješavanje su zamagljene.
Intriga
Primjer dobrog naslova: “Otkrivanje tajne najefikasnijeg recepta za gubitak kose.”
Primjer lošeg naslova: " Najbolji recept za gubitak kose."
Prijemni "ispit"
Rečenica napisana u ovoj formi izaziva čitaoca, pozivajući ga da se testira.
Primjer dobrog naslova: „Jeste li sigurni da se pravilno borite protiv gubitka kose?“
Primjer lošeg naslova: "Znate li sve o gubitku kose."
Naravno, ovo nisu sve metode koje utiču na percepciju osobe i privlače njen interes. Pročitajte knjige o marketingu kako biste saznali više ako ste zainteresirani za ovu temu. Inače, naslov može biti i “primamljiv”. Štaviše, najvjerovatnije je upravo on taj koji je istaknut Rezultati pretrage. Možete provjeriti njegov prikaz nakon što je stranica indeksirana.
Zašto su potrebni podnaslovi h2-h6?
Oznake od h2 do h6 nalaze se u tijelu samog članka, strukturno ga dijeleći na tematske pasuse, te u kodu HTML dokumenta, ističući ga značajnih elemenata. Oni su takođe identifikovani roboti za pretragu za semantičku analizu stranice.
Potreban za hijerarhijski označavanje svega bitnog i vredi pogledati korisnika na stranici. Ova struktura pomaže osobi da se brzo snalazi u informacijama i procjenjuje njihovu usklađenost s njihovim potrebama.
h2 – fokusira pažnju korisnika i tražilice o glavnom sadržaju članka. Prikazuje najvažnije stvari u tekstu.
h3 je podparagraf za informacije koje idu pod H2, otkrivajući ih još dublje.
h4, h5, h6 – definirani su kao ugniježđeni podnaslovi (detaljno otkrivaju suštinu H2 ili H3) i koriste se u tekstu za isticanje malih tačaka i smislene riječi, kao iu meniju, bočnoj traci i drugim komponentama web dokumenta.
Svi h-tagovi moraju biti duži od 50 znakova.
Kako pravilno napisati podnaslove h2-h6
- Nemoguće je da najmanji podnaslov bude prisutan bez većeg. Odnosno, ako tekst sadrži meta oznaku h4, onda mu moraju prethoditi h2 i h3.
- Što je viši nivo zaglavlja, to bi font trebao biti veći. U WordPress-u su zadane postavke obično postavljene tako da se oznake automatski pravilno formatiraju.
- Svi h-tagovi moraju odgovarati sadržaju sadržaja i odražavati suštinu informacija.
- Neprihvatljivo je koristiti h1-h6 kao sidra ili aktivne veze.
- Ne možete pisati druge oznake unutar h oznake.
- U h-tagovima su dozvoljeni samo tekst i interpunkcija.
- U podnaslovima ne bi trebalo biti neželjene pošte ključne riječi. Najbolje je koristiti ključne riječi u naslovu, h1, h2, a u manjim, kao što su 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 greška. U TOP-u ima dosta stranica na kojima je sadržaj gotovo neprekidna traka, možda podijeljena u paragrafe. Možete zauzeti vodeću poziciju bez "čarolija" preko označavanja teksta, stavljajući veći naglasak na to. WordPress stranice se lako indeksiraju od strane pretraživača. Ali ipak, korištenje ovih oznaka ne samo da olakšava zadatak, već i sadržaj čini lakšim i ugodnijim za vizualnu percepciju.
Kako popuniti h-tagove u WordPress-u
h1 se obično popunjava u polju iznad teksta u postu:
Da biste napravili podnaslove h2-h6, potrebno je istaknuti neophodni element i, držeći kursor iznad kartice "naslovi", odaberite onu koja vam je potrebna klikom na nju. Uradite isto za svaki od podnaslova, uključujući ih u željenom formatu.
Postoji još jednostavniji način - možete ukucati tekst u Word koristeći potrebne oznake i jednostavno kopirajte i zalijepite članak u WordPress editor. Istaknuto u Naslovi riječiće se automatski pojaviti u prave veličine. Ako je potrebno, možete ih ispraviti koristeći WordPress CMS editor alate.
Pustili smo nova knjiga“Marketing sadržaja na društvenim mrežama: kako ući u glave svojih pratilaca i natjerati ih da se zaljube u vaš brend.”
Zaglavlje web stranice je gornji dio site, 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
Šta je zaglavlje web stranice na primjeru našeg života? Na primjer, na glavi graditelja vidimo kacigu, a na glavi kuhara vidimo bijelu kapu. Glava mladenke je ukrašena velom, a muslimanka je pokrivena hedžabom. Vidimo krunu na kraljevoj glavi. Kažu da pokrivalo za glavu utiče na ponašanje i po njemu često možemo tačno odrediti kakva osoba stoji ispred nas.
Zaglavlje stranice nalazi se na svakoj od njegovih stranica i 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 stranica.
Šta treba pisati u zaglavlju stranice
Baš kao i za posjetitelje, također i za tražilice, vaša web stranica počinje zaglavljem. Dakle, u zaglavlju se nalaze:
- naziv kompanije (ili web stranice);
- kontakti;
- ostalo važnih elemenata: slogan, radno vrijeme, Kratki opis aktivnosti itd.;
- top horizontalni meni- ovo je ono što bi trebalo da završi zaglavlje.
Imajte na umu da su elementi zaglavlja koji moraju biti prisutni na svakoj stranici ime i kontakti.
Ne zaboravite na prezentacijsku ulogu zaglavlja, tako da njegov dizajn treba privući pažnju, ali ne smije odvlačiti posjetitelja od pretraživanja potrebne informacije. Loše zaglavlje može odbiti posjetitelje i oni će otići na drugu stranicu koja može imati lošiji sadržaj od vašeg.
Zašto je važno postaviti kontakte u zaglavlje?
Pretraživač svakoj web lokaciji 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" na kojoj možete odrediti dodatne regije.
Zaglavlje web stranice i HTML pravila
Za uspješna promocija stranica mora primijeniti nekoliko pravila kada razvija zaglavlje.
- Ime i kontakti nikada ne bi trebali biti prikazani kao slika. Samo tekst koji pretraživač može razumjeti.
- Imati H1 zaglavlje koje je isto na svim stranicama vaše stranice ometaće promociju resursa.
- Nemojte koristiti teške slike, blic ili puno grafike. Ovo otežava učitavanje stranice i nervira mnoge korisnike.
- Nemojte ugrađivati horizontalni meni u Flash, nemojte prikazivati meni u obliku slika. Koristite samo tekst. U suprotnom, ako trebate promijeniti stavke menija, možete naići na određene poteškoće.
- Kreirajte HTML zaglavlja. Dolje zaglavlja koja se u potpunosti sastoje od slika ili flash animacija! Zašto otežavati svoj 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 informacionih resursa Logično je napraviti nisko zaglavlje (100-200 piksela). Za odredišne stranice i prezentacijske vizitkarte, veličina zaglavlja može biti nešto veća.
Kako kreirati pravo zaglavlje
Ako imate gotov brend book, tada bi sve stranice web-mjesta, uključujući zaglavlje, trebale biti dizajnirane u skladu s njim. Važan zadatak web dizajnera je ostvariti uniformni stil između zaglavlja, polja sadržaja i podnožja stranice.
Dajte prednost pozitivnim slikama: ljudi sa osmjesima na licima, lijepa djevojka, priroda. Da biste stvorili ozbiljnu atmosferu, koristite bezlične slike sa prigušenim sema boja, uvijek sa logom.
Recimo da nam treba zaglavlje za web stranicu za pranje rublja. Odaberite fotografiju veš mašina(treba odmah pokazati posjetitelju na koju stranicu je došao i šta 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 jedinstvena, ili barem jedinstvena upotreba grafički editor. Možete kreirati logotip, na primjer, shematski bubanj za pranje i val unutar njega. Pored logotipa označavamo naziv.
Sajt se pozdravlja svojim zaglavljem, jedinstven je poslovna kartica. Stoga, kada razvijate web stranicu, obratite maksimalnu pažnju na zaglavlje!
Često, naizgled jednostavni zadaci izgleda zahtijevaju složenu HTML strukturu 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 se logo nalazi na lijevoj strani, a stavke menija na desnoj strani. Možete koristiti float i position:apsolute, a za vertikalno poravnanje možete dodati marginu i padding različitih elemenata. Čini se da nije ništa komplikovano. Ali ako bi stranica trebala biti ispravno prikazana na mobilnih uređaja, javljaju se mnogi problemi.
Ispod je sažet način rješavanja ovog problema.
HTML oznaka je što je moguće jednostavnija:
Super Bad
Visina zaglavlja je fiksna, dodajte text-align: justify, za podređene elemente:
Zaglavlje (poravnanje teksta: justify; razmak između slova: 1px; visina: 8em; padding: 2em 10%; pozadina: #2c3e50; boja: #fff; )
Dodati prikaz: inline-block za sve elemente nav tako da ih možete poredati jednu za drugom:
Zaglavlje h1, navigacija zaglavlja (prikaz: inline-block; )
Za atribuciju text-align: justify radili onako kako želimo, moramo upotrijebiti mali trik s pseudo-elementima, koji je pronađen u članku Savršeno opravdana CSS grid tehnika korištenjem inline-block-a, autora Jelmera de Maata:
Header::after (sadržaj: ""; prikaz: inline-block; širina: 100%; )
Rezultat je bilo horizontalno poravnanje, bez korištenja float I pozicija:apsolutna. Sada morate poravnati elemente okomito. Koristeći vertikalno poravnanje za elemente nav postojaće zavisnost od visine roditeljskog bloka - zaglavlja. A ovo nije baš tačno. Primjeri korištenja vertical-align: top i vertical-align: middle na jsbin. Ispod je možda najviše zgodan način vertikalno poravnanje.
Koristimo ponovo pseudo elemente. koristeći primjer iz članka Centring in the Unknown, koji spominje Michał Czernow:
Zaglavlje h1 (visina: 100%; ) zaglavlje h1::before (sadržaj: ""; prikaz: inline-block; vertikalno poravnanje: sredina; visina: 100%; )
Rezultat je ono što vam treba:
Preostala su dva problema za rješavanje: ispravan prikaz at velike količine tekst u zaglavlju i prilagodljivost. Ako je naslov stranice predugačak, izgled će početi kliziti:
Koristeći trik s pseudoelementima header:
CSS kod
zaglavlje (poravnanje teksta: justify; visina: 15em; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje > div, zaglavlje nav, zaglavlje div h1 (prikaz: inline-blok; okomito poravnanje: sredina; ) zaglavlje > div (širina: 50%; visina: 100%; poravnanje teksta: lijevo; ) zaglavlje > div: :before (sadržaj: ""; prikaz: inline-block; vertikalno poravnanje: sredina; visina: 100%; )
Izgleda mnogo bolje:
Sada pređimo na prilagodljivost. Postoji nekoliko načina za rješavanje ovog problema; jednostavno ne možete postaviti visinu zaglavlja, a svi unutrašnji elementi će biti prilagodljivi visini. Ovo neće zahtijevati drugi trik sa pseudo-elementima, živi primjer na jsbin-u.
CSS kod
zaglavlje ( text-align: justify; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje h1, navigacija zaglavlja (prikaz: umetnuti blok; vertikalno poravnanje: sredina; ) zaglavlje h1 (širina: 50%; poravnanje teksta: lijevo; padding-top: 0,5em; ) navigacija zaglavlja ( padding-top: 1em; )
Ako trebate postaviti visinu zaglavlja, morat ćete upotrijebiti drugi trik s pseudoelementima i dodati medijski upit za ekrane različite veličine:
@media ekran i (max-width: 820px)( header (visina: auto; ) header > div, header >
Rezultat je prilagodljiv i izgleda ovako na mobilnim uređajima:
U primjeru, 820px se koristi radi jasnoće; na živoj stranici 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; ) tijelo ( pozadina: #1abc9c; font-family: "Lato", sans-serif; text-transform: velika slova; razmak između slova: 1px;) zaglavlje ( text-align: justify ; visina: 8em; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after (sadržaj: ""; prikaz: inline-block; širina: 100%; ) header > div, header > div::pre, 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; ) nav zaglavlja a: posljednji -dijete ( padding-desno: 0; ) @medijski ekran i (maks. širina: 720px)( zaglavlje (visina: auto; ) zaglavlje > div, zaglavlje > div h1, zaglavlje nav (visina: auto; širina: auto; prikaz : blok; poravnanje teksta: centar; ) )
rezultat:
Kao što znamo, ne postoji druga prilika da se ostavi prvi utisak. Na terenu digitalni dizajn ova istina je pojačana visoka konkurencija i širok izbor dostupnih rješenja. Štaviše, sasvim je očito da su pri stvaranju prvog utiska 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 sa uxplaneta, puno hvala autorima na tome.
Šta je zaglavlje web stranice?
U klasičnom rasporedu, blok zaglavlja se nalazi na samom vrhu. Ovo je ono što ljudi prvo vide kada dođu na vaš projekat. 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 bi također trebao biti privlačan, koncizan i koristan. Ovdje se nalaze ključni elementi navigacija.
Snimak ekrana pokazuje Početna stranica Internet prodavnica stripova: na vrhu zaglavlja sajta naći ćete logo, glavni meni, kao i ikone za korpe i pretragu.
Šta je uključeno u zaglavlje stranice?
Ovaj blok može uključivati različite objekte:
- karakteristike brenda: logo, ime, naziv brenda, slogan, maskota, fotografija kompanije ili njenog lidera, itd.;
- informacije o proizvodu ili usluzi koja se predstavlja;
- veze do važnih elemenata sadržaja ();
- linkovi na profile društvenih mreža;
- kontakti (telefon, Email i sl.);
- prebacivanje jezika s višejezičnim sučeljem;
- blok pretraživanja;
- polje za pretplatu;
- veze do proizvoda: preuzimanje demo verzije, adresa u AppStore-u, itd.
Ne moraju se koristiti sve gore navedene tačke. Uvjerite se da dizajn zaglavlja za web lokaciju nije preopterećen nepotrebne informacije, što sprečava posetioce da se fokusiraju na glavne aspekte.
Ispod su primjeri postavljanja takvih elemenata:
Bjorn web stranica (projekat studija za dizajn interijera)
Na vrhu izgleda nalazi se fiksno (ljepljivo) zaglavlje na stranici, koje omogućava da ostane stalno vidljivo dok skrolujete. Na lijevoj strani se nalazi logo brenda, a desno su linkovi “Proizvodi”, “Studio”, “Novosti” + ikona “Prodavnica”. Centralni prazan prostor vizuelno razdvaja dva bloka.
Ovdje zaglavlje stranice ima drugačiji pristup: logo i brend su u sredini, a lijevo i Desna strana svaka ima dvije veze koje korisnicima omogućavaju da brzo pređu na sekcije koje su im potrebne.
Zašto je zaglavlje važno za web stranicu?
To je zbog brojnih razloga. Prvo, kada ljudi posjete određeni web resurs (posebno prvi put), ne gledaju pažljivo i detaljno cijelu stranicu, već je brzo prelistavaju tražeći nešto što će privući pažnju i uvjeriti ih da ostanu. Različiti eksperimenti su pokazali prisustvo tipični modeli pokreti očiju korisnika. Spominju se tri glavne opcije:
Prva šema je tipična za stranice sa ujednačenom prezentacijom informacija i slabom vizuelnom hijerarhijom. Razlikuje č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 čitaoca idu iz gornjeg lijevog ugla u isto desno, gledajući prvo ovo zaglavlje.
Često korisnici demonstriraju sljedeći pristup:
- U početku se oko pomiče vodoravno, obično duž vrha - prve pruge modela u obliku slova F.
- Pogled posjetitelja se tada pomiče niže i stranica se opet "skenira" horizontalno, ali pokriva više kratko područje nego u prvom pokretu. Ovo je dodatni element F-šeme.
- Konačno, oko se pomiče na lijevu stranu ekrana, koja se gleda okomito. Ponekad ovaj proces prilično sporo i sistematično, što se pojavljuje kao čvrsta traka na toplotnoj karti kretanja očiju. U drugim slučajevima, pogled se kreće brže. Ovo posljednji element, stvarajući korijen slova F.
Sve tri opcije pokazuju da gledanje počinje u gornjoj horizontalnoj oblasti. Dakle, zaglavlje stranice 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 toliko važan za stručnjake za promociju sadržaja i proizvoda.
Kao što Bogdan Sandu ističe u članku, „sajt mora odmah da upadne u oči, inače će biti samo veliki promašaj.“
Uprkos svemu važne napomene iz članka, treba napomenuti da nije potreban svaki web resurs ovaj element. U mnogim kreativnim dizajnima, zaglavlje i njegove funkcije su povezane s drugim područjima izgleda.
Dizajn zaglavlja web stranice
Čitljivost i vizuelna hijerarhija
Ova stavka se reprodukuje važnu ulogu, tako da vam je potreban pažljiv pristup zaglavlju i njegovoj boji pozadine. Korisnik mora uočiti i uočiti sve informacije što je brže moguće bez napora.
U konceptu trenutnog šablona vesti, videćete meni u zaglavlju sajta sa dva aktivni linkovi u kategoriji publikacija, link ka "uživo" emitovanju i polje za pretragu. Logo je u sredini, kao u jednom od gornjih primjera.
Ovdje koristimo popularni sa izlomljenom apstraktnom mrežom, a zaglavlje stranice ga uspješno nadopunjuje: lijevi dio je vizualno duži, sastoji se od logotipa i tri linka; desni je kraći, sa elementima pretraživanja i pretplate.
Morate imati na umu da kako se korisnik kreće po stranici, zaglavlje stranice može se ponašati drugačije:
- neki programeri koriste "ljepljivi" (fiksni) blok, uvijek vidljiv i aktivan;
- drugi to jednostavno kriju;
- Postoji i opcija kada zaglavlje ne nestane u potpunosti, već se na određeni način skupi na , ostavljajući samo osnovne važne informacije dostupne.
Hamburger meni
Popularno dizajnersko rješenje koje skriva osnovne veze do odjeljaka iza odgovarajućeg gumba. Na blogu smo već raspravljali o ovoj funkciji u članku o i njenim alternativama.
Ovo dugme danas je često punopravni element u zaglavlju sajta, a mnogi korisnici već znaju da se iza njega krije glavni meni. Ovaj pristup oslobađa prostor, čineći raspored minimalističkim i laganim, a istovremeno omogućava više prostora za druge objekte. Osim toga, ovo vam omogućava da kreirate harmonično sučelje za razne vrste uređaja.
Ovdje je prikazana verzija „kompaktnog“ menija u zaglavlju stranice, koji sadrži mnogo veza i održava jednostavan opći stil predloška. Pored njega, u zaglavlju se nalaze i dvije oblasti: s lijeve strane brend i kratke informacije o projektu; Ikona za pretragu se takođe nalazi u desnoj zoni. Centralni dio je ostavljen slobodan, dodajući lakoću i balans cijelom rasporedu.
Ima dosta toga u strukturi stranice na lijevoj strani prazan prostor, a logo i naziv kompanije su u gornji ugao, gdje počinje pokret očiju. Dalje u dizajnu zaglavlja nalaze se veze do glavnih odjeljaka. Ova opcija vam omogućava da sakrijete mnoge veze i organizirate dobru vizualnu hijerarhiju.
I mada ovu odluku je i dalje predmet aktivne debate, i dalje se koristi kao navigacija u zaglavlju stranice. Njegovi protivnici ističu da ovaj blok može zbuniti neiskusne i nove korisnike interneta. Zato je preporučljivo donijeti odluku o uvođenju dugmeta „hamburger“ tek nakon istraživanja ciljne publike.
Fiksno (ljepljivo) zaglavlje web stranice
Ovdje raspored ima fiksni blok na samom vrhu koji se ne sakriva pri skrolovanju. Sadrži naslov, ikonu lupe za pretraživanje i dugme „hamburger“.
Ispod je još jedan primjer kreativnog pristupa efektan dizajn zaglavlja stranice. Kada se prvi put prijavite, možete vidjeti samo njegovu minimalističku implementaciju sa ikonama društvenih mreža i pretraživanjem (bez menija itd.). Ali dok se krećete, formira se fiksna traka s tradicionalnim skupom elemenata.
Dvostruki meni
Navigacija u zaglavlju stranice može se sastojati od dva različiti meniji. U modernim vremenima ovo je standardan potez.
U GIF-u ispod ćete vidjeti "ljepljivo" zaglavlje koje se sastoji od dvije "linije":
- Na vrhu se nalaze linkovi za društveni mediji, dugme za pretragu, skladištenje i meni; u sredini je logo.
- Druga linija se fokusira na glavne dijelove projekta: katalog proizvoda, lokaciju prodajnih mjesta, vijesti i ponude, usluge i kontakte.
Hijerarhija zaglavlja čini sve elemente jasnima i lakim 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 gore govorili.
Ako imate nešto da dodate članku iz svog ličnog radnog iskustva, napišite ispod - zanimljivo je za čitanje. Koja implementacija zaglavlja vam se najviše dopala?
