Oblikovanje za dolge članke

Oblikovanje čudovitega "izdelka" je povezano s številnimi premisleki. Za razliko od, na primer, domače strani, je dolg članek manj namenjen oblikovanju vmesnika kot oblikovanju besedila na način, ki ustvarja sproščeno in udobno bralno izkušnjo.

To je zato, ker se članki ukvarjajo z dolgotrajno vsebino, ki se posledično vrednoti po interakciji z uporabniki »časa na strani«. Želimo, da nekdo prebere celotno pripoved. Med tem, ko nekdo pristane na članku in prebere vse besede, obstaja naravni presledek. In upajmo, da je ta prostor dovolj privlačen, da ne samo zadrži uporabnika, ampak izzove misli, ideje in po možnosti tudi dejanja. Vsaj to je tisto, kar upam, saj imam vašo pozornost in se prebijate skozi članek, ki ga berete.

Obstaja ravnotežje. Po eni strani to slišimo "Nihče ne bere interneta." Po drugi strani pa obsežen članek zahteva posebno pozornost. Glede na trenutno vrednost vsebinskega marketinga in naraščajočo nepotrpežljivost uporabnikov bi morala biti ključna skrb privabiti bralce čim dlje. Oglejmo si nekaj najboljših praks in primerov neverjetnih strani s članki, da bi dobili boljšo predstavo o tem, kaj naredi vizualno privlačno izkušnjo branja dolgih člankov (brez žrtvovanja uporabniške izkušnje) in kako lahko posnemimo učinke.

Hitre zmage

Naj na hitro naštejem tisto, za kar mislim, da je mnogim od vas že očitno, a je učinkovito za berljivost vsebine:

• Povečajte velikost pisave: To vemo 16px je privzeto in je v mnogih oblikah povsem v redu, vendar je večja velikost pisave vabljiva, saj pomeni, da se lahko uporabnik svobodno nasloni in se usede, ne da bi se moral za branje nagniti naprej z zaslonom v obraz.
• Prizadevajte si za znake na vrstico: Zelo malo ljudi, ki jih poznam, radi delajo več, kot je potrebno, in to velja tudi za branje. Namesto da uporabite celotno širino vidnega polja, poskusite stvari zožiti in uravnotežiti z večjo velikostjo pisave, da dobite manj znakov v vsaki vrstici besedila. Vaša sladka točka se lahko razlikuje, čeprav mnogi ljudje predlagajo nekje med 45–75 znakov na vrstico, da bi omejili, kako daleč mora bralčevo oko delati, da gre od leve proti desni. Chris ima zaznamek za pomoč pri štetju znakov, vendar imamo tudi ch enoto v CSS, da dobite predvidljive rezultate.
• Povečajte višino vrstice: Privzeta višina vrstice se bo zdela razbita. Smešno je, toda več prostora med vrsticami (seveda do določene točke) pomeni manj dela za oči, kar se zdi v nasprotju z nasveti glede znakov na vrstico, kjer na splošno želimo, da oči potujejo na krajšo razdaljo. Višina črte med 1.2 in 1.5 se zdi precej tipičen razpon za dolgoročno vsebino.

Če tega še niste videli, Pierrick Calvez ima odlično “pet minut” vodnik po tipografiji ki vsebuje šop nizko visečega sadja, kot je ta.

Dizajn za dodaten prostor za dihanje

Morda ste navajeni oblikovanja »na vrhu strani«, kjer so nepremičnine glavno blago. To je nekakšna lastnina ob plaži v spletnem svetu, saj smo tam navajeni pakirati stvari visoke vrednosti, kot so pasice junakov, pozivi k dejanjem in karkoli drugega, kar pomaga pri prodaji stvari. Zgoraj pregib je lahko zelo podoben gostemu mestnemu središču z velikim prometom in visokimi stavbami.

Članki so različni. Omogočajo vam, da se nekoliko raztegnete. Če želimo analogijo razvoja mesta popeljati nekoliko dlje, imajo članki dovolj prostora, da se nagibajo k pristopu oblikovanja "manj je več". To je tisto, zaradi česar so na videz majhne izbire oblikovanja – kot je tip – tako pomembne za celotno izkušnjo.

Oglejte si spodnji primer. Podčrtane povezave imajo malo več prostora za dihanje (natančneje, pojavijo se pod spuščalci). To je pravzaprav nekaj, kar lahko omogočite na celotnem spletnem mestu, vendar je videti še posebej lepo na straneh s članki, saj poveča berljivost. To je nekakšna subtilna izbira oblikovanja, ki prispeva k dodatnemu prostoru za dihanje.

text-underline-position: under; je linija CSS, zaradi katere to deluje. seveda, text-decoration mora biti nastavljen na nekaj drugega kot none (underline tudi v tem primeru).

Zgornji primer ima tudi značilnosti text-decoration-thickness, ki spremeni debelino podčrtajev (in drugih vrst črt). To lastnost CSS lahko uporabite za ujemanje debeline črte z velikostjo in/ali težo pisave.

Tukaj je celoten primer:

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

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

Toda preden posežete po text-decoration stenografijo ima Šime Vidas nekaj "imam" ko gre za uporabo, ki jih je vredno pregledati.

Vodenje v vsebino

Spusti kapice so stilizirane črke, ki jih lahko postavite na začetek dokumenta ali odseka dokumenta. Nekoč so jih uporabljali v latinskih besedilih, danes pa se večinoma uporabljajo v dekorativne namene.

