Så skriver du för webben

Inledning och ingress

Den viktigaste informationen ska alltid vara högst upp. Inledningen ska vara rakt på sak. Tänk även på att inledningen ska nämna ord som användare söker på. Det gör sidan lättare att hitta vid sökningar.

Riktlinjer för inledning och ingress

  • Inledningar på webbsidor ska vara formaterade som brödtext.
  • Inledningar på webbsidor ska aldrig vara fetstilta.
  • Formateringen "nyhetsingress" får endast förekomma i nyhetsartiklar, inte i korta meddelanden eller på fasta sidor.
  • Formateringen "inledning på genomgångssida" får endast förekomma på genomgångssidor.

Rubriker

Rubriker ger användaren en överblick av sidan. Rubrikens syfte är att hjälpa användaren att förstå vad sidan handlar om. En välformulerad rubrik gör dessutom att sidan hamnar högt upp på sökomotorernas träfflistor.

Riktlinjer för rubriker

  • Rubriker ska vara tydliga och beskrivande.
  • Använd nyckelord från texten i rubrikerna.
  • Använd underrubriker.
    • Dela upp texten i mindre delar och sätt underrubriker. Det hjälper användaren att få en överblick och snabbt hitta rätt.
  • Rubriker får inte vara för långa.
    • I textmoduler, meddelanden, nyheter och evenemang: Max 65 tecken.
  • Det är inte tillåtet att feta eller kursivera rubriker.
    • Det skapar felaktiga taggar i html-koden vilket gör den otillgänglig.
  • Rubriker ska vara formaterade som rubriker: rubrik 1 (h1), rubrik 2 (h2) osv.
    • Rubriknivåerna finns i html-koden. Rubrik 1 får en tagg som heter h1, rubrik 2 blir h2 osv. Skärmläsare använder html-koden för att läsa webbsidor. Om rubrikerna har felaktig formatering blir sidan omöjlig att överblicka för personer som inte kan se sidan och är beroende av skärmläsare.
  • Rubriknivåerna ska återge strukturen på sidan korrekt.
    • En h2-rubrik ska vara underrubrik till närmaste h1 och h3 ska vara underrubrik till närmaste h2.

Gruppera information

Du underlättar för användaren att hitta rätt om du delar upp innehållet i mindre grupper. Gör dessa grupper logiska för användaren.

Säg att användaren Anna som är anställd på universitetet vill ta ledigt för studier. När Anna hittar sidan som handlar om ledighet kommer hon att söka med blicken efter den del som handlar om studieledighet. Om Anna är blind kommer hon att låta skärmläsaren att läsa upp rubrikerna på sidan och direkt hoppa till den underrubrik som är relevant för henne.

Därför underlättar vi för Anna om vi lägger upp innehållet i grupper med tydliga och konkreta underrubriker. Kom ihåg att rubrikerna ska vara formaterade på rätt sätt, dvs. huvudrubriken ska vara formaterad som rubrik 1 (h1) och underrubrikerna som rubrik 2 (h2), rubrik 3 (h3) osv.

Här är ett exempel på hur en sådan gruppering kan se ut:

Rubriknivå h1: Ledighet

Text som beskriver olika typer av ledigheter, med ord som vi vet att folk söker på.

Rubriknivå h2: Föräldraledighet

Text om föräldraledighet.

Rubriknivå h2: Annan anställning

Text om ledighet för annan anställning.

Rubriknivå h2: Studier

Text om ledighet för studier.

Rubriknivå h2: Närståendevård, flytt och andra privata angelägenheter

Text om ledighet för närståendevård, flytt och andra privata angelägenheter.

Rubriknivå h2: Fackligt engagemang

Text om ledighet för fackligt engagemang.


Skärmklipp som visar hur exemplet om ledighet ser ut på en webbsida.

Så ser de olika rubriknivåerna ut på skärmen.

Länkar

