Pogled v boljšo tipografijo za sodobne spletne strani

Digitalno besedilo se lahko oblikuje v toliko različnih okusov. Z nadaljnjim napredovanjem spletnih pisav in skriptov brskalnikov smo videli novo kodo projekta, ki jo bodo razvijalci uporabljali. Tudi spletni oblikovalci iščejo najboljšo strategijo za kodiranje svojih spletnih strani in vzpostavitev enotnega tipografskega sloga med vsemi njihovimi stranmi.

Veliko strokovnih spletnih oblikovalcev je napisalo o temi, vključno s posodobljenimi funkcijami in storitvami. Vsako spletno stran morate obravnavati kot edinstven dokument, ki odpravlja vaš načrt korenske postavitve. V tem pogledu je enostavno videti, kako lahko tipografija teče od strani do strani in ponuja edinstveno izhodišče za ustvarjalnost. In to postane še posebej očitno gradnja edinstvenih razredov za vaše odstavke in naslove.

Spodaj bom spoznal nekaj fantastičnih idej za ambiciozne oblikovalce tipografije, ki jih zanima gradnja za splet. Spletni dnevniki, socialna omrežja in podjetja si vedno želijo posodobiti svojo trenutno spletno stran. CSS slogi za spletno tipografijo so odličen vir za začetek osveževanja strani.

Razlike v današnjem internetu

Sodobni splet je od začetka leta 2000 dramatično napredoval. Obstaja veliko novih funkcij za spletne oblikovalce, ki ustvarjajo fantastična dela grafičnega oblikovanja, logotipov, transparentov in praktično karkoli drugega. Objava specifikacij HTML5 in CSS3 je prav tako vplivala na stari način gradnje spletnih pisav.

Zdaj je popolnoma mogoče vključiti svoje lastne pisave v CSS @ font-face nepremičnine. Uporabite lahko katerokoli TrueType(.ttf) ali OpenType(.otf) datoteko shranite lokalno na strežnik. Potem z nekaj magije CSS3 družino vključite kjerkoli na vaši spletni strani!

Samo s to tehniko je mogoče videti, kako razvit naš sodoben internet.

Z naraščajočo priljubljenostjo jQuery vsak dan pa ni presenetljivo, da lahko ustvarimo osupljive animacijske učinke skupaj s pisavami po meri. Kot alternativa metodi nad vtičnikom TTFGen za jQuery lahko na svojo spletno stran vključite pisavo TrueType.

Ta metoda je nekoliko zanesljivejša, saj ne potrebujete sodobnega brskalnika, ki bi podpiral CSS3 standarde, da bi deloval. Seveda se bodo starejši brskalniki, kot je Internet Explorer 6, borili za pravilno upodabljanje.

Toda hvala bogu, da je večina uporabnikov prešla na novejšo programsko opremo za brskanje, ki podpira te standarde! In ko se razvijate za splet, morate natančno razmisliti, za koga je trg. Ne morete ves čas veseti vsem, toda prepričani ste, da se boste poskušali dovolj približati.

Namen digitalne tipografije

Nekakšna nenavadna ideja, vendar kaj je pravi namen digitalnega besedila? Prenos informacij, izmenjava virov in posredovanje mnenja svetu uporabnikov interneta. Besedilo je najbolj poenostavljena oblika medijev za izmenjavo misli in idej. Vendar je tudi zelo zapleten in vsebuje glavne podrobnosti, ki jih fotografije / videoposnetki ne morejo uporabiti.

Vaši obiskovalci bodo verjetno našli vašo spletno stran na podlagi ključnih besed v vašem besedilu ali naslovih - le še en razlog, da skrbno pazite na svojo spletno kopijo. In ko ste pridobili nekaj pozornosti na vašo spletno stran, morate zadržati njihovo koncentracijo. To je najlažje narediti s krepkimi naslovi in ​​besedilom strani z enakim razmikom.