Osebno menim, da velike velike črke ovirajo berljivost. Vendar pa so lahko dober način, da bralca »pripeljete« do glavne vsebine in ne bi smeli povzročati resnih težav z dostopnostjo, dokler uporabljate ::first-letter psevdoelement. obstajajo drugo (starejše) Metode ki vključujejo več HTML in CSS ter uporabo atributov ARIA, da ostane vsebina dostopna.

Uporaba ::first-letter, bi bil CSS videti nekako takole:

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

Zagotovo bi bilo lepo, če bi lahko uporabili initial-letter lastnina, vendar v času, ko to pišem, zanjo ni skoraj nobene podpore. Če bi ga imeli, bi bila vsa ta matematika za velikost pisave in višino vrstice izračunana namesto nas!

CodePen je pred nekaj leti izzval ljudi, da pokažejo svoje spretnosti oblikovanja s kapo, in lahko vidite cel kup lepih primerov iz to zbirko.

Preskoči na glavno vsebino

Bralniki zaslona omogočajo uporabnikom, da preskočijo na glavno vsebino, če jo ovijejo v a <main> element. Vendar pa tisti, ki po spletnih straneh krmarijo s tabulatorji, od tega nimajo koristi. Namesto tega moramo ustvariti sidrno povezavo »preskoči na glavno vsebino«. Ta povezava je običajno skrita, vendar se pokaže, ko uporabnik naredi svoj prvi zavihek (tj. prikaži v fokusu).

Izgledalo bi nekako takole:

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

Seveda obstajajo tudi drugi načini. Tukaj je nekaj globljih potopov o ustvarjanju preskočnih povezav.

Brezšivne slike

Všeč so mi ilustracije ta članek. Kljub temu, da so videti neverjetno, ne zahtevajo preveč kognitivne pozornosti. Predstavljajo kratke trenutke veselja, hkrati pa namigujejo, da ima sam članek povedati nekaj pomembnejšega. Delno je to posledica uporabe prosojnosti, medtem ko pravokotne slike zajamejo več negativnega prostora in zato zahtevajo več pozornosti (kar je v redu, če je to želeni učinek in so slike ključne za zgodbo).

Vendar je pomembno vedeti, da slike pravzaprav sploh niso prosojne, temveč so neprozorne datoteke JPEG z enako barvo ozadja kot vsebina. Predvidevam, da je tako velikost slik manjša v primerjavi z PNG-ji, ki podpirajo prosojnost.

Slaba stran "ponarejanja" prosojnega ozadja, kot je to, je, da bi bilo potrebno dodatno zvijačo (in vzdrževanje) za podporo uporabniški vmesnik temnega načina če ga vaše spletno mesto ponuja. Če so ilustracije precej ploske in preproste, je morda prava izbira SVG, saj je majhen, razširljiv in se lahko zlije z ne glede na ozadje, na katerem je.

Če pa ste vezani na uporabo rastrskih slik in bi raje delali z datotekami PNG zaradi preglednosti, boste želeli preučiti uporabo odzivne slike in loading="lazy" atribut za hitrejše nalaganje.

Osredotočite se na vrsto in semantiko

Morda imate zelo malo besede kako or Kje dandanes nekdo bere vsebino na spletu. Ne glede na to, ali jo uporabnik prejme v viru RSS, jo prejme po e-pošti, jo vidi kopirano in prilepljeno od kolega, najde na postrganem mestu ali kaj drugega, lahko vaša vsebina izgleda drugačen kot vam je ljubše. Lahko bi oblikovali tisto, kar misliš, da je najlepši izdelek v vsej deželi, in uporabnik bi še vedno lahko razbijte ta gumb Reader Mode na vašo žalost.

V redu je! Odkrivanje vsebine je zelo pomembno kot njena zasnova in mnogi uporabniki imajo svoje načine odkrivanja vsebine in preference glede tega, kaj je dobra bralna izkušnja.

Toda obstajajo razlogi, zakaj bi nekdo želel način za branje. Prvič, to je, kot da "sploh ne vidim CSS". S tem mislim Safarijev način bralnika or Pogumni SpeedReader, ki uporabljajo strojno učenje za zaznavanje artiklov. Ni pridobivanja ali izvajanja slik CSS, JavaScript ali slik, ki niso članki, kar poveča učinkovitost in tudi blokira oglase in sledenje.

Ta vrsta “surovo minimalizem” se osredotoča na vsebino in ne na sloge. Torej bi dejansko lahko želeli da sprejmejo samozavestne bralne sloge brskalnika posebej za ta namen.

To ne storite z uporabo CSS-ja, temveč z večjo pozornostjo svojemu HTML-ju. Načini branja najbolje delujejo z oznakami, ki uporabljajo preprost, semantičen HTML, povezan s članki. Narediti moraš več kot le klofuto oznake okoli članka, da ga kar najbolje izkoristite.

Morda boste le ugotovili, da je minimalen dizajn, ki poudarja čitljivost namesto gladkosti, pravzaprav dobra strategija za uporabo pri oblikovanju vašega spletnega mesta. Močno priporočam branje Robinove objave na "najmanjši CSS« za dobro bralno izkušnjo.

Povzetek obsežnih člankov!

Delil sem veliko tega, kar mislim, da je odlična izkušnja pri branju dolgih člankov v spletu. Toda videti pomeni verjeti in zbral sem kup primerov, ki prikazujejo, kaj smo obravnavali.