Vaata kaasaegsete veebisaitide paremat tüpograafiat

Digitaalset teksti saab vormindada nii paljudes maitsetes. Veebifontide ja brauseri skriptide edasiarendamisega oleme näinud arendajatele uue projekti koodi kasutamiseks. Ka veebidisainerid otsivad parimat strateegiat oma veebilehtede koodimiseks ja ühtse tüpograafilise stiili loomiseks kõigi nende lehtede vahel.

Paljud professionaalsed veebidisainerid on sellel teemal kirjutanud, sealhulgas ajakohastatud funktsioonid ja teenused. Sa pead iga veebilehte käsitlema ainsuse dokumendina, mis katkestab teie juure paigutuse. Selle vaatega on lihtne näha, kuidas tüpograafia lehelt-lehele voolab ja pakub ainulaadset väljundi loovusele. Eriti ilmneb see, et ehitate oma lõikudele ja rubriikidele ainulaadseid klassid.

Allpool tutvustan mõnede fantastiliste ideedega veebi ülesehitamisest huvitatud soovivatele tüpograafi disainidele. Blogid, sotsiaalsed võrgustikud ja ettevõtted otsivad alati oma praeguse veebisaidi värskendamist. Ja veebi tüpograafia CSS-stiilid annavad suurepärase võimaluse alustada lehekülgede värskendamist.

Erinevused tänapäeva internetis

Kaasaegne veeb on alates 2000. aasta algusest dramaatiliselt edenenud. Veebidisaineritel on palju uusi funktsioone, et luua fantastilisi graafilise disaini, logode, bännerite ja praktiliselt midagi. HTML5- ja CSS3-spetsifikatsioonide avaldamine on võtnud kasutusele ka vana veebifontide loomise viisi.

Nüüd on täiesti võimalik lisada oma fontid CSS-i @ font-face vara. Võite kasutada mis tahes TrueType(.ttf) või OpenType(.otf) fail ja salvestage koopia kohalikult teie serverisse. Siis lisage mõned CSS3 maagid perekonda kõikjal oma veebilehel!

Ainuüksi selle tehnika abil on võimalik näha, kuidas meie kaasaegne internet on arenenud.

JQuery populaarsuse kasvades iga päev ei ole üllatav, et suudame luua hämmastavaid animatsiooniefekte koos kohandatud fontidega. Alternatiivina ülaltoodud meetodile võimaldab TTQG-i plugin jQuery jaoks lisada mis tahes TrueType-fonti oma veebilehele.

See meetod on mõnevõrra usaldusväärsem, kuna te ei vaja CSS3 standardeid toetavat kaasaegset brauserit, et see toimiks. Loomulikult on päris brauseritel, nagu Internet Explorer 6, korralikult esile kerkida.

Kuid tänan headust, et enamik kasutajaid on üle läinud uuematele sirvimisprogrammidele, mis neid standardeid toetavad! Ja kui veebi arendate, peaksite kaaluma täpselt, kellele teie turg on mõeldud. Teil ei ole alati võimalik kõigile meeldida, kuid võite kindlasti proovida saada piisavalt lähedale.

Digitaalse tüpograafia eesmärk

Omapärane mõte, mida kaaluda, aga mis on digitaalse teksti tegelik eesmärk? Teabe edastamine, allikate jagamine ja arvamuse pakkumine internetikasutajate maailmale. Tekst on mõtete ja ideede jagamise kõige lihtsam vorm. Kuid see on ka väga keeruline ja sisaldab suuri üksikasju, mida fotod / videod lihtsalt ei kasuta.

Teie külastajad leiavad tõenäoliselt teie veebisaidi teie teksti või rubriikide märksõnade alusel - lihtsalt üks põhjus, miks pöörata oma veebikoopiat hoolikalt. Ja kui olete oma veebisaidile tähelepanu pööranud, peate oma kontsentratsiooni hoidma. Seda on kõige lihtsam teha rasvaste pealkirjadega ja ühtlase vahega lehekülje tekstiga.