Formulera länktexter med omsorg. En länktext ska vara tydlig och begriplig även utan den omgivande texten. En användare ska utifrån länktexten kunna förstå vad länken leder till.

Detta är särskilt viktigt för personer som använder skärmläsare. Ibland kan de navigera på en sida genom att låta skärmläsaren läsa upp länkarna. Om det bara står "klicka här" i länktexten är det omöjligt att förstå vad länken leder till.

Länktexten är den text som är synlig på webbsidan och är markerad som länk.

  • Användare vet när det går att klicka på länkar. Du behöver inte tala om det.
  • Skriv hellre ”Information om seminariet” än ”För information om seminariet, klicka här”.
  • Det är onödigt att inleda länkar med t.ex. ”Läs mer om …” och ”Gå till …”
  • Om länken går till en annan webbplats ska det framgå ur länktexten. Du bör skriva ut organisationens eller webbplatsens namn i slutet av länktexten, till exempel: ”Regler för kontroll av livsmedel hos Livsmedelsverket.”
  • Om en länk leder till ett dokument ska det framgå i länktexten. T.ex. ”Uppsala universitets inspel till regeringens forskningspolitik från och med 2021 (pdf)”
  • Länktexter som är formulerade likadant ska leda till samma destination.
  • Och omvänt: Två länktexter som är formulerade på olika sätt får inte leda till samma destination.
  • Du behöver inte fylla i fältet "länkbeskrivning" när du skapar länken. Endast länktexten är relevant.

Beskriv alla bilder med alt-texter (som i Sitevision heter bildbeskrivningar). De bilder som inte behöver ha alt-texter är bilder som ligger i bakgrunden, i sidhuvudet och i sidfoten. Dessa kallas dekorativa. Alla andra bilder, dvs. alla bilder som du som redaktör lägger upp, ska ha alt-text.

  • En alt-text ska så kortfattat som möjligt beskriva vad bilden föreställer.
  • I fall där det är viktigt för sammanhanget ska även känslan i bilden framgå. Om du till exempel har valt att bildsätta en sida som handlar om hur roligt det är att läsa vid Uppsala universitet med en bild på leende studenter ska det framgå i alt-texten att studenterna ler.
  • Om du beskriver känslan i bilden ska du undvika subjektiva beskrivningar. Skriv t.ex. ”studenter promenerar i universitetsparken en solig dag” i stället för att skriva att vädret är vackert. "Solig" är beskrivande, "vackert" är subjektivt.
  • Om bilden är en illustration ska det framgå i alt-texten.
  • Om du bildsätter till exempel en nyhet med en porträttbild på en person som du har intervjuat ska det stå: "Porträtt på Förnamn Efternamn". Du behöver inte beskriva några andra detaljer i bilden.
  • När du skriver alt-texter till diagram ska insikten framgå. Du behöver inte beskriva alla detaljer.
  • Tänk på att syftet med alt-texter alltid är att underlätta för användaren. Hur låter det när alternativtexten blir upppläst? Användarens behov och innehållets syfte avgör vilka detaljer du ska beskriva i texten.
  • Om du väljer att lägga till bildtext som syns på sidan ska den skilja sig från alt-texten. Alt-texten ska beskriva bilden medan bildtexten ska innehålla kompletterande information.

Exempel:

Illustration med olika motiv som för tankarna till vetenskap, så som VR-glasögon och lagerblad.

Denna bild var publicerad på förstasidan på uu.se. Bilden innehåller många detaljer som inte alla kan beskrivas i alt-texten. Därför behövde redaktören formulera en alt-text som var tillräckligt beskrivande men inte för detaljerad. Alt-texten blev så här: "Illustration med olika motiv som för tankarna till vetenskap, så som VR-glasögon och lagerblad."

Skärmklipp som visar hur det såg ut på en sida om universitetets historia.

