A modern weboldalak jobb tipográfiai megjelenése

A digitális szöveg oly sok ízben formázható. A webes betűtípusok és böngésző-szkriptek továbbfejlesztésével láthattuk, hogy a fejlesztők számára új projektkód használható. A webes tervezők is keresik a legjobb stratégiát honlapjaik kódolására és egységes tipográfiai stílus létrehozására az összes oldaluk között.

Rengeteg professzionális webes tervező írt a témáról, beleértve a frissített szolgáltatásokat és szolgáltatásokat. Minden egyes weboldalt egyedülálló dokumentumnak kell tekintenie, amely megszakítja a root elrendezését. Ebben a nézetben könnyű látni, hogy a tipográfia hogyan tud áramlani az oldalról oldalra, és egyedülálló kimenetet kínál a kreativitás számára. Különösen nyilvánvalóvá válik, hogy egyedülálló osztályokat építsenek a bekezdések és fejlécek számára.

Az alábbiakban néhány fantasztikus ötletet fogok megragadni a webes építés iránt érdeklődő törekvő tipográfiai tervezők számára. A blogok, a szociális hálózatok és a vállalkozások mindig szeretnék frissíteni a jelenlegi weboldalt. A webes tipográfia CSS-stílusai pedig kiváló forrást jelentenek az oldalak frissítéséhez.

Különbségek a mai interneten

A modern web 2000 eleje óta drámai módon fejlődött. A webtervezőknek rengeteg új funkciója van, hogy fantasztikus grafikai tervezés, logók, bannerek, és gyakorlatilag bármi mást hozzon létre. A HTML5 és a CSS3 specifikációk kiadása szintén a régi web-betűkészítés módját vette igénybe.

Most már teljesen lehetséges, hogy saját betűkészleteit is beilleszthesse a CSS-be @ Font-face ingatlan. Bármelyiket használhatja TrueType(.ttf) vagy OpenType(.otf) fájl és tárolja a másolatot helyben a szerveren. Ezután néhány CSS3 varázslat a családot bárhol a weblapján is tartalmazza!

Ez a technika önmagában lehetővé teszi, hogy megismerjük, hogyan fejlődött a modern internetünk.

A jQuery-vel egyre népszerűbbé válik minden nap, nem meglepő, hogy az egyedi betűtípusokkal párosulva megdöbbentő animációs hatásokat tudunk kialakítani. A TTFGen plugin a jQuery-hez hasonlóan a TrueType betűkészlet tetszőleges webhelyére is kiterjeszthető.

Ez a módszer egy kicsit megbízhatóbb, mivel nem szükséges egy modern böngésző, amely támogatja a CSS3 szabványokat, hogy működjön. Természetesen az örökölt böngészők, mint például az Internet Explorer 6 küzdenek rendesen.

De köszönöm a jóságnak, hogy a legtöbb felhasználó átvált az újabb böngészőszoftverre, amely támogatja ezeket a szabványokat! És amikor a weben dolgozol, pontosan meg kell fontolnia, hogy ki a piacod. Nem lehet mindenkit kedvelni, de biztos lehet benne, hogy elég közel van.

A digitális tipográfia célja

Furcsa ötlet, amit figyelembe kell venni, de mi a digitális szöveg valódi célja? Információk továbbítása, források megosztása és véleményed megadása az internethasználók világában. A szöveg a gondolatok és ötletek megosztásának legegyszerűbb formája. De ez is nagyon bonyolult és nagy részleteket tartalmaz, amelyeket a fotók / videók nem használhatnak.

Az Ön látogatói valószínűleg megtalálják a webhelyét a szövegben vagy a címsorokban szereplő kulcsszavak alapján - csak egy másik ok arra, hogy a webes példányra figyeljen. És ha már elnyerte a figyelmet a webhelyére, meg kell tartania a koncentrációjukat. Ez a legegyszerűbben merész fejlécekkel és egyenletesen elhelyezett oldalszövegekkel történik.