Kui kirjutate artiklit või juhendit, peate kasutama selget keelt. See on sama oluline kui teie lehekülje teksti välimus ja sisu kvaliteet. Mida suurem on teie tekst, seda lihtsam on märksõnade lugemine ja otsimine. Ja kuna punktid sisaldavad enamikku teie sisust, siis peaksite kulutama palju aega prototüüpide leidmiseks õigeks sobivuseks. Lõikeid kasutatakse sõnumi edastamiseks lausekohtade kaupa. Mõista, kuidas te kirjute ja ette planeerite, et saada sobiva lehekülje paigutus.

Lisaks lehekülje tekstile tuleb meedia ja sekundaarne sisu. Kui teie lõigud sisaldavad esmast teavet, siis võib-olla on teil graafikuid või kujundeid, et lehekülge vürtsida. Need aktsendid on just õige puudutus, mis hoiab kasutajaid teie saidi kaudu liikumisel.

Videod ja pildid võivad teie sisu lõhkuda ja tunduda, et lugejad liiguvad teie artikli kaudu kiiremini. Kuid kasutage neid esemeid säästlikult ja ärge laske midagi tuua oma põhisõnumit. Kasutajad tulevad (enamasti) teie saidile teabe saamiseks ja ei taha liiga palju tähelepanu kõrvale juhtida.

Kõiki teisi vormindamisvalikuid kasutatakse funktsiooni või eesmärgi määramiseks. Näiteks hüperlingi tekst on teistest erinevatest värvidest erinev, et see silma paista “klõpsatav”. Te võite töötada rasvaste või kaldkirjas sõnadega, lisades rõhu oma lausetele. Blokootide või eelnevalt vormindatud teksti kasutamine võib aidata piiritleda põhilisi avaldusi või veebikoode.

Veebilehtede päised

Üks teie veebi tüpograafia kõige olulisemaid varasid on rubriikide sildid. Kui te ei tunne HTML-pealkirjade ulatust

kuni

viimane on kõige tähtsam ja viimane kõige vähem. See märgistus on kasulik mõista, kuna Google järjestab teie domeeni ja veebilehtede sisu ka sisustruktuuri alusel. Seega on teil lõplik kontroll selle üle, milliseid märksõnu te kasutate ja milliseid rubriike te vajate.

Kuigi standardne HTML5-spetsifikatsioon sisaldab kuni 6 erinevat pealkirjastiili, soovitaksin kasutada vahemikku 3-4. Neid kõiki ei ole vaja oma lehtedesse lisada. Ja see on ka väga ebatõenäoline, et leiad kasutamise 6 erineva rubriigi jaoks. Kui esimest korda istudes oma stiili üles ehitada, proovige koostada mõned näited rubriikide kohta, et näha, mida soovite.

Photoshop on selle stsenaariumi jaoks suurepärane. Samuti võite proovida HTML-i eri rubriikide kodeerimist, et näha, kuidas nad brauseris näevad. Oluline on töötada oma lehe voolu ja kujunduse pealkirjadega vastavalt nende auastmele.

Näiteks teie

Sildid peaksid olema teie lehe pealkirjade hulgas kõige rohkem.

ja

on kõige populaarsemad sildid ja Google soovitas lehekülje sisu indekseerida. Disainiefektide, näiteks rasvases kirjas, allajoonitud, kriipsutatud piiride või erinevate värvide kasutamine aitab teie pealkirjadel lehelt välja minna.

Samuti on oluline vahekaugus kui tegemist on pealkirjadega või mis tahes sisuga selles küsimuses. Veenduge, et lisate oma pealkirjade ja põhisisu valdkonna vahel lisamarginaale. Kui olete oma fondi piisavalt suureks teinud, peaks iga pealkiri silma paistma, kui see on oma põhiplokk. See väljanägemine on ideaalne, kui tahate selge sõnumiga haarata oma lugejate tähelepanu.

Unikaalsete hüperlinkide loomine

Lehekülje lingite teemal on palju öelda. Nii või teisiti peate oma koodis kasutama hüperlinke. Need on äärmiselt olulised teie saidi erinevate lehekülgede vahelise peamise navigeerimisliidese kujul. Võite hiljem linkida ka teiste blogide või isegi teie arhiveeritud blogi postituste jaoks.