Denna bild var publicerad på en sida som handlar om universitetets historia. Redaktören valde att bildsätta texten om kända alumner med två bilder som visar hur Celsiushuset har förändrats med tiden. Bildtexten kompletterar det övriga innehållet med extra information: "Uppsalaalumnen Anders Celsius, som är mest känd för den hundragradiga temperaturskalan, grundade också Uppsalas första observatorium. Den nedre delen är bevarad och ligger på Svartbäcksgatan". Alt-texten beskriver det som i det här sammanhanget är relevant: "Ritning av Celsiushuset från 1700-talet bredvid foto på Celsiushuset idag."

Löpande text

Utgå alltid ifrån användaren när du skriver texter för webben. Undvik fluffiga utbroderade omskrivningar. Texten på en webbsida ska vara lätt att ta till sig. Syftet med din text är att så snabbt som möjligt besvara användarens frågor. Ha alltid användaren i fokus när du skriver.

Observera att nyhetstexter har ett annat syfte. Se riktlinjer för nyhetstexter nedan.

Några snabba skrivtips

  • Använd ord som besökarna söker på.
  • Skriv korta meningar (14-20 ord).
  • Skriv korta stycken.
  • En tanke per stycke.

Underlätta för användaren när du skriver

Skriv vårdat, enkelt och begripligt.

  • Följ den officiella språkvårdens rekommendationer.
  • Undvik invecklade meningar, ålderdomliga uttryck, förkortningar och facktermer.
  • Tänk på läsaren när du skriver och strukturerar din text.

Tilltalet ska vara direkt. Undvik passiv form. Ett exempel på passiv form är ”passiv form bör undvikas”.

När du använder abstrakta begrepp underlättar du för läsaren om du förtydligar med exempel.

Undvik krångliga och ålderdomliga ord

Läs om krångligt språk i stilguiden

Förkortningar

Läs om förkortningar i stilguiden

Formatering

  • Undvik kursiv stil då den kan vara svår att läsa för personer med synnedsättningar.
  • Använd gärna fetstil om du vill förstärka vissa nyckelord. Detta kan ge läsaren en överblick. Men gör det med måtta. Överanvändning av formateringar kan resultera i att texten blir svårläst.
  • Undvik understruken text då den kan förväxlas med länkar.
  • Använd enter för att göra radbrytningar. Skift-enter får du endast använda i de fall där en sådan radbrytning är en del av innehållet, t.ex. i adresser.

Nyhetstexter på webben

Nyhetstexter skiljer sig från webbsidor i och med att de har ett annat syfte än övrig information. Det handlar om redaktionell information, där vi använder journalistiska metoder för att kommunicera med olika målgrupper.

Rubriker

En rubrik i en nyhetstext eller annan redaktionell text ska vara max 60 tecken inklusive blanksteg. Rubriken ska på ett koncist sätt spegla artikelns innehåll och fånga det viktigaste. Locka till läsning utan att tappa i tydlighet. Tänk på att rubriken inte ska vara en överskrift och inkludera gärna ett verb så att rubriken blir mer aktiv. Undvik pengasummor i rubriken.

Ingress

Ingressen ska innehålla artikelns vinkel och vara max 400 tecken lång (inklusive blanksteg). Den ger svar på frågan: Vad är grejen? Undvik svåra ord eller förkortningar som behöver förklaras.

Mellanrubrik

Använd mellanrubriker om texten är mer än 1 000 tecken. Formulera dem enligt samma princip som rubriker. Det är lämpligt med ungefär en mellanrubrik per 1 000 tecken.

Styckeindelning

Dela in i stycken med mellanrum, det ökar läsbarheten. Citat blir eget stycke när det fungerar, korta citat kan ingå som del av ett stycke.

Byline

Alla artiklar ska ha en byline, det vill säga avslutas med artikelförfattarens för- och efternamn. Artikelförfattare är även den som ”bara” redigerat och faktakollat en text före publicering. Att det finns en person som är garant för att artikeln är fakta- och språkgranskad är viktigt för trovärdigheten.

