Tech Thursday: Så gör du din blogg lätt att läsa

Det viktigaste för en bloggare är att locka sina besökare till läsning. Få dem att försjunka och förlora sig i innehållet och komma tillbaka om och om igen. Jobbar man mycket SEO-optimering så vill man att personer som klickar på en länk till ens sajt hittar det den letar efter snabbt och förhoppningsvis klickar vidare och blir kvar.

För att uppnå det här så är läsbarheten jätteviktig! Att locka nya läsare med häftiga rubriker, smart SEO och fina bilder är jättebra. Men om du inte kan konvertera den nya läsaren till återkommande läsare och slutligen en trogen följare så är det inte mycket värt. Dina följare är ditt kapital och därför är det dags att optimera läsbarheten!

läsbarhet blogg webben

Riktlinjer för läsbarhet som nämns i den här artikeln kommer från Internetstiftelsen guide om att skriva för webben och Post- och telestyrelsens riktlinjer för läsbarhet på webben.

Gör din blogg tillgänglig för fler

Det uppskattas att 20% av den svenska befolkningen har lässvårigheter, 5-8% uppskattas ha dyslexi. Det betyder att du kan anta att var femte person som kommer till din blogg antagligen har problem med att läsa.

Det finns en rad viktiga saker du kan göra själv i designen av din blogg och när du skriver för att underlätta läsningen för dessa personer. Genom att göra texten mer tillgänglig förbättrar du såklart samtidigt för alla dina läsare. Att formatera texten och göra den mer läsbar uppskattas också av Google och förbättrar din SEO-kraft. Win-win-win alltså.

När du skriver

Blankrad

När du skriver text på webben måste du tänka extra mycket på luft i texten. Steg ett är att göra betydligt fler styckeindelningar än du skulle gjort i en text för tryck. Internetstiftelsen har en bra tumregel: ”Ny tanke – nytt stycke”.

När jag säger nytt stycke menar jag inte bara ny rad utan det ska vara en blankrad emellan. I kod betyder det att de ska bli en ny paragraf-tagg <p>Din text</p>. Detta fixar de allra flesta bloggverktygen automatiskt när du använder vanligt enter för nytt stycke.

Mellanrubriker

Mellanrubriker hjälper dina läsare att navigera i texten och är något som Google verkligen gillar och där du kan förbättra din SEO. Använd mellanrubriker för att göra luft och struktur i texten. I en personlig text kan det såklart kännas lite konstigt/stelt med mellanrubriker. Det passar inte alla. Om du vill försöka med mellanrubriker även i mer personligt drivna texter kan du titta på mellanrubrikerna i magasin och tidningars intervjuer. Där finns inspiration att hämta!

Vad som är väldigt viktigt när det gäller mellanrubriker är att du formaterar dem som en mellanrubrik. I din texteditor har du förhoppningsvis en rullist eller liknande där du kan välja rubrik 2, rubrik 3 och så vidare. Om du inte har det får du använda html-läget och skriva <h2>Rubrik2</h2> eller <h3>Rubrik3</h3> manuellt.

Om du inte formaterar mellanrubrikerna som riktiga mellanrubriker kommer inte Google läsa av dem rätt. Genom att använda rätt formatering kan du också göra en enhetlig designstil för dina mellanrubriker.

H1 ska i princip bara användas för huvudrubriker, som inläggsrubriken. Därför är det först och främst h2 du ska använda som mellanrubriker. När du behöver dela upp texten som redan ligger under en h2-rubrik använder du h3 och så vidare.

Bilder och designcitat

Andra sätt att lufta upp texten och göra den mer lättläst är ju såklart att lägga in bilder eller lyfta upp citat som designcitat. Ett designcitat kan ha ett större typsnitt, kanske en färg och gott om padding runt så det blir mycket luft. Arbetssättet i min tutorial för hur du designar ett sponsormeddelande i CSS går jättebra att anpassa för att göra en egen designcitatstil.

Använd radbryt, mellanrubriker, bilder och designcitat för att lufta upp texten.

Fetstil, sammanfattning och faktarutor

