Suunnittelu pitkille artikkeleille

Kauniin "artikkelin" suunnittelu on tehty monella tavalla. Toisin kuin esimerkiksi kotisivuilla, pitkässä artikkelissa ei ole niinkään kyse käyttöliittymän suunnittelusta kuin tekstin suunnittelusta tavalla, joka luo rennon ja mukavan lukukokemuksen.

Tämä johtuu siitä, että artikkelit käsittelevät pitkäkestoista sisältöä, jota puolestaan ​​yleensä arvostetaan "aika sivulla" -vuorovaikutuksessa käyttäjien kanssa. Haluamme jonkun lukevan täydellisen kertomuksen. On luonnollinen väli, kun joku osuu artikkeliin ja lukee kaikki sanat. Ja toivottavasti tämä tila on tarpeeksi mukaansatempaava, jotta se ei vain pidä käyttäjän sisällä, vaan myös herättää ajatuksia, ideoita ja mahdollisesti toimia. Ainakin näin toivon, kun saan huomiosi ja pääset lukemasi artikkelin läpi.

On tasapaino. Toisaalta kuulemme sen "Kukaan ei lue Internetiä." Toisaalta pitkä artikkeli vaatii huolellista huomiota. Ottaen huomioon sisältömarkkinoinnin nykyisen arvon ja käyttäjien kasvavan kärsimättömyyden, lukijoiden houkutteleminen mahdollisimman pitkään pitäisi olla keskeinen huolenaihe. Katsotaanpa joitain parhaita käytäntöjä ja esimerkkejä uskomattomista artikkelisivuista saadaksesi paremman käsityksen siitä, mikä tekee pitkien artikkelien visuaalisesti houkuttelevan lukukokemuksen (käyttäjäkokemuksesta tinkimättä) ja kuinka voimme toistaa tehosteet.

Nopeat voitot

Haluan listata nopeasti ne asiat, jotka mielestäni saattavat olla jo ilmeisiä monille teistä, mutta jotka ovat tehokkaita sisällön luettavuuden kannalta:

• Suurenna fonttikokoa: Tiedämme, että 16px on oletusarvo ja sopii täydellisesti moniin malleihin, mutta suurempi fonttikoko on houkutteleva, koska se tarkoittaa, että käyttäjä voi vapaasti nojata taaksepäin ja asettua sisään ilman, että hänen tarvitsee kääntyä eteenpäin ruutua vasten lukeakseen.
• Tavoite merkkejä riviä kohden: Hyvin harvat tuntemani ihmiset haluavat työskennellä kovemmin kuin heidän tarvitsee, ja se pätee myös lukemiseen. Sen sijaan, että käytät koko näkymän leveyttä, yritä kaventaa asioita ja tasapainottaa se suuremmalla kirjasinkoolla vähemmän merkkejä jokaisella tekstirivillä. Oma suosikkisi voi vaihdella, vaikka monet ehdottavatkin 45–75 merkkiä riviä kohden, mikä auttaa rajoittamaan sitä, kuinka pitkälle lukijan silmän on työskenneltävä siirtyäkseen vasemmalta oikealle. Chrisillä on a kirjanmerkki auttaa laskemaan merkkejä, mutta meillä on myös ch yksikkö CSS:ssä ennustettavien tulosten saamiseksi.
• Lisää rivin korkeutta: Oletusviivan korkeus tuntuu murtuneelta. Se on hassua, mutta enemmän tilaa rivien välillä (tietysti tiettyyn pisteeseen asti) on vähemmän työtä silmille, mikä näyttää ristiriidalta merkkejä kohti riviä koskevien neuvojen kanssa, joissa haluamme yleensä silmien kulkevan lyhyemmän matkan. Viivan korkeus välillä 1.2 ja 1.5 näyttää olevan melko tyypillinen alue pitkälle sisällölle.

Jos et ole nähnyt sitä ennen, Pierrick Calvezilla on loistava "viisi minuuttia" typografian opas joka sisältää nippu matalalla roikkuvia hedelmiä, kuten nämä.

Suunnittelu lisähengitystilaan

