Proiectare pentru articole de formă lungă

Proiectarea unui „articol” frumos este realizată cu o mulțime de considerații. Spre deosebire, de exemplu, de o pagină de pornire, un articol de lungă durată este mai puțin despre proiectarea unei interfețe decât despre proiectarea textului într-un mod care creează o experiență de lectură relaxată și confortabilă.

Acest lucru se datorează faptului că articolele tratează conținut de lungă durată care, la rândul său, tinde să fie apreciat de o interacțiune „timpul pe pagină” cu utilizatorii. Vrem ca cineva să citească o narațiune completă. Există un spațiu natural între momentul în care cineva aterizează pe un articol și citește toate cuvintele. Și sperăm că acel spațiu este suficient de captivant pentru a nu doar să țină utilizatorul, ci și să provoace gânduri, idei și, eventual, acțiuni. Cel puțin asta sper, deoarece am atenția ta și îți faci drum prin articolul pe care îl citești.

Există un echilibru. Pe de o parte, auzim asta „Nimeni nu citește pe internet”. Pe de altă parte, un articol lung necesită o atenție deosebită. Având în vedere valoarea actuală a marketingului de conținut și nerăbdarea în creștere a utilizatorilor, captivarea cititorilor cât mai mult posibil ar trebui să fie o preocupare esențială. Să aruncăm o privire la câteva dintre cele mai bune practici și exemple de pagini de articole incredibile pentru a ne face o idee mai bună despre ceea ce face o experiență de lectură atractivă din punct de vedere vizual pentru articolele de lungă durată (fără a sacrifica experiența utilizatorului) și cum putem reproduce efectele.

Victorii rapide

Permiteți-mi să enumerez rapid ceea ce cred că ar putea fi deja evident pentru mulți dintre voi, dar sunt lucruri eficiente pentru lizibilitatea conținutului:

• Măriți dimensiunea fontului: Știm că 16px este implicit și este perfect în multe modele, dar o dimensiune mai mare a fontului este atractivă, deoarece implică că utilizatorul este liber să se aplece pe spate și să se așeze fără a fi nevoit să se încline înainte cu ecranul în față pentru a citi.
• Vizualizați caractere pe rând: Foarte puțini oameni pe care îi cunosc le place să muncească mai mult decât trebuie, iar asta este valabil și pentru citit. În loc să utilizați lățimea completă a ferestrei de vizualizare, încercați să restrângeți lucrurile și să le echilibrați cu dimensiunea mai mare a fontului pentru a obține mai puține caractere pe fiecare linie de text. Punctul tău favorabil poate varia, deși mulți oameni sugerează undeva între 45-75 de caractere pe rând pentru a limita cât de departe trebuie să lucreze ochiul cititorului pentru a merge de la stânga la dreapta. Chris are o bookmarklet pentru a ajuta la numărarea caracterelor, dar avem și ch unitate în CSS pentru a obține rezultate previzibile.
• Creșteți înălțimea liniei: O înălțime implicită de linie se va simți distrusă. Este amuzant, dar mai mult spațiu între rânduri (până la un punct, desigur) înseamnă mai puțină muncă pentru ochi, ceea ce pare antitetic cu sfaturile personaje-pe-linie în care, în general, dorim ca ochii să parcurgă o distanță mai mică. O înălțime de linie între 1.2 și 1.5 pare a fi o gamă destul de tipică pentru conținutul de formă lungă.

Dacă nu l-ai văzut până acum, Pierrick Calvez are un lucru grozav „cinci minute” ghid de tipografie care se împachetează într-o grămadă de fructe ca acestea.

Design pentru spațiu de respirație suplimentar

S-ar putea să fiți obișnuiți să proiectați „de mai sus” în cazul în care imobiliare este o marfă principală. Este un fel de proprietate pe malul mării în lumea web, deoarece este locul în care suntem obișnuiți să împachetăm lucruri de mare valoare, cum ar fi bannere cu eroi, îndemnuri și orice altceva pentru a ajuta la vânzarea unui lucru. Deasupra pliului poate fi foarte asemănător unui centru urban dens, cu trafic ridicat și clădiri înalte.

Articolele sunt diferite. Ele vă permit să vă întindeți puțin. Dacă vrem să ducem analogia dezvoltării orașului puțin mai departe, articolele au suprafața de a se înclina într-o abordare de design „mai puțin este mai mult”. Acesta este ceea ce face ca alegerile de design aparent mici - cum ar fi tipul - să fie atât de importante pentru experiența generală.

Consultați exemplul de mai jos. Subliniarile de link au un pic mai mult loc de respirat (mai exact, ele apar sub coborâtoare). Acesta este de fapt ceva pe care îl puteți activa pe întregul site, dar arată deosebit de bine în paginile articolelor, deoarece crește lizibilitatea. Acesta este genul de alegere subtilă de design care contribuie la un spațiu de respirație suplimentar.

text-underline-position: under; este linia CSS care face ca acest lucru să funcționeze. Natural, text-decoration trebuie setat la altceva decât none (underline și în acest caz).

Exemplul de mai sus prezintă și text-decoration-thickness, care modifică grosimea subliniilor (și a altor tipuri de linii). Puteți utiliza această proprietate CSS pentru a potrivi grosimea unei linii cu dimensiunea și/sau greutatea unui font.

Iată un exemplu complet:

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

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

Dar înainte de a ajunge la text-decoration stenografie, Šime Vidas are câteva „probleme” atunci când vine vorba de utilizare care merită revizuite.

Conducerea în conținut

Capacele pentru picătură sunt litere stilizate care pot fi plasate la începutul unui document sau al unei secțiuni de document. Au fost folosite cândva în textele latine, dar astăzi sunt folosite mai ales din motive decorative.

