Pikakujuliste artiklite kujundamine

Kauni "artikli" kujundamisel võetakse arvesse palju kaalutlusi. Erinevalt näiteks kodulehest on pikas vormis artikkel vähem seotud liidese kujundamisega, vaid teksti kujundamisega viisil, mis loob pingevaba ja mugava lugemiskogemuse.

Selle põhjuseks on asjaolu, et artiklid käsitlevad pika vormiga sisu, mida omakorda kiputakse väärtustama kasutajatega suhtlemise "aeg lehel". Me tahame, et keegi loeks terviklikku narratiivi. Aja vahel, mil keegi satub artiklile ja loeb kõik sõnad ette, jääb loomulik tühik. Ja loodetavasti on see ruum piisavalt kaasahaarav, et mitte ainult kasutajat hoida, vaid ka mõtteid, ideid ja võib-olla ka tegevusi esile kutsuda. Vähemalt seda ma loodan, kuna olen teie tähelepanu pälvinud ja te läbite artikli, mida te loete.

Seal on tasakaal. Ühest küljest kuuleme seda "Keegi ei loe Internetti." Teisest küljest nõuab pikaajaline artikkel hoolikat tähelepanu. Arvestades sisuturunduse praegust väärtust ja kasutajate kasvavat kannatamatust, peaks lugejate võimalikult pikaks köitmiseks olema peamine mure. Vaatame mõningaid parimaid tavasid ja näiteid uskumatutest artiklilehtedest, et saada parem ülevaade sellest, mis teeb pika vormiga artiklite jaoks visuaalselt atraktiivse lugemiskogemuse (kasutajakogemust ohverdamata) ja kuidas saame efekte korrata.

Kiired võidud

Lubage mul kiiresti loetleda need, mis minu arvates võivad paljudele teist juba ilmsed olla, kuid mis on sisu loetavuse jaoks tõhusad.

• Suurendage fondi suurust: Me teame, et 16px on vaikeseade ja sobib paljude kujundustega, kuid suurem fondi suurus on ahvatlev, kuna see tähendab, et kasutaja võib vabalt tahapoole nõjatuda ja sisse seada, ilma et peaks lugemiseks ettepoole pöörama ekraani näoga.
• Eesmärk on tähemärki rea kohta: Väga vähestele inimestele, keda ma tean, meeldib töötada rohkem kui vaja, ja see kehtib ka lugemise kohta. Selle asemel, et kasutada kogu vaateava laiust, proovige asju kitsendada ja tasakaalustada seda oma suurema fondisuurusega vähem tähemärki igal tekstireal. Teie lemmikkoht võib erineda, kuigi paljud soovitavad kuskil 45–75 tähemärki rea kohta, et piirata, kui kaugele peab lugeja silm vasakult paremale liikumiseks töötama. Chrisil on a järjehoidja, mis aitab tähemärke loendada, kuid meil on ka ch prognoositavate tulemuste saamiseks CSS-is.
• Tõsta joone kõrgust: Rea vaikekõrgus tundub olevat purustatud. See on naljakas, kuid rohkem ruumi ridade vahel (muidugi kuni teatud punktini) on silmade jaoks vähem tööd, mis tundub vastuolus märkidega rea ​​kohta, mille kohaselt tahame üldiselt, et silmad läbiksid lühema vahemaa. Joone kõrgus vahel 1.2 ja 1.5 tundub olevat üsna tüüpiline pika vormiga sisu vahemik.

Kui te pole seda varem näinud, Pierrick Calvezil on suurepärane "viis minutit" tüpograafia juhend mis pakib hunnikusse madalalt rippuvaid puuvilju nagu need.

Disain täiendava hingamisruumi jaoks