Ha egy cikket vagy bemutatót ír, akkor tiszta nyelvet kell használnia. ez ugyanolyan fontos, hogy az oldalszövege megjelenjen, és milyen tartalmú. Minél nagyobb a szöveg, annál könnyebb lesz olvasni és keresni a kulcsszavakat. És mivel a bekezdések tartalmaznak a legtöbb tartalmat, sok időt kell töltenie a megfelelő illeszkedéshez. A bekezdések segítségével az üzenetet bites méretű darabokra bontják, mondatokra bontva. Ismerje meg, hogyan írja és tervezi előre, hogy egy megfelelő oldalelrendezést kapjon.

Az oldalszöveg mellett a média és a másodlagos tartalom is megjelenik. Ha a bekezdések elsődleges információkat tartalmaznak, akkor lehet, hogy grafikonok vagy képek találhatók az oldalon. Ezek az ékezetek csak a megfelelő érintés, hogy a felhasználók a webhelyén keresztül mozogjanak.

A videók és képek képesek lebontani a tartalmát, és úgy tűnik, hogy az olvasók gyorsabban mozognak a cikken keresztül. De használd ezeket az elemeket takarékosan, és ne hagyd, hogy bármi legyőzze az alapvető üzenetedet. A felhasználók (többnyire) tájékoztatást kapnak a webhelyére, és nem akarnak túl sok zavaró tényezőt.

Az összes többi formázási lehetőség a funkció vagy a cél meghatározására szolgál. Például a hiperhivatkozási szöveg gyakran más színű, mint a többi “kattintható”. Dolgozhat félkövér vagy dőlt betűs szavakkal a mondatok hangsúlyozásával. A blokkjegyek vagy az előformázott szöveg használata segíthet az alapvető állítások vagy a webkódok meghatározásában.

A weboldal fejlécei

A webes tipográfia egyik legfontosabb eszköze a címkék. Ha nem ismeri a HTML fejléceket

nak nek

az előbbi a legkevésbé fontosnak tartotta, és utóbbit. Ez a jelölés hasznos annak megértéséhez, hogy a Google a tartalomstruktúrán alapuló domainjét és weblapjait is rangsorolja. Így végső soron ellenőrizheti, hogy mely kulcsszavakat használja, és milyen sorozatokra van szüksége.

Annak ellenére, hogy a szabványos HTML5 specifikáció legfeljebb 6 különböző címsorstílust tartalmaz, azt javaslom, hogy 3-4 között használjunk. Nem szükséges, hogy mindet az oldalakon feltüntesse. És ez nagyon valószínűtlen, hogy 6 különböző címsort használ. Amikor először ült le a stílusok megalkotásához, próbáljon meg néhány példát készíteni a címsorokról, hogy megnézze, mit szeretne.

A Photoshop kiválóan alkalmas erre a forgatókönyvre. Azt is megpróbálhatod kódolni a HTML-címek különböző fejléceit, hogy lássuk, hogyan néznek a böngészőben. Fontos, hogy az oldalfolyamat és a tervezési fejlécek rangsor szerint dolgozzanak.

Például a

a címkéknek a legtöbbet kell az összes oldalfejléc között megosztaniuk.

és

a Google legnépszerűbb címkéi és az oldal tartalmának feltérképezéséhez ajánlott. A tervezési effektusok, például a merész betűtípus, aláhúzás, szaggatott szegélyek vagy különböző színek használata segít, hogy a címek leugorjanak az oldalról.

A távolság is fontos amikor a fejlécekről vagy a tartalom tartalmáról van szó. Győződjön meg róla, hogy további tartalékokat ad meg a címsorok és a fő tartalomterület között. Ha a betűkészletet elég nagyra állította, minden egyes fejlécnek kiemelkednie kell, mint saját magblokkja. Ez a megjelenés ideális, ha világos üzenetben szeretné megragadni az olvasók figyelmét.

Egyedi hiperhivatkozások építése

Rengeteg mondanivaló van az oldal linkek témájában. Így vagy úgy, hiperhivatkozásokat kell használnia a kódjában. Ezek rendkívül fontosak a webhely különböző oldalai közötti fő navigációs felületként. A későbbiekben hivatkozást is kérhet más blogokra vagy az archivált blogbejegyzéseire.