Saatat olla tottunut suunnittelemaan "taidon yläpuolella", jossa kiinteistö on tärkein hyödyke. Se on tavallaan kuin rantakiinteistö verkkomaailmassa, koska siellä olemme tottuneet pakkaamaan arvokkaita tavaroita, kuten sankaribannereita, toimintakehotuksia ja kaikkea muuta, joka auttaa myymään jotakin. Taitteen yläpuolella voi olla paljon kuin tiheä kaupunkikeskusta, jossa on paljon liikennettä ja korkeita rakennuksia.

Artikkelit ovat erilaisia. Niiden avulla voit venytellä hieman. Jos haluamme viedä kaupunkikehityksen analogiaa hieman pidemmälle, artikkeleissa on tilaa nojautua "vähemmän on enemmän" -tyyppiseen suunnittelutapaan. Siksi näennäisesti pienet suunnitteluvalinnat – kuten tyyppi – ovat niin tärkeitä kokonaiskokemuksen kannalta.

Katso alla oleva esimerkki. Linkin alleviivauksissa on hieman enemmän tilaa hengittää (erityisesti ne näkyvät laskeutuvien alapuolella). Tämä on itse asiassa jotain, jonka voit ottaa käyttöön koko sivustolla, mutta näyttää erityisen hyvältä artikkelisivuilla, koska se parantaa luettavuutta. Se on sellainen hienovarainen suunnitteluvalinta, joka lisää hengitystilaa.

text-underline-position: under; on CSS-linja, joka saa tämän toimimaan. Luonnollisesti, text-decoration täytyy asettaa johonkin muuhun kuin none (underline myös tässä tapauksessa).

Yllä oleva esimerkki sisältää myös text-decoration-thickness, joka muuttaa alleviivausten (ja muiden viivatyyppien) paksuutta. Tämän CSS-ominaisuuden avulla voit sovittaa viivan paksuuden fontin kokoon ja/tai painoon.

Tässä on täydellinen esimerkki:

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

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

Mutta ennen kuin saavutat text-decoration lyhenne, Šime Vidasilla on muutama "huijaus" kun on kyse sen käytöstä, jotka kannattaa tarkistaa.

Sisältöön johtaminen

Pudotuskorkit ovat tyyliteltyjä kirjaimia, jotka voidaan sijoittaa asiakirjan tai asiakirjaosan alkuun. Niitä käytettiin joskus latinalaisissa teksteissä, mutta nykyään niitä käytetään enimmäkseen koristeellisista syistä.

Henkilökohtaisesti uskon, että pudotuskorkit haittaavat luettavuutta. Ne voivat kuitenkin olla mukava tapa "johtaa" lukija pääsisältöön, eivätkä ne saa aiheuttaa vakavia saavutettavuusongelmia niin kauan kuin käytät ::first-letter pseudoelementti. Siellä on muu (vanhempi) menetelmät jotka sisältävät enemmän HTML:ää ja CSS:ää sekä ARIA-attribuuttien käyttöä, jotta sisältö pysyy saatavilla.

Käyttäminen ::first-letter, CSS näyttäisi suunnilleen tältä:

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

Olisi varmasti mukavaa, jos voisimme käyttää initial-letter omaisuutta, mutta sille ei juurikaan ole tukea kirjoittaessani tätä. Jos meillä olisi se, kaikki kirjasinkoon ja rivin korkeuden matematiikka laskettaisiin puolestamme!

CodePen haastoi ihmiset esittelemään drop-cap-muotoilutaitojaan useita vuosia sitten, ja voit nähdä koko joukon siistejä esimerkkejä siitä tämä kokoelma.

Pääsisältö

Näytönlukuohjelmien avulla käyttäjät voivat siirtyä pääsisältöön, kunhan se käärii sen a <main> elementti. Ne, jotka liikkuvat verkkosivuilla välilehdillä, eivät kuitenkaan hyödy tästä. Sen sijaan meidän on luotava "Skip to main content" -ankkurilinkki. Tämä linkki on tavallisesti piilotettu, mutta se paljastetaan, kun käyttäjä tekee ensimmäisen välilehden (eli näkyy kohdistettaessa).

Se näyttää tältä:

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

On tietysti muitakin tapoja toimia. Tässä on pari syvempää sukellusta ohituslinkkien luomiseen.

Saumaton grafiikka