Võib-olla olete harjunud kujundama "lehe kohal", kus kinnisvara on esmatähtis kaup. See on omamoodi nagu rannaäärne kinnisvara veebimaailmas, sest see on koht, kus oleme harjunud pakkima väärtuslikke asju, nagu kangelasbännerid, kutsed tegevusele ja kõik muu, mis aitab asja müüa. Voldi kohal võib sarnaneda tiheda linnalise kesklinnaga, kus on tihe liiklus ja kõrghooned.

Artiklid on erinevad. Need võimaldavad teil veidi venitada. Kui tahame linnaarenduse analoogiat veidi kaugemale viia, on artiklitel piisavalt ruumi, et toetuda "vähem on rohkem"-tüüpi kujunduslikule lähenemisele. Just see muudab näiliselt väikesed disainivalikud (nt tüüp) üldise kogemuse jaoks nii oluliseks.

Vaadake allolevat näidet. Lingi allakriipsudel on veidi rohkem hingamisruumi (täpsemalt paistavad need laskujate alla). See on tegelikult midagi, mida saate lubada kogu saidil, kuid see näeb eriti kena välja artiklite lehtedel, kuna see suurendab loetavust. See on selline peen disainivalik, mis annab rohkem hingamisruumi.

text-underline-position: under; on CSS-i rida, mis selle toimima paneb. Loomulikult text-decoration tuleb määrata millekski muuks kui none (underline ka sel juhul).

Ülaltoodud näide sisaldab ka seda text-decoration-thickness, mis muudab allajoonide (ja muude joonetüüpide) paksust. Seda CSS-i atribuuti saate kasutada joone paksuse sobitamiseks fondi suuruse ja/või kaaluga.

Siin on täielik näide:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

Aga enne, kui jõuad text-decoration stenogramm, on Šime Vidasel paar "juttu" mis on selle kasutamise osas ülevaatamist väärt.

Juhtimine sisusse

Langetage mütsid on stiliseeritud tähed, mida saab paigutada dokumendi või dokumendiosa algusesse. Kunagi kasutati neid ladinakeelsetes tekstides, kuid tänapäeval kasutatakse neid enamasti dekoratiivsetel põhjustel.

Isiklikult arvan, et drop capid takistavad loetavust. Kuid need võivad olla hea viis lugeja põhisisu juurde suunamiseks ja need ei tohiks tekitada tõsiseid juurdepääsetavuse probleeme seni, kuni kasutate ::first-letter pseudoelement. Seal on muu (vanem) meetodid mis hõlmavad rohkem HTML-i ja CSS-i ning ARIA atribuutide kasutamist, et sisu oleks juurdepääsetav.

Kasutamine ::first-letter, näeks CSS välja umbes selline:

/* 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;
}

Kindlasti oleks tore, kui saaksime seda kasutada initial-letter vara, kuid selle kirjutamise ajal pole sellele peaaegu mingit toetust. Kui see meil oleks, arvutataks kogu see fondi suuruse ja rea ​​kõrguse matemaatika meie eest!

CodePen kutsus inimesi näitama oma drop-cap-stiilioskusi mitu aastat tagasi ja näete tervet hunnikut kenaid näiteid sellest see kollektsioon.

Otse pealehele

Ekraanilugejad võimaldavad kasutajatel liikuda põhisisu juurde seni, kuni see mähib selle a-sse <main> element. Kuid need, kes navigeerivad veebisaitidel vahekaartide abil, ei saa sellest kasu. Selle asemel peame looma ankurlingi „jätke põhisisu juurde”. See link on tavaliselt peidetud, kuid ilmub siis, kui kasutaja teeb oma esimese vahelehe (st kuvatakse fookuses).

See näeks välja selline:

<!-- 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 */
}

Muidugi on ka teisi võimalusi. Siin on paar sügavamat sukeldumist vahelejätmise linkide loomise kohta.

Sujuvad visuaalid

