Ontwerpen voor lange artikelen

Het ontwerpen van een mooi "artikel" gaat gepaard met tal van overwegingen. In tegenstelling tot bijvoorbeeld een homepage, gaat een lang artikel niet over het ontwerpen van een interface dan over het ontwerpen van tekst op een manier die een ontspannen en comfortabele leeservaring creëert.

Dat komt omdat artikelen te maken hebben met langwerpige inhoud die op zijn beurt wordt gewaardeerd door een 'tijd op de pagina'-interactie met gebruikers. We willen dat iemand een volledig verhaal leest. Er is een natuurlijke ruimte tussen het moment dat iemand op een artikel landt en alle woorden leest. En hopelijk is die ruimte meeslepend genoeg om niet alleen de gebruiker vast te houden, maar ook gedachten, ideeën en mogelijk acties uit te lokken. Dat hoop ik tenminste als ik je aandacht heb en je je een weg baant door het artikel dat je aan het lezen bent.

Er is een balans. Aan de ene kant horen we dat "Niemand leest internet." Anderzijds vraagt ​​een langwerpig artikel om zorgvuldige aandacht. Gezien de huidige waarde van contentmarketing en het groeiende ongeduld bij gebruikers, moet het zo lang mogelijk boeien van lezers een belangrijke zorg zijn. Laten we eens kijken naar enkele best practices en voorbeelden van ongelooflijke artikelpagina's om een ​​beter idee te krijgen van wat een visueel aantrekkelijke leeservaring maakt voor lange artikelen (zonder de gebruikerservaring op te offeren), en hoe we de effecten kunnen repliceren.

Snelle winsten

Laat me snel een lijst maken van wat ik denk dat voor velen van jullie misschien al duidelijk is, maar effectieve dingen zijn voor de leesbaarheid van de inhoud:

• Vergroot de lettergrootte: We weten dat 16px is de standaard en is prima in veel ontwerpen, maar een grotere lettergrootte is uitnodigend omdat het impliceert dat de gebruiker achterover kan leunen en zich kan settelen zonder naar voren te hoeven buigen met het scherm in zijn gezicht om te lezen.
• Streef naar karakters per regel: Er zijn maar weinig mensen die ik ken om harder te werken dan nodig is, en dat geldt ook voor lezen. In plaats van de volledige breedte van het kijkvenster te gebruiken, probeer je dingen te verfijnen en in evenwicht te brengen met je grotere lettergrootte om te krijgen minder tekens op elke regel tekst. Je goede plek kan variëren, hoewel veel mensen ergens tussen de 45-75 tekens per regel suggereren om te helpen beperken hoe ver het oog van de lezer moet werken om van links naar rechts te gaan. Chris heeft een bookmarklet om tekens te tellen, maar we hebben ook de ch eenheid in CSS om voorspelbare resultaten te krijgen.
• Verhoog de lijnhoogte: Een standaard lijnhoogte zal verpletterd aanvoelen. Het is grappig, maar meer ruimte tussen de lijnen (tot op zekere hoogte natuurlijk) is minder werk voor de ogen, wat in tegenspraak lijkt met het karakter-per-regeladvies waarbij we over het algemeen willen dat ogen een kortere afstand afleggen. Een lijnhoogte tussen 1.2 en 1.5 lijkt een vrij typisch bereik te zijn voor inhoud in lange vorm.

Als je het nog niet eerder hebt gezien, Pierrick Calvez heeft een geweldige "vijf minuten" gids voor typografie dat verpakt in een bos van laaghangend fruit zoals deze.

Ontwerp voor extra ademruimte

U bent misschien gewend om 'boven de plooi' te ontwerpen waar onroerend goed een eersteklas handelsartikel is. Dat is net zoiets als eigendom aan het strand in de webwereld, omdat we hier gewend zijn om waardevolle dingen in te pakken, zoals heldenbanners, oproepen tot actie en al het andere om iets te helpen verkopen. Boven de vouw kan veel lijken op een dicht stedelijk centrum met veel verkeer en hoogbouw.

Artikelen zijn anders. Ze laten je een beetje uitrekken. Als we de analogie van stadsontwikkeling wat verder willen doorvoeren, hebben artikelen het areaal om te leunen in een "less is more" soort ontwerpbenadering. Dat is wat ogenschijnlijk kleine ontwerpkeuzes - zoals type - zo belangrijk maakt voor de algehele ervaring.

Bekijk het voorbeeld hieronder. De link onderstreept dat er iets meer ruimte is om te ademen (in het bijzonder verschijnen ze onder de dalers). Dit is eigenlijk iets dat je voor de hele site kunt inschakelen, maar het ziet er vooral leuk uit op artikelpagina's omdat het de leesbaarheid verhoogt. Dat is het soort subtiele ontwerpkeuze dat bijdraagt ​​aan extra ademruimte.

text-underline-position: under; is de lijn van CSS die ervoor zorgt dat dit werkt. Van nature, text-decoration moet worden ingesteld op iets anders dan none (underline in dit geval), ook.

Het bovenstaande voorbeeld bevat ook: text-decoration-thickness, waarmee de dikte van onderstrepingen (en andere lijntypen) wordt gewijzigd. U kunt deze CSS-eigenschap gebruiken om de dikte van een lijn af te stemmen op de grootte en/of het gewicht van een lettertype.

Hier is een volledig voorbeeld:

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

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

Maar voordat je reikt naar de text-decoration steno, Šime Vidas heeft een paar "haperingen" als het gaat om het gebruik ervan die de moeite van het bekijken waard zijn.

Naar de inhoud leiden

Drop caps zijn gestileerde letters die aan het begin van een document of documentsectie kunnen worden geplaatst. Ze werden ooit gebruikt in Latijnse teksten, maar tegenwoordig worden ze meestal om decoratieve redenen gebruikt.