Če pišete članek ali vadnico, morate uporabljati jasen jezik. To je enako pomembno, kako izgleda besedilo strani in kakovost vaše vsebine. Večje je vaše besedilo, lažje boste brali in iskali ključne besede. In ker bodo odstavki vsebovali večino vaše vsebine, bi morali porabiti veliko časa za izdelavo prototipov za pravilno prileganje. Odstavki se uporabljajo za posredovanje vašega sporočila v delih velikih velikosti, razdeljenih v stavke. Razumite, kako napišete in načrtujete, da boste dobili primerno postavitev strani.

Poleg besedila strani je tudi medij in sekundarna vsebina. Če vaši odstavki vsebujejo primarne informacije, morda imate grafe ali posnetke, ki bi začinili stran. Ti poudarki so samo pravi dotik, s katerim se uporabniki premikajo po vašem spletnem mestu.

Videoposnetki in slike lahko razdelijo vašo vsebino in se zdi, da se bralci hitreje premikajo skozi vaš članek. Toda te predmete uporabljajte zmerno in ne dovolite, da bi karkoli preseglo vaše osrednje sporočilo. Uporabniki (večinoma) prihajajo na vaše spletno mesto za informacije in ne želijo preveč motenj.

Vse druge možnosti oblikovanja se uporabljajo za določanje funkcionalnosti ali namena. Besedilo hiperpovezave je na primer pogosto drugačna barva kot ostale “klikni”. Delate lahko s krepkimi ali poševnimi besedami, ki poudarjajo svoje stavke. Uporaba blokquotes ali predformatiranega besedila lahko pomaga določiti temeljne izjave oziroma spletno kodo.

Glave spletne strani

Ena od najpomembnejših sredstev za vašo spletno tipografijo so oznake naslovov. Če ne poznate HTML naslovov, se raztezate od

do

pri čemer je nekdanji gospodarski subjekt najbolj pomemben in nazadnje najmanj. Ta oznaka je uporabna za razumevanje, saj Google tudi uvršča vašo domeno in spletne strani na podlagi strukture vsebine. Tako boste končno imeli nadzor nad tem, katere ključne besede uporabljate in kakšne vrste naslovov boste potrebovali.

Čeprav standardna specifikacija HTML5 vključuje do 6 različnih slogov naslovov, priporočam uporabo med 3-4. Ni nujno, da jih vključite v svoje strani. Prav tako je zelo malo verjetno, da boste našli uporabo za 6 različnih naslovov. Ko prvič sedite za gradnjo vaših stilov, poskusite pripraviti nekaj primerov za naslove, da vidite, kaj vam je všeč.

Photoshop je odličen za ta scenarij. Poskusite lahko tudi kodiranje različnih naslovov v HTML, da vidite, kako izgledajo v brskalniku. Pomembno je, da delate s stranskimi tokovi strani in oblikovanjem naslovov glede na njihov položaj.

Na primer, vaš

med vsemi vašimi naslovnimi stranmi naj bi izstopale oznake.

in

so najbolj priljubljene oznake in jih Google priporoča za pajkanje vsebine strani. Z učinki oblikovanja, kot so krepka pisava, podčrtane črte, črtkane meje ali različne barve, bodo vaši naslovi padli s strani.

Pomemben je tudi razmik ko gre za naslove ali kateri koli del vaše vsebine. Poskrbite, da boste dodali dodatne robove med glavami in glavnim področjem vsebine. Če ste pisavo naredili dovolj veliko, mora biti vsaka postavka izstopala kot lastna jedro. Ta videz je idealen, če želite, da vaše bralce opozorite z jasnim sporočilom.

Izdelava unikatnih hiperpovezav

Obstaja veliko besed na temo povezave strani. Tako ali drugače boste morali v svoji kodi uporabljati hiperpovezave. So izjemno pomembni kot glavni navigacijski vmesnik med različnimi stranmi vašega spletnega mesta. Lahko tudi povezavo do drugih blogih ali celo vaše arhivirane objave bloga za referenco na kasnejši datum.