Mulle meeldivad need illustratsioonid Käesoleva artikli. Vaatamata sellele, kui uskumatud nad välja näevad, ei nõua nad liiga palju kognitiivset tähelepanu. Need tutvustavad lühikesi rõõmuhetki, kuid viitavad ka sellele, et artiklil endal on midagi olulisemat öelda. Osaliselt taandub see läbipaistvuse kasutamisele, samas kui ristkülikukujulised pildid hõivavad rohkem negatiivset ruumi ja nõuavad seetõttu rohkem tähelepanu (mis on hea, kui see on soovitud efekt ja pildid on loo jaoks üliolulised).

Siiski on oluline teada, et pildid ei ole tegelikult üldse läbipaistvad, vaid on sisuga sama taustavärviga läbipaistmatud JPEG-failid. Eeldan, et selle eesmärk on hoida piltide suurus väiksemana võrreldes läbipaistvust toetavate PNG-dega.

Sellise läbipaistva tausta "võltsimise" negatiivne külg on see, et selle toetamine nõuab täiendavat trikitamist (ja hooldust). tumeda režiimi kasutajaliides kui teie sait juhtub seda pakkuma. Kui illustratsioonid on üsna lamedad ja lihtsad, võib selle asemel kasutada SVG-d, kuna see on väike, skaleeritav ja suudab sulanduda mis tahes taustaga.

Kuid kui olete kohustatud kasutama rasterpilte ja soovite läbipaistvuse huvides pigem PNG-failidega töötada, võiksite uurida tundlikud pildid ja loading="lazy" atribuut kiiremaks laadimisajaks.

Keskenduge tüübile ja semantikale

Teil võib olla väga vähe sõnaõigust kuidas or kus keegi loeb tänapäeval veebis sisu. Teie sisu võib välja näha, kas kasutaja saab selle RSS-kanalina, e-posti teel, näeb seda kolleegilt kopeerituna ja kleepituna, leiab selle kokkukraabitud saidilt või midagi muud. erinev kui eelistate. Saate kujundada teie arvates maailma kõige uhkema artikli, mida kasutaja ikka teeb purustage see lugejarežiimi nupp teie meelehärmiks.

See on okei! Sisu leitavus on sama oluline kui selle kujundus ning paljudel kasutajatel on oma viis sisu avastamiseks ja eelistused selle kohta, mis teeb hea lugemiskogemuse.

Kuid on põhjuseid, miks keegi soovib lugejarežiimi. Ühe jaoks on see nagu "ei näe CSS-i". Selle all ma mõtlen Safari lugejarežiim or Vapper SpeedReader, mis kasutavad artiklite tuvastamiseks masinõpet. Puudub CSS-i, JavaScripti või mitteartiklite piltide toomine ega käivitamine, mis suurendab jõudlust ning blokeerib ka reklaamid ja jälgimise.

Seda sorti "julm minimalism" keskendub pigem sisule kui stiilidele. Nii et sa võid tegelikult tahan selleks, et võtta omaks brauseri arvamuslikud lugemisstiilid.

Seda ei saa teha mitte CSS-i kasutades, vaid oma HTML-ile rohkem tähelepanu pöörates. Lugejarežiimid töötavad kõige paremini märgistusega, mis kasutab lihtsat semantilist artikliga seotud HTML-i. Peate tegema enamat kui lihtsalt laksu andma sildid artikli ümber, et sellest maksimumi võtta.

Võite lihtsalt avastada, et minimaalne kujundus, mis rõhutab loetavust libeduse asemel, on tegelikult hea strateegia teie saidi kujunduses kasutamiseks. Soovitan tungivalt lugeda Robini postitust teemal "väikseim CSS” kindla lugemiskogemuse jaoks.

Pikaajaliste artiklite kokkuvõte!

Olen jaganud palju seda, mis minu arvates pakub veebis pikaajaliste artiklite jaoks suurepärase lugemiskogemuse. Kuid nägemine on uskumine ja ma olen kogunud hunniku näiteid, mis näitavad, mida oleme käsitlenud.