Sa peaksid oma linki hoidmise teksti väga hoolikalt valima. See on spetsiifiline sisu, mida rõhutab lingi stiil. Näiteks "kliki siia" on väga populaarne ja seda kasutatakse enamasti enamasti otseste allalaadimiste jaoks. Püüdke vältida seda süstemaatilist lähenemist ja saada oma hüperlingi tekstiga natuke loominguline. Teie külastajad klõpsavad lingil palju tõenäolisemalt, kui nad saavad ka konteksti ära tunda ja võib-olla arvavad, mida uus lehekülg sisaldab.

Kui soovid oma linke kujundada, peaksite kaaluma järgmist - kuidas muudatused teie lehe seadistustes näevad, millist taustavärvi te töötate, ja milline värv on kontrasti tekst?

Lingid peaksid ilmuma leheküljelt klõpsamiskõlblikeks teemadeks - lõppude lõpuks on see nende ülesanne. Sellepärast töötab vana sinine, millel on allajoonitud tekstiefekt, nii hästi. Aga kui leiate, et alternatiivne värv töötab paremini, peaksite seda proovima. Linkide projekteerimiseks pole ühtegi sobivat lahendust. Lihtsalt sirvige natuke veebi ja saate kindlasti kokku panna midagi silmapaistvat.

Üks huvipunkt on mõned funktsioonid, mida peaksite proovima vältida. Sellised asjad nagu tekstifondi perekonna või fondi suuruse muutmine võivad olla väga tüütu. See põhjustab teksti moonutamise ja liigutamise, mis võib viia hiirekursori linkvööndist välja. Samamoodi peaksite vältima lisamarginaalide lisamist oma linkidele või hoverefektidele. Need tööd teevad palju lihtsamaks, kui jääte lihtsaks. Värvimuutus või lisatud alamjooned on kasutaja kogemuses väga kaugel.

Stiliseeritud nimekirjade koostamine

Võimalik on hea, et sa pead mingil hetkel ka nimekirjadega töötama. Lisatud on nii tellitud kui ka järjestamata nimekirjad HTML-is. Need sobivad ideaalselt väikeste ideede, toodete, inimeste või linkide kogumiseks väga väheses ruumis. Styling ei ole ka see, mis erineb lõigetest või pealkirjadest.

Teie külastajad peaksid kohe aru saama, et nad vaatavad üksuste nimekirja. Hoidke iga kirje üksus eraldi ja asub uuel real teie lehel. Võimaluse korral lisage nende vahel lisaruumi. See annab mõnele hingamisruumile ja ilmub artikli teksti jaoks kena purunemisena. Kui soovite, võite isegi kirjas või taandes julgelt loetleda natuke, et eemal tavalistest paigutusvarudest.

Täiendavate funktsioonide lisamine, et aidata teie nimekirjal välja paista, ei ole nõue. Aga kui sulle meeldib plokkide paigutuse stiil, siis keskendub see teie nimekirjadele. Sa võid proovida lisada heledat tausta või ikoone. Nimekirjas on suur kirjutamisnimekiri, mis sisaldab minu arvates mõningaid väga võimsaid teadmisi. Aga kui te hoiate lehekülje sisu lineaarsena ja kasutate loendiplokke ainult siis, kui see on vajalik, ei tohiks te mingeid disainilahenduste tagasilööke juhtida.

Kuidas luua lehes olevaid hinnapakkumisi

Tsitaatide ja tsitaatide ilmumine on nendel päevadel väga piiratud. Varases veebis ei näe te neid elemente väga palju. Võib-olla toimetustes, essees või õppetöös. Kuid HTML5 on kindlasti reegleid natuke ajakohastanud, mis muudab blokeerimiste mainimise palju lihtsamaks.

HTML5 arsti veebilehel on huvitav ressurss selle täpse teema arutamiseks. Nad räägivad blokkvootides sisalduva sisu kasutamisest dokumendistruktuuri sisemiselt. Nii võite lisada ka pealkirjad, lõiked ja isegi nimekirjad ja jalused. Peamine kasutamine a