Personal, cred că majusculele îngreunează lizibilitatea. Cu toate acestea, ele pot fi o modalitate bună de a „conduce” un cititor către conținutul principal și nu ar trebui să introducă probleme serioase de accesibilitate atâta timp cât utilizați ::first-letter pseudo-element. Sunt altele (mai vechi) Metode care implică mai mult HTML și CSS, precum și utilizarea atributelor ARIA pentru ca conținutul să rămână accesibil.

Utilizarea ::first-letter, CSS-ul ar arăta cam așa:

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

Ar fi bine dacă am putea folosi initial-letter proprietate, dar nu există aproape niciun suport pentru aceasta în momentul în care scriu asta. Dacă am avea-o, toate acele matematice pentru dimensiunea fontului și înălțimea liniei ar fi calculate pentru noi!

CodePen i-a provocat pe oameni să-și etaleze abilitățile de stilizare cu șapcă în urmă cu câțiva ani și puteți vedea o grămadă de exemple frumoase din el în această colecție.

Salt la conținutul principal

Cititoarele de ecran permit utilizatorilor să treacă la conținutul principal, atâta timp cât îl încadrează într-un <main> element. Cu toate acestea, cei care navighează pe site-uri prin tabulare nu beneficiază de acest lucru. În schimb, trebuie să creăm un link de ancorare „săriți la conținutul principal”. Acest link este de obicei ascuns, dar este dezvăluit odată ce utilizatorul își face prima filă (adică arată pe focus).

Ar arata cam asa:

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

Există și alte moduri de a proceda, desigur. Iată câteva scufundări mai profunde despre crearea de linkuri de ignorare.

Elemente vizuale fără întreruperi

Îmi plac ilustrațiile din acest articol. În ciuda cât de incredibil arată, nu necesită prea multă atenție cognitivă. Ele introduc scurte momente de încântare, dar sugerează și că articolul în sine are ceva mai important de spus. Parțial, acest lucru se reduce la utilizarea transparenței, în timp ce imaginile dreptunghiulare captează mai mult spațiu negativ și, prin urmare, necesită mai multă atenție (ceea ce este bine dacă acesta este efectul dorit și imaginile sunt cruciale pentru poveste).

Cu toate acestea, este important să știți că imaginile nu sunt deloc transparente, ci sunt JPEG netransparente cu aceeași culoare de fundal ca și conținutul. Presupun că asta pentru a menține dimensiunea imaginilor mai mică în comparație cu PNG-urile care acceptă transparența.

Dezavantajul „falsificării” unui fundal transparent ca acesta este că ar fi nevoie de trucuri suplimentare (și întreținere) pentru a susține un interfața de utilizare în modul întunecat dacă site-ul tău se întâmplă să ofere unul. Dacă ilustrațiile sunt destul de plate și simple, atunci SVG ar putea fi calea de urmat, deoarece este mic, scalabil și capabil să se îmbine în orice fundal pe care se află.

Dar dacă sunteți obligat să utilizați imagini raster și preferați să lucrați cu fișiere PNG pentru transparență, veți dori să vă gândiți la utilizarea imagini receptive si loading="lazy" atribut pentru timpi de încărcare mai rapid.

Pune accent pe tip și semantică

S-ar putea să ai foarte puțin de spus cum or Unde cineva citește conținut pe web în aceste zile. Fie că utilizatorul îl primește într-un flux RSS, îl primește prin e-mail, îl vede copiat și lipit de la un coleg, îl găsește pe un site răzuit sau altceva, conținutul tău ar putea arăta diferit decât preferați. Ai putea proiecta ceea ce crezi că este cel mai frumos articol din toată lumea și utilizatorul încă ar putea sparge acel butonul Reader Mode spre disperarea ta.

Asta e ok! Descoperirea conținutului este la fel de importantă ca și designul acestuia, iar mulți utilizatori au propriile modalități de a descoperi conținut și preferințe pentru ceea ce face o experiență de lectură bună.

Dar există motive pentru care cineva ar dori un Modul Cititor. În primul rând, este ca „nu ați vedea deloc niciun CSS”. Prin asta, vreau să spun Modul Cititor Safari or Viteazul SpeedReader, care utilizează învățarea automată pentru a detecta articole. Nu există nicio preluare sau execuție de imagini CSS, JavaScript sau fără articole, ceea ce crește performanța și, de asemenea, blochează reclamele și urmărirea.

Acest gen de "brută minimalism” pune accentul mai degrabă pe conținut decât pe stiluri. Deci, s-ar putea de fapt vrea pentru a îmbrățișa stilurile de lectură cu opinii ale unui browser special în acest scop.

Modul de a face acest lucru nu este prin utilizarea CSS, ci prin acordarea mai multă atenție HTML-ului. Modurile de citire funcționează cel mai bine cu marcajul care utilizează HTML simplu, semantic, legat de articole. Trebuie să faci mai mult decât să pălmuiești etichete în jurul articolului pentru a profita la maximum de el.

S-ar putea să descoperiți că un design minimal care pune accent pe lizibilitate mai degrabă decât slickness este de fapt o strategie bună de utilizat în designul site-ului dvs. Vă sugerez cu tărie să citiți postarea lui Robin pe „cel mai mic CSS” pentru o experiență solidă de lectură.

Breviar de articole lungi!

Am împărtășit multe din ceea ce cred că face o experiență grozavă de lectură pentru articole de lungă durată de pe web. Dar a vedea înseamnă a crede și am adunat o grămadă de exemple care prezintă ceea ce am acoperit.