Persoonlijk denk ik dat drop-caps de leesbaarheid belemmeren. Ze kunnen echter een leuke manier zijn om een ​​lezer naar de hoofdinhoud te "leiden", en ze zouden geen ernstige toegankelijkheidsproblemen moeten veroorzaken zolang u de ::first-letter pseudo-element. Er zijn andere (oudere) methoden die meer HTML en CSS omvatten, evenals het gebruik van ARIA-attributen om de inhoud toegankelijk te houden.

gebruik ::first-letter, ziet de CSS er ongeveer zo uit:

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

Het zou zeker leuk zijn als we de konden gebruiken initial-letter eigendom, maar er is vrijwel geen ondersteuning voor op het moment dat ik dit schrijf. Als we het hadden, zou al die wiskunde voor lettergrootte en regelhoogte voor ons worden berekend!

CodePen daagde mensen enkele jaren geleden uit om te pronken met hun drop-cap-stylingvaardigheden en je kunt er een hele reeks mooie voorbeelden van zien in deze verzameling.

Ga naar hoofdinhoud

Schermlezers stellen gebruikers in staat om naar de hoofdinhoud te gaan, zolang deze maar binnen een <main> element. Degenen die door websites navigeren door te tikken, profiteren hier echter niet van. In plaats daarvan moeten we een ankerlink 'overslaan naar hoofdinhoud' maken. Deze link is gewoonlijk verborgen maar wordt onthuld zodra de gebruiker zijn eerste tabblad maakt (dwz tonen op focus).

Het ziet er ongeveer zo uit:

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

Er zijn natuurlijk andere manieren om het aan te pakken. Hier zijn een paar diepere duiken over het maken van skip-links.

Naadloze beelden

Ik hou van de illustraties in dit artikel. Ondanks hoe ongelooflijk ze eruitzien, vragen ze niet al te veel cognitieve aandacht. Ze introduceren korte momenten van verrukking, maar suggereren ook dat het artikel zelf iets belangrijkers te zeggen heeft. Dit komt deels door het gebruik van transparantie, terwijl rechthoekige afbeeldingen meer negatieve ruimte innemen en dus meer aandacht vragen (wat prima is als dat het gewenste effect is en afbeeldingen cruciaal zijn voor het verhaal).

Het is echter belangrijk om te weten dat de afbeeldingen eigenlijk helemaal niet transparant zijn, maar in plaats daarvan niet-transparante JPEG's met dezelfde achtergrondkleur als de inhoud. Ik neem aan dat dit is om de grootte van de afbeeldingen kleiner te houden in vergelijking met PNG's die transparantie ondersteunen.

Het nadeel van het "faken" van een transparante achtergrond als deze is dat er extra bedrog (en onderhoud) voor nodig is om een gebruikersinterface voor donkere modus als uw site er een aanbiedt. Als de illustraties vrij vlak en eenvoudig zijn, is SVG misschien de juiste keuze, omdat het klein en schaalbaar is en in staat is om op te gaan in elke achtergrond.

Maar als u gebonden bent aan het gebruik van rasterafbeeldingen en liever met PNG-bestanden werkt voor transparantie, wilt u kijken naar het gebruik van responsieve afbeeldingen en loading="lazy" attribuut voor snellere laadtijden.

Leg de nadruk op het type en de semantiek

Misschien heb je er weinig over te zeggen hoe or WAAR iemand leest tegenwoordig inhoud op internet. Of de gebruiker het nu ontvangt in een RSS-feed, het per e-mail ontvangt, het ziet kopiëren en plakken van een collega, het op een geschraapte site vindt, of wat dan ook, uw inhoud kan er uitzien anders dan je liever hebt. Je zou kunnen ontwerpen wat volgens jou het mooiste artikel in het hele land is en de gebruiker kan dat nog steeds smash die Reader Mode-knop tot uw ontsteltenis.

Dat is prima! De vindbaarheid van inhoud is net zo belangrijk als het ontwerp ervan, en veel gebruikers hebben hun eigen manieren om inhoud en voorkeuren te ontdekken voor wat een goede leeservaring maakt.

Maar er zijn redenen waarom iemand een Reader-modus zou willen. Ten eerste is het alsof je helemaal geen CSS ziet. Daarmee bedoel ik Safari's Reader-modus or Dappere SpeedReader, die machine learning gebruiken om artikelen te detecteren. Er hoeven geen CSS-, JavaScript- of niet-artikelafbeeldingen te worden opgehaald of uitgevoerd, wat de prestaties verbetert en ook advertenties en tracking blokkeert.

Dit soort "brutaal" minimalisme” legt de nadruk op de inhoud in plaats van de stijlen. Dus je zou eigenlijk kunnen willen om de eigenzinnige leesstijlen van een browser specifiek voor dat doel te omarmen.

De manier om dat te doen is niet door CSS te gebruiken, maar door meer aandacht te besteden aan uw HTML. Lezermodi werken het beste met opmaak die gebruikmaakt van eenvoudige, semantische, artikelgerelateerde HTML. Je moet meer doen dan alleen maar slaan tags rond het artikel om er het meeste uit te halen.

Misschien vindt u dat een minimaal ontwerp dat de nadruk legt op leesbaarheid in plaats van gladheid, eigenlijk een goede strategie is om te gebruiken in het ontwerp van uw site. Ik raad je ten zeerste aan om de post van Robin op de te lezen “kleinste” CSS” voor een solide leeservaring.

Verzameling van artikelen in lange vorm!

Ik heb veel gedeeld van wat volgens mij zorgt voor een geweldige leeservaring voor lange artikelen op internet. Maar zien is geloven en ik heb een aantal voorbeelden verzameld die laten zien wat we hebben behandeld.