Att använda fetstil för att lyfta fram viktiga nyckelord i ett stycke kan hjälpa läsaren att hitta dit. Men använd med måtta annars blir det lätt otydligt. Tänk på vad läsare kan tänkas leta efter i inlägget och hjälp dem hitta dit snabbt.

Att lyfta upp en paragraf i mitten av ett längre textstycke med fetstil kan också skapa en landingsplats för läsaren.

Faktarutor, en sammanfattning eller en lista med innehåll i början av ett inlägg hjälper också läsbarheten och hjälper läsaren att guida sig i texten. Även det här passar givetvis inte alla typer av inlägg. Men guider, recept och recensioner är jättebra att förtydliga med den här typen av formatering.

En stil för faktarutor kan du enkelt göra genom att göra en särskild div-stil, som står beskrivet längst ned i min CSS guide till att koda ett sponsormeddelande. En lite annan bakgrundsfärg eller en ramlinje kan räcka för att skilja den från det övriga innehållet.

Länka logiskt

Många skummar igenom text påväg mot relevant information man letar efter och vissa använder skärmläsare för att ta till sig av ditt innehåll. Därför är det superviktigt och även bra för din SEO att länka rätt.

Länktexten ska säga något om var länken leder. Helst ska man undvika texter som ”Läs mer om” eller ”Klicka här för”. Länka istället det som säger något om var texten leder: ”BetterBloggers har en toppenguide om SEO”. Att bara länka text som ”läs mer” eller ”receptet hittar du här” är inte ett korrekt sätt att länka och gör texten svårnavigerad och försämrar din SEO.

I din bloggdesign

Typsnitt

Typsnitt eller teckensnitt är det svenska ordet för ”font” och är en av de mest grundläggande och viktigaste sakerna för att göra din blogg läsbar. Förr i världen sa man att såkallade sans serif-typsnitt (som t.ex. Arial) var bäst för läsning på webben. Nu mer används ofta serif-typsnitt (som Times new roman eller Georgia) också i webbtexter eftersom våra skärmar har blivit mycket bättre.

Så det spelar egentligen inte så stor roll om du väljer ett typsnitt med eller utan serifer. Det som däremot spelar roll är att nypsnittet ska vara lätt att läsa. Kolla på sidor du själv tycker är lätta att läsa, högermarkera lite text, välj ”inspektera” (i Chrome) och kolla efter ”font-family” i developer-rutan. Där kan du se vilket typsnitt den sidan använt.

Populära gratistypsnitt för webben

Serif-typsnitt: Georgia, Merriweather, Roboto slab, Droid Serif och Libre Baskerville.

Sans serif-typsnitt: Open sans, Lato, Avenir, Source sans pro, Roboto, PT Sans

underbaraclara-screenshot
Underbara Clara använder typsnittet Libre Baskerville och ett radavstånd på 175%.

Radavstånd

När du valt ett bra typsnitt så kommer vi till det här med radavstånd. Standard i webbformatering är ett radavstånd (line-height i CSS) på 120% (1.2em). Det blir lätt lite för tajt. Bättre är mellan 150-175%. Ju bredare spalter du har för texten, alltså hur långa raderna blir på bloggen, desto mer utrymme behöver du för att göra det läsbart.

För mobilen kan du behöva ha lite mer radavstånd än du har i desktop.

» Läs mer: Tech Thursday: Så mobilanpassar du din blogg 

Radlängd och spaltbredd

Långa rader är svåra att läsa. Ögat vill kunna flytta sig enkelt från början till slutet av radet och undersökningar har visat att optimalt är ungefär 80 tecken per rad. Vill du veta hur du ligger till? Markera en mening på din blogg som fyller hela spalten, kopiera och klistra in i rutan på raknaord.se/.

Det enklaste sättet att begränsa längden på raderna är att göra själva bredden på hela din entry-content-behållare smalare. Det tråkiga då är att ju att bilderna också blir mindre.

Stora bilder är ju något som är otroligt viktigt för de flesta som bloggar. Där kan man, som jag har gjort, inspireras av Metro som designat sina bloggar med smalare textspalter och bredare bilder.