Rakastan kuvituksia Tämä artikkeli. Huolimatta siitä, kuinka uskomattomilta ne näyttävät, ne eivät vaadi liikaa kognitiivista huomiota. Ne esittelevät lyhyitä ilon hetkiä, mutta viittaavat myös siihen, että artikkelissa itsessään on jotain tärkeämpää sanottavaa. Osittain tämä johtuu läpinäkyvyyden käytöstä, kun taas suorakaiteen muotoiset kuvat vangitsevat enemmän negatiivista tilaa ja vaativat siksi enemmän huomiota (mikä on hyvä, jos se on haluttu vaikutus ja kuvat ovat tarinan kannalta tärkeitä).

On kuitenkin tärkeää tietää, että kuvat eivät itse asiassa ole lainkaan läpinäkyviä, vaan ne ovat läpinäkymättömiä JPEG-tiedostoja, joiden taustaväri on sama kuin sisältö. Oletan, että tämä pitää kuvien koon pienempänä verrattuna läpinäkyvyyttä tukeviin PNG-tiedostoihin.

Tällaisen läpinäkyvän taustan "tekelemisen" haittapuoli on, että se vaatisi ylimääräistä huijausta (ja ylläpitoa) tumman tilan käyttöliittymä jos sivustosi sattuu tarjoamaan sellaisen. Jos kuvat ovat melko tasaisia ​​ja yksinkertaisia, SVG saattaa olla oikea tapa, koska se on pieni, skaalautuva ja pystyy sulautumaan mihin tahansa taustaan.

Mutta jos käytät rasterikuvia ja käytät mieluummin PNG-tiedostoja läpinäkyvyyden vuoksi, sinun kannattaa harkita herkät kuvat ja loading="lazy" ominaisuus nopeuttaaksesi latausaikoja.

Keskity tyyppiin ja semantiikkaan

Sinulla voi olla hyvin vähän sananvaltaa miten or jossa joku lukee nykyään sisältöä verkossa. Saako käyttäjä sen RSS-syötteenä, saako sen toimitettuna sähköpostitse, näkeekö sen kopioituna ja liitettuna kollegalta, löytää sen raapuneelta sivustolta tai mitä tahansa, sisältösi saattaa näyttää eri kuin haluat. Voit suunnitella mielestäsi upeimman artikkelin koko maassa, ja käyttäjä voi silti tehdä sen murskaa se Reader Mode -painike tyrmistyksesi.

Se on okei! Sisällön löydettävyys on yhtä tärkeää kuin sen suunnittelu, ja monilla käyttäjillä on omat tapansa löytää sisältöä ja mieltymyksensä siitä, mikä tekee hyvän lukukokemuksen.

Mutta on syitä, miksi joku haluaisi lukijatilan. Ensinnäkin se on kuin "ei näe CSS:ää" ollenkaan. Tällä tarkoitan Safarin lukutila or Rohkea SpeedReader, jotka käyttävät koneoppimista artikkeleiden havaitsemiseen. CSS-, JavaScript- tai muita kuin artikkelikuvia ei haeta tai suoriteta, mikä parantaa suorituskykyä ja estää myös mainokset ja seurannan.

Tällainen "raaka minimalismi” keskittyy sisältöön tyylien sijaan. Eli saatat oikeasti haluta omaksua selaimen mielipiteitä erityisesti tähän tarkoitukseen tarkoitetut lukutyylit.

Tapa tehdä tämä ei ole CSS:n avulla, vaan kiinnittämällä enemmän huomiota HTML-koodiisi. Lukijatilat toimivat parhaiten merkintöjen kanssa, jotka käyttävät yksinkertaista, semanttista, artikkeliin liittyvää HTML-koodia. Sinun on tehtävä enemmän kuin pelkkä lyöminen tagit artikkelin ympärille saadaksesi siitä kaiken irti.

Saatat vain huomata, että minimaalinen muotoilu, joka korostaa luettavuutta liukkauden sijaan, on itse asiassa hyvä strategia käyttää sivustosi suunnittelussa. Suosittelen lämpimästi lukemaan Robinin postauksen aiheesta "pienin CSS” takaa vankan lukukokemuksen.

Yhteenveto pitkistä artikkeleista!

Olen jakanut paljon asioita, jotka tekevät mielestäni erinomaisen lukukokemuksen pitkistä artikkeleista verkossa. Mutta näkeminen on uskomista, ja olen kerännyt joukon esimerkkejä, jotka osoittavat, mitä olemme käsitelleet.