Faktaruta

Faktarutan ligger efter artikeln och skribentens byline. Den används för kompletterande information som förklarar något i brödtexten eller fördjupar informationen. Faktarutan ska inte vara för lång, 300–500 tecken inklusive blanksteg är lagom.

Rubriken för faktarutan är ”Fakta” respektive ”Facts”.

Länkar

Länkrutan ligger längst ner, efter artikeln, skribentens byline och en eventuell faktaruta. Den ska kunna läsas fristående, så se till att läsaren förstår länktexten, alltså vad länkarna leder till. Tänk på att bara länka till trovärdiga källor, till exempel forskarens eller projektets egen webbsida eller till en publikation. Internt länkar vi till fast information och till tidigare artiklar i samma ämne. Länkar du till artiklar, ange publiceringsdatum.

Rubriken för länkrutan är ”Läs mer” respektive ”Read more”.

Internt kan porträttbilder på intervjuade med fördel användas, externt vill vi dessutom gärna ha bilder som illustrerar det forskningen handlar om eller visar forskare i aktion. Använd helst formatet webp, annars jpg. Bilder med text i bild och collage använder vi inte av tillgänglighetsskäl. Bilder ska alltid ha bildtext. För porträttbilder publicerade inne i artikeln räcker det med namn och titel.

Allmänna riktlinjer för bild på webben

Bildformat

Vi har fasta bildformat och det är viktigt att följa de formaten. Bilden i topp ska vara exakt 1932x828 pixlar, bilder i brödtext 1200 x 800 pixlar. Använd antingen bilden som redan ligger i mallen eller dela texten och lägg in bilden manuellt i brödtexten.

Guide för bildstorlekar och bildproportioner

Bildtext

Bildtexten ska komplettera rubrik och ingress och väcka intresse. Om det är porträttbilder ska personerna namnges med för- och efternamn. Fotografens namn ska alltid anges.

Alt-text för bild

En alt-text beskriver bilder för synskadade. Glöm inte att alt-texten måste översättas till engelska.

Olika artikeltyper och mallar för nyhetstexter i Sitevision

I Sitevision finns ett antal olika mallar för nyheter. Vilken som ska användas för vilken artikeltyp framgår nedan.

Mall: Nyhetsartikel

Längd: 1 800 till 3 000 tecken inklusive ingress och mellanrubriker.

Rubrik och ingress: Jobba extra med rubriken. Den ska innehålla ord som fångar innehållet och som underlättar för användaren att hitta artikeln vid en sökning. Undvik förkortningar och krångliga ord i rubrik. Var direkt och konkret. Ingressen ska fånga det viktigaste och locka till vidare läsning.

Lång livslängd: Undvik begrepp som ”idag” och ”igår”. Skriv hellre datum eller till exempel ”i början av maj”. Då blir inte artikeln ”gammal” så fort.

Bild: Antingen en bild som illustrerar det artikeln handlar om eller en porträttbild på den intervjuade.

Mellanrubriker: Tänk på att dessa ska vara informativa och lyfta fram det mest intressanta i nästa stycke. Det är lämpligt med ungefär en mellanrubrik per 1 000 tecken.

Faktaruta och läs mer: Vid behov.

Mall: Nyhetsartikel eller Meddelande/notis

Längd: Upp till 1 000 tecken inklusive ingress.

Format: Rak nyhetstext.

Intervjuperson: Det är inte nödvändigt med citat i en notis.

Bild: Bild behövs bara om notisen ska kunna lyftas upp som puff.

Mall: Intervju

Längd: Kring 2 500 tecken inklusive ingress och mellanrubriker.

Format: Fråga-svar-artikel med 4–5 frågor.

Rubrik: Antingen en rubrik som fångar det viktigaste (som i en vanlig nyhet) eller ett citat eller påstående från intervjupersonen inom citattecken. Även citatet bör hjälpa målgruppen att förstå vad artikeln handlar om.