atilio-screenshot
På bloggen Atilio av Sandra Hjort, som ligger på Metro, är bilderna breda men textspalterna smalare.

Annars så får man såklart göra en avvägning, där man kanske tillåter sig att ha 100 tecken långa meningar för att kunna få lite bredare bilder. Men har du möjlighet att ta hjälp i designen eller när du shoppar efter ett nytt bloggtema, kolla efter ett med stora bilder men smalare textspalter.

Vänsterjustera texten – undvik jämna spalter

En jätteviktig grej för läsbarheten är att vänsterjustera texten. Så att det blir en ojämn höger-kant om ni tänker. För personer med lässvårigheter är det här jätteviktigt. Att ha jämna spalter, där texten sprids ut för att göra kanten jämn är INTE läsbart. Enda gången man kan göra det är när man skriver i spalter, t.ex. i en tidning, med väldigt korta rader.
I CSS skrivs detta:

p {

text-align: left;

}

 

Kontrollera texten med Yoast eller webbverktyg

Tillägget Yoast SEO för WordPress har nu mer en liten indikator för läsbarhet som precis som indikatorn för SEO ger en massa bra tips för hur du förbättrar textens läsbarhet. Där finns även viktiga delar som meningslängd och liknande med.
Andra sidor där du kan kontrollera din bloggs och dina texters läsbarhet är:

>> lix.se
>> webpagefx.com/tools/read-able/

Känns det som för mycket? Kom då ihåg att det är bättre att göra något litet för läsbarheten än ingenting alls. Lycka till!

Elin Häggberg

Digital designer, medievetare och journalist. Bloggar om teknik och internet ur ett kreativt perspektiv på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

7 Comments
  1. Hallå! Älskar dina inlägg, så bra!

    En fundering angående spaltbredd, går det att justera med en class/ID i CSS eller hur gör man annars på bästa sätt om man fortfarande vill hålla bredden på bilderna?

    1. Så som jag har gjort (inspirerat av Metro) är att jag har stylat bilder i format ”full” (i WordPress” att vara bredare än containern för content (width: 108% eller vad du behöver och justera placeringen med left: -5% ). I chrome högerklicka på en bild i min blogg och kolla ”inspektera” så kan du inspireras av koden!

      Man kan också experimentera med stylingen av p-raggar men det gäller att vara extremt specifik för eftersom paragrafer finns på massa ställen så kan det lätt bli lite knasigt!

      Jättekul att du gillar inläggen!! 🙂

      /Elin

  2. Ok, är inte riktigt med fortfarande. Så du ändrar container till den storleken du vill ha så att texten blir i rätt bredd (i php eller css eller båda?) Och sedan ändrar du bilderna – vart/hur gör du detta? Hittar ingenstans i CSS där jag sätter specifika bildstorlekar (endast post-entry img med max width 100%). Sorry för följdfrågor, men väldigt tacksam för hjälp! 🙂

    1. Precis. Content-containern till den bredd jag vill ha för texten och sen bilderna till det jag vill ha. Allt CSS.
      Det är lite meckigt att förklara exakt eftersom vilka alternativ man har för bilder skiljer sig mellan olika tema. Men post-entry img kan du exempelvis då ändra i CSS till att ha en Max-width över 100% som jag skrev ovan. Det du kommer behöva göra är dock en justering ned mediaqueries (se mitt tidigare inlägg om mobilanpassning) så att bilderna fortfarande har Max-width 100% på mobilen 🙂 Lycka till!

  3. Vilket bra inlägg! Mycket håller jag med om, och det särskilt det där med att man ska ta med bilder och inte bara trycka in text. Men något som ibland blir problematiskt är när man har valt ett visst WP-tema som sedan visar sig vara mindre bra då man vill få blogginläggen så läsbara som möjligt. Har faktiskt skrotat ett tema och börjat om enbart på grund av detta. Det är inte alltid som fint tema och läsbarhet går ihop men det borde det ju göra när man har för avsikt att kommunicera via blogg, eller hur?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>