Zelo skrbno izberite besedilo za vašo povezavo. To je posebna vsebina, ki bo poudarjena s stilom povezave. Na primer "kliknite tukaj" je zelo priljubljen in se uporablja za neposredne prenose večino časa. Poskusite se izogniti temu sistematičnemu pristopu in namesto tega dobite malo ustvarjalnosti s svojim besedilom hiperpovezave. Vaši obiskovalci imajo veliko več možnosti, da kliknejo povezavo, če lahko prepoznajo kontekst in morda ugotovijo, kaj bo nova stran vsebovala.

Ko greš slog svoje povezave, morate upoštevati naslednje - kako se bodo spreminjale spremembe v nastavitvi strani, kakšne barve ozadja delate, in kakšna je barva besedila za kontrast?

Povezave bi morale očitno izstopati s strani kot elementi, ki jih lahko kliknete - navsezadnje je to njihova funkcija. Zato staro modro z učinkom podčrtanega besedila deluje tako dobro. Ampak, če ugotovite, da drugačna barva deluje bolje, jo morate preizkusiti. Za modele povezav ni rešitve, ki bi ustrezala vsem. Malo brskajte po spletu in zagotovo boste sestavili nekaj izjemnih.

Ena od zanimivosti je nekaj funkcij, ki bi jih morali poskusiti izogibanje. Stvari, kot je spreminjanje družine pisave ali velikosti pisave, so lahko zelo moteče. To bo povzročilo popačenje in premikanje besedila, kar lahko postavi kazalec miške izven območja povezave. Na podoben način se izogibajte dodajanju dodatnih robov / paddingov vašim povezavam ali hover efektom. Ti delujejo veliko bolje, ko ostanete preprosti. Sprememba barve ali dodano podčrtanje je v uporabniški izkušnji daleč.

Izdelava oblikovanih seznamov

Možnosti so dobre, saj boste morali delati tudi s seznami. Vključeni so tako urejeni kot neurejeni seznami v HTML-ju. Te so kot nalašč za majhno zbirko idej, izdelkov, ljudi ali spletnih povezav v zelo majhnem prostoru. Styling se ne razlikuje vse od odstavkov ali naslovov.

Vaši obiskovalci morajo takoj razumeti, da iščejo seznam postavk. Vsak element seznama naj bo ločen in se nahaja na novi vrstici na strani. Če je mogoče, dodajte nekaj dodatnega prostora med njimi. To bo dalo nekaj prostora za dihanje in se bo prikazalo kot lep razkorak za besedilo članka. Če želite, lahko celo pisavo ali vtisnjene sezname nekoliko poudarite, da bi se izognili standardnim robnim postavitvam.

Dodajanje dodatnih funkcij, ki vam pomagajo izstopati iz seznama, ni nujno. Če pa uživate v slogu postavitve blokov, se resnično osredotočite na vaše sezname. Lahko poskusite dodati svetlo ozadje ali ikone. A list Apart ima veliko pisanje o krojenju seznamov, ki mislim, da vključuje nekaj zelo močnih delčkov znanja. Če pa vsebino strani ohranjate linearno in uporabljate seznamske bloke samo, ko je to potrebno, ne smete naleteti na kakršne koli pomanjkljivosti oblikovanja.

Kako ustvariti citate na strani

Pojav citatov in citatov je v teh dneh zelo omejen. V zgodnji spletni strani ne boste videli veliko teh elementov v uporabi. Morda v uvodnikih, esejih ali izobraževalnih dokumentih. Toda HTML5 je vsekakor posodobil pravila, zaradi česar je citiranje blokov veliko lažje.

Spletna stran HTML5 Doctor vsebuje zanimiv vir za razpravo o tej temi. Obravnavajo uporabo vsebine znotraj blokovnih citatov, ki se pojavljajo znotraj strukture dokumenta. Torej lahko vključite tudi naslove, odstavke in celo sezname in noge. Glavna uporaba a