A linket tartalmazó szöveget nagyon óvatosan kell kiválasztania. Ez a konkrét tartalom, amelyet egy linkstílus fog kiemelni. Például a "click here" nagyon népszerű és a legtöbb esetben a közvetlen letöltésekhez használható. Próbálja meg elkerülni ezt a szisztematikus megközelítést, és egy kicsit kreatívabbá tegye a hiperhivatkozás szövegével. A látogatók sokkal nagyobb valószínűséggel kattintanak egy linkre, ha felismerik a kontextust, és talán kitalálják, hogy mit tartalmaz az új oldal.

Ha linkeket tervez, fontolja meg az alábbiakat - hogyan változik meg az oldal beállításai, milyen háttérszínen dolgozik, és milyen szín a kontraszt szövege?

A linkek ragyogóan ki kell tűnniük az oldalról, mint kattintás-képes elemek - végül is ez a funkciójuk. Ez az oka annak, hogy a régi kék aláhúzású szöveghatás olyan jól működik. De ha úgy találja, hogy egy másik szín jobban működik, akkor próbálja ki. A linktervezéshez nincs egy-egyfajta megoldás. Csak egy kicsit böngésszen az interneten, és biztosan összeállíthatsz valami kiválóat.

Az egyik érdekes pont néhány olyan funkció, amit meg kell próbálni elkerülve. A szöveges betűtípuscsalád vagy a betűméret megváltoztatása nagyon bosszantó lehet. Ez a szöveget torzítja és elmozdítja, ami az egérmutatót csak a link zónából helyezheti el. Hasonló módon kerülni kell az extra margók / padding hozzáadását a linkekhez vagy a hover effektekhez. Ezek sokkal jobban működnek, ha egyszerű maradsz. A színváltozás vagy a hozzáadott aláhúzás messze jár a felhasználói élményben.

Stilizált listák építése

Jó esély van arra, hogy bizonyos pontokon listákkal is dolgozzunk. Tartalmazza a megrendelt és rendezetlen listákat is HTML-ben. Ezek tökéletesek egy kis ötlet, termék, ember, vagy linkek online gyűjtéséhez nagyon kis mennyiségű térben. A stilizálás sem más, mint a bekezdések vagy a fejlécek.

A látogatóknak azonnal meg kell érteniük, hogy egy elemlistát néznek. Minden egyes listaelemet külön kell elhelyezni és egy új sorban helyezkednie el az oldalon. Ha lehetséges, adjon hozzá néhány extra helyet. Ez néhány légzési helyet ad, és a cikk szövegének szép megszakításaként jelenik meg. Ha azt szeretné, hogy a betűtípus vagy a francia bekezdés is merész legyen, egy kicsit felsorol, hogy távol álljon a szokásos elrendezési margóktól.

A további funkciók hozzáadása a listának kiemeléséhez nem követelmény. De ha élvezi a blokk-elrendezés stílusát, akkor valóban a listákra fókuszál. Megpróbálhat hozzáadni egy világos háttér vagy ikonok. A List Apart-nak nagyszerű írása van a szabotázs listákon, amelyek szerintem néhány nagyon erős tudásbirtokot tartalmaz. Ha azonban az oldal tartalmát lineárisan tartja, és csak szükség esetén használja a listablokkokat, akkor nem szabad semmilyen tervezési kudarcba ütköznie.

Hogyan lehet létrehozni az In-Page idézeteket

Az idézetek és idézetek megjelenése ezekben a napokban nagyon korlátozott. A korai interneten nem láthatták nagyon sok ilyen elemet. Talán szerkesztőségekben, esszékben vagy oktatási dokumentumokban. A HTML5 azonban egy kicsit frissítette a szabályokat, ami sokkal könnyebbé teszi a blokkokat.

A HTML5 doktor honlapján lenyűgöző erőforrás található a pontos téma megvitatására. Megvitatják a blokkjegyeken belüli tartalmak használatát a dokumentumszerkezet belső részeként. Tehát a címek, bekezdések, sőt listák és láblécek is szerepelhetnek. Az a