Egy gyönyörű „cikk” megtervezése rengeteg megfontolással történik. Ellentétben, mondjuk, egy honlappal, egy hosszú formátumú cikk kevésbé a kezelőfelület tervezéséről szól, mint inkább a szöveg olyan megtervezéséről, amely nyugodt és kényelmes olvasási élményt nyújt.
Ennek az az oka, hogy a cikkek hosszú formátumú tartalommal foglalkoznak, amelyet viszont általában a felhasználókkal való „oldalon töltött idő” értékkel értékelnek. Szeretnénk, ha valaki elolvasna egy teljes elbeszélést. Természetes tér van aközött, amikor valaki rábukkan egy cikkre, és elolvassa az összes szót. És remélhetőleg ez a tér kellően magával ragadó ahhoz, hogy ne csak befogadja a felhasználót, hanem gondolatokat, ötleteket és esetleg cselekvéseket is kiváltson. Legalábbis ebben reménykedem, mivel felkeltettem a figyelmemet, és éppen az éppen olvasott cikken haladsz keresztül.
Egyensúly van. Egyrészt ezt halljuk "Senki sem olvassa az internetet." Másrészt egy hosszú cikk alapos figyelmet igényel. Figyelembe véve a tartalommarketing jelenlegi értékét és a felhasználók növekvő türelmetlenségét, az olvasók minél hosszabb ideig tartó lebilincselése kulcsfontosságú kell, hogy legyen. Vessünk egy pillantást néhány bevált gyakorlatra és példákra a hihetetlen cikkoldalakra, hogy jobb képet kapjunk arról, mi tesz vizuálisan vonzó olvasási élményt a hosszú formátumú cikkeknél (a felhasználói élmény feláldozása nélkül), és hogyan reprodukálhatjuk a hatásokat.
Gyors győzelem
Hadd soroljam fel gyorsan, mi az, ami szerintem már sokaknak nyilvánvaló, de ezek hatékonyak a tartalom olvashatósága szempontjából:
- A betűméret növelése: Tudjuk, hogy
16pxEz az alapértelmezett, és számos kialakításban tökéletesen megfelel, de a nagyobb betűméret hívogató, mivel azt jelenti, hogy a felhasználó szabadon dőlhet hátra és elhelyezkedhet anélkül, hogy a képernyővel előre kell döntenie az olvasáshoz. - Karakterek száma soronként: Nagyon kevés ember, akit ismerek, szeretne a kelleténél keményebben dolgozni, és ez vonatkozik az olvasásra is. Ahelyett, hogy a teljes nézetablak szélességét használná, próbálja szűkíteni a dolgokat, és egyensúlyba hozni a nagyobb betűmérettel kevesebb karaktereket a szöveg minden sorában. A kedvenc helyed változhat, bár sokan soronként 45-75 karaktert javasolnak, hogy korlátozzák, mennyit kell dolgoznia az olvasó szemének, hogy balról jobbra haladjon. Chrisnek van egy könyvjelző a karakterek megszámlálásához, de nálunk is megvan a
chegység CSS-ben, hogy kiszámítható eredményeket kapjon. - A vonal magasságának növelése: Az alapértelmezett vonalmagasság összetört lesz. Vicces, de a sorok közötti több hely (természetesen egy bizonyos pontig) kevesebb munkát jelent a szemnek, ami ellentétesnek tűnik a karakterenkénti tanácsokkal, ahol általában azt szeretnénk, hogy a szemek rövidebb utat tegyenek meg. Egy vonalmagasság között
1.2és a1.5elég tipikus tartománynak tűnik a hosszú formátumú tartalmak számára.
Ha még nem láttad, Pierrick Calveznek nagyszerű "öt perc" tipográfiai útmutató amely egy csomó alacsonyan lógó gyümölcsbe csomagol, mint ezek.
Extra légzési helyiség kialakítása
Megszokhatta a „hajtás feletti” tervezést, ahol az ingatlan az elsődleges árucikk. Ez olyan, mint egy tengerparti ingatlan a webes világban, mert itt szoktunk nagy értékű dolgokat bepakolni, például hős szalaghirdetéseket, cselekvésre ösztönzőket és bármi mást, ami egy dolog eladását segíti elő. A hajtás felett olyan lehet, mint egy sűrű városi belváros, nagy forgalommal és sokemeletes épületekkel.
A cikkek különbözőek. Lehetővé teszik, hogy egy kicsit nyújtózkodjon. Ha egy kicsit tovább akarjuk vinni a városfejlesztési analógiát, akkor a cikkeknek van elég területük ahhoz, hogy a „kevesebb több”-féle tervezési megközelítésbe hajlítsanak. Ez az, ami miatt a látszólag kicsi tervezési döntések – például a típus – olyan fontosak az általános élmény szempontjából.
Tekintse meg az alábbi példát. A link aláhúzásoknak van egy kicsit több helyük a levegőhöz (konkrétan az ereszkedők alatt jelennek meg). Ez valójában olyan dolog, amelyet webhelyszerte engedélyezhet, de különösen jól néz ki a cikkoldalakon, mivel javítja az olvashatóságot. Ez az a fajta kifinomult dizájnválasztás, amely hozzájárul az extra légzéshez.
text-underline-position: under; ez a CSS azon vonala, amely ezt teszi lehetővé. Természetesen, text-decoration másra kell állítani, mint none (underline ebben az esetben is).
A fenti példa is jellemző text-decoration-thickness, amely megváltoztatja az aláhúzások (és más vonaltípusok) vastagságát. Ezzel a CSS-tulajdonsággal a vonal vastagságát a betűmérethez és/vagy a súlyhoz igazíthatja.
Íme egy teljes példa:
a {
text-decoration: underline;
text-decoration-thickness: 2px;
/* or */
text-decoration: underline 2px;
text-underline-position: under;
}De mielőtt elérné a text-decoration gyorsírás, Šime Vidas rendelkezik néhány "cucc" ha használatáról van szó, érdemes áttekinteni.
Bevezetés a tartalomba
Dobja le a kupakokat stilizált betűk, amelyek egy dokumentum vagy dokumentumrész elejére helyezhetők. Valaha latin szövegekben használták őket, de manapság leginkább dekorációs okokból használják őket.
Személy szerint úgy gondolom, hogy a drop cap akadályozza az olvashatóságot. Jó módja lehet azonban az olvasónak a fő tartalomra „elvezetni”, és nem okozhat komoly akadálymentesítési problémákat mindaddig, amíg a ::first-letter pszeudo-elem. Vannak egyéb (régebbi) mód amelyek több HTML-t és CSS-t, valamint ARIA-attribútumok használatát foglalják magukban annak érdekében, hogy a tartalom elérhető maradjon.
<p></p>
::first-letter, a CSS valahogy így nézne ki:
/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}Biztos jó lenne, ha tudnánk használni initial-letter tulajdon, de ennek írásakor jóformán nincs rá támogatás. Ha ez megvolt, akkor a betűméretre és a sormagasságra vonatkozó összes matematikát kiszámolnák nekünk!
A CodePen néhány évvel ezelőtt kihívta az embereket, hogy mutassák meg drop-cap-stílustudásukat, és egy csomó ügyes példát láthattok belőle ez a gyűjtemény.
Ugrás a tartalomra
A képernyőolvasók lehetővé teszik a felhasználók számára, hogy a fő tartalomra ugorjanak, mindaddig, amíg az a <main> elem. Azok azonban, akik lapozással navigálnak a webhelyeken, nem részesülnek ebből. Ehelyett létre kell hoznunk egy „ugrás a fő tartalomhoz” horgonylinket. Ez a link általában el van rejtve, de akkor jelenik meg, amikor a felhasználó megnyitja az első lapot (azaz fókuszban jelenik meg).
Ez így néz ki:
<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>
<!-- target -->
<main class="main">
<!-- main content -->
</main>#skip-link {
position: absolute; /* remove it from the flow */
transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
position: unset; /* insert it back into the flow */
transform: unset; /* move it back onto the screen */
}
.main {
scroll-margin: 1rem; /* adds breathing room above the scroll target */
}Természetesen vannak más módszerek is. Íme néhány mélyebb merülés az átugró linkek létrehozásával kapcsolatban.
Zökkenőmentes látványvilág
Imádom az illusztrációkat benne ezt a cikket. Annak ellenére, hogy milyen hihetetlenül néznek ki, nem igényelnek túl sok kognitív figyelmet. Rövid örömteli pillanatokat mutatnak be, de azt is sugallják, hogy magának a cikknek van valami fontosabb mondanivalója. Ez részben az átlátszóság használatán múlik, míg a téglalap alakú képek több negatív teret foglalnak el, és ezért több figyelmet igényelnek (ami rendben van, ha ez a kívánt hatás, és a képek kulcsfontosságúak a történetben).
Fontos azonban tudni, hogy a képek valójában egyáltalán nem átlátszóak, hanem nem átlátszó JPEG-fájlok, amelyek háttérszíne megegyezik a tartalommal. Feltételezem, hogy ez azért van, hogy a képek mérete kisebb legyen az átláthatóságot támogató PNG-ekhez képest.
Az ilyen átlátszó háttér „hamisításának” hátránya, hogy további trükköket (és karbantartást) igényel a sötét módú felhasználói felület ha az Ön webhelye kínál ilyet. Ha az illusztrációk meglehetősen laposak és egyszerűek, akkor az SVG lehet a megfelelő megoldás, mivel kicsi, méretezhető, és bármilyen háttérbe beleolvad.
Ha azonban raszteres képeket kell használnia, és inkább PNG-fájlokat szeretne használni az átláthatóság érdekében, érdemes megvizsgálnia a érzékeny képek és a loading="lazy" tulajdonság a gyorsabb betöltés érdekében.
Helyezze a hangsúlyt a típusra és a szemantikára
Lehet, hogy nagyon kevés beleszólása van hogyan or ahol valaki manapság tartalmat olvas az interneten. Akár RSS-hírcsatornában, akár e-mailben kézbesítik, látja, hogy egy kollégája másolja és illessze be, megtalálja egy kimásolt webhelyen, vagy bármi más, a tartalom úgy néz ki. különböző mint te jobban szereted. Megtervezheti az Ön szerint a legcsodálatosabb cikket az egész országban, és a felhasználó továbbra is megteheti nyomja meg azt a Reader Mode gombot döbbenetedre.
Rendben van! A tartalom felfedezhetősége legalább annyira fontos, mint annak kialakítása, és sok felhasználónak megvan a maga módja a tartalom felfedezésének, valamint a jó olvasási élményt nyújtó preferenciák.
De vannak okai annak, hogy valaki miért szeretne Olvasó módot. Egyrészt olyan, mintha „egyáltalán nem látnék CSS-t”. Ez alatt úgy értem A Safari olvasó módja or Brave SpeedReader, amelyek gépi tanulást használnak a cikkek észlelésére. Nincs CSS, JavaScript vagy nem cikkhez tartozó képek lekérése vagy végrehajtása, ami növeli a teljesítményt, valamint blokkolja a hirdetéseket és a követést.
Ilyen „durva minimalizmus” a tartalomra helyezi a hangsúlyt a stílusok helyett. Szóval tényleg lehet akar hogy a böngésző kifejezetten erre a célra kialakított véleménynyilvánított olvasási stílusait felkarolja.
Ennek módja nem a CSS használata, hanem az, hogy jobban odafigyel a HTML-kódjára. Az olvasói módok az egyszerű, szemantikus, cikkekhez kapcsolódó HTML-t használó jelölésekkel működnek a legjobban. Többet kell tennie, mint egyszerűen címkék rácsapása a cikkre, hogy a legtöbbet hozza ki belőle.
Csak azt tapasztalhatja, hogy egy minimális dizájn, amely a simaság helyett az olvashatóságot hangsúlyozza, valójában jó stratégia a webhely kialakításában. Erősen javaslom, hogy olvassa el Robin bejegyzését a "legkisebb CSS” a szilárd olvasási élmény érdekében.
Összefoglaló a hosszú formátumú cikkekből!
Sok mindent megosztottam arról, ami szerintem nagyszerű olvasási élményt nyújt a hosszú formátumú cikkek számára az interneten. De látni hinni, és összeszedtem egy csomó példát, amelyek bemutatják, hogy miről is beszéltünk.
-
A Polygon erős, kihívó látványt használ, hogy az olvasókat az ain tartalomba vonzza. Figyelje meg, hogy a zárósapka, a nagyobb betűméret és a megnövelt sormagasság milyen érzést kelt ezen az oldalon, ahol nyugodtan hátradőlhet. -
A TASTE weboldal átlátszó képeket használ, amelyek beleolvadnak a tartalom háttérszínébe. Rengeteg hely van az elemek között, és a merész akcentusok – mint például a vastag szegélyek és a vastag kupak – lehúzzák az olvasó tekintetét az oldalon. -
Az Outline a minimalizmus kiváló példája. Figyeld meg, hogy az olyan finom dolgok, mint a kanyargós vízszintes szabály, szemet gyönyörködtető díszítés lehet, amikor kevesebb dolog verseng a figyelemért. -
A Dropbox blog brutalista stílusa valószínűleg ellentmondásos. A színek, a betűtípusok és a helykihasználás mindenütt jelen vannak, és a jobbra lebegtetett tartalom egyszerűen ismeretlen. De megszeg-e bármilyen tervezési „szabályt”? Dehogy. Idővel megkedvelhetem, főleg enyhébb formában. -
Az Urban Beardsman dizájnja rendkívül lineáris. Mint valaki, akinek nehezen tud koncentrálni, és könnyen eltereli a figyelmét az oldalsávok, a cikkben található CTA-dobozok és még az idézetek is, nagyon élvezem, hogy milyen könnyű úgy olvasni ezt a blogot, mint egy könyvet. A „kevesebb több” tökéletes példája. -
A GoSquared blogban nincs semmi egyedi, de nagyjából az összes dolgot sikerült magában foglalnia, amit a cikkben tárgyaltunk – jobb aláhúzást, zökkenőmentes képeket és néhány nagyon olvasható tipográfiát. Egészen lenyűgöző. -
Az Intelligens Passzív Jövedelem blog bebizonyítja, milyen messzire juthat el pusztán egy olvasható betűtípus kiválasztásával, valamint az olvasható betűméretek, sormagasságok, betű- és bekezdésközök használatával. -
A receptoldalak következetesen szívásak, de nem a Little Fat Boy. Az azonosság hiánya az egész oldalon megkönnyíti a recept különböző részeire ugrást anélkül, hogy elveszne. Ráadásul az összetevők a jobb felső sarokban vannak rögzítve az Ön kényelme érdekében.