Ingress: Inled med det viktigaste, och en presentation av intervjupersonen. Första frågan inleder brödtextenoch står inte i ingressen.

Bild: Porträttbild på personen.

Faktaruta och läs mer: Vid behov

Mall: Nyhetsartikel

Längd: 4 000–7 000 tecken inkl. ingress och mellanrubriker.

Flera intervjupersoner: För en så lång artikel krävs oftast att fler än en person kommer till tals. Artikeln kan ge flera olika perspektiv på en inledande fråga eller ett problem, såsom psykisk ohälsa, lika villkor på universitetet eller klimatomställningen. Det kan också vara ett reportage, där man pratar med flera olika personer på plats.

Mellanrubriker: Dessa ska vara informativa och lyfta fram det mest intressanta i nästa stycke. Det är lämpligt med ungefär en mellanrubrik per 1 000 tecken. Mellanrubriker bör ha relevanta nyckelord för sökningens skull.

Flera bilder: Ju längre texten är, desto viktigare med flera bilder. Om flera personer intervjuas kan det vara bra med små porträttbilder där de kommer in i artikeln. Gärna en genrebild i topp eller en bild som på de som intervjuas i artikeln. Kanske har intervjupersonerna egna bilder som kan användas?

För ett bildreportage, se till att 3–4 bilder är med i artikeln, och att bilderna är varierade, från översiktsbilder, till detaljbilder och porträtt. Gärna bilder där det händer saker – med rörelse och liv. Tänk på att inte lägga bilden i anslutning till en mellanrubrik.

Faktaruta och läs mer: Vid behov

Mall: Forskarprofilen

Längd: 4 000–6 000 tecken inkl. ingress och mellanrubriker + faktaruta. Använd mallen ”Forskarprofilen”.

Fokus i artikeln: Personporträtt som berättar om forskningen men också om personen bakom forskningen. Artikeln ska vara skriven på ett lättillgängligt och intresseväckande sätt.

Bild: En ”breddarbild” som visar personen i miljö. I brödtexten ryms även en eller två bilder.

Mellanrubriker: Mellanrubriker ökar sökbarheten. Tänk på att dessa ska vara informativa och lyfta fram det mest intressanta i nästa stycke. De ska också innehålla nyckelord. Det är lämpligt med ungefär en mellanrubrik per 1 000 tecken.

Faktaruta: Personliga frågor, till exempel: Titel – Just nu/Forskar om – På fritiden – Dold talang – Gör mig glad – Gör mig arg. Anpassa gärna med egna frågor som passar just den här intervjupersonen!

Läs mer: 2–5 länkar till exempel till forskningsartiklar, andra artiklar kring samma ämne och pressmeddelanden.

Mall: Krönika

Längd: 2 500–4 000 tecken inkl. ingress.

Format: Personligt skriven text som ska vara baserad i kunskap men kan gärna vara rolig och uttrycka åsikter. Lättläst, inte för detaljerad och faktatyngd.

Fokus i krönikan: Internt ska krönikan ta upp interna villkor, förutsättningar, universitetsgemensamma frågor, arbetsmiljö eller vara en mer anekdoktisk betraktelse av universitetets inre liv. Externt ska krönikan ta upp aktuella frågor som är relevanta för många, gärna med koppling till forskningen.

Mellanrubrik: Används inte. Istället inleds några stycken, med ungefär samma avstånd som mellanrubriker – cirka 1 000 tecken – med 3–4 ord i fetstil,

Bilder: Porträttbild av krönikören, eventuellt breddarbild som beskriver ämnet

Kontakt

Senast uppdaterad:

FÖLJ UPPSALA UNIVERSITET PÅ

Uppsala universitet på facebook
Uppsala universitet på Instagram
Uppsala universitet på Youtube
Uppsala universitet på Linkedin