Till innehåll på sidan

ITM's riktlinjer för webbpublicering

Här hittar du strategier, riktlinjer och hjälp på vägen för ITM's webbredaktörer. Här finns bland annat information om bildhantering, länkar, filmer och hur vi skriver texter på webben.

Övergripande strategi

  1. Fokus på besökarens behov. Skriv med besökaren i tanken - vilka är de och vilken information vill de hitta? Hur presenterar vi informationen på ett föreståeligt och intressant sätt som gör att besökaren vill fortsätta läsa? Alla sidor ska svara till ett behov hos målgruppen och väcka intresse till läsning.
  2. Mobilanpassad kommunikation. Försök samla information på en och samma sida i stället för på många undersidor. 
  3. Dubblera inte innehåll. Hänvisa till KTH centrala kanaler i första hand. Detta är extremt viktigt för att webbsidor enkelt ska hittas via sökverktyget.  
  4. Skriv på både engelska och svenska
  5. Bilder som förstärker budskap och underlättar navigering.
  6. Enkelt och begripligt innehåll. Texten ska vara enkel, tydlig och förklarande. Styckesindelningar och en genomtänkt rubriksättning hjälper läsaren att hitta i texten. Det är mycket viktigare än sidans layout.
  7. Avpublicera och ta bort inaktuell information. Webbplatsen är inget arkiv.

Skriva på webben

Så här skriver vi rubriker

Rubriken ska tydligt beskriva innehållet på sidan. Den ska inte vara mer än en rad och ska enbart vid enstaka tillfällen innehålla förkortningar. Huvudrubrik på alla sidor är av högsta rubrikgraden (Rubrik 1). Efterföljande rubrik som är en underrubrik ska alltid vara av andra storleksgrad (Rubrik 2). Nästa rubrik är en avsnittsrubrik och ska vara av tredje storleksgrad (Rubrik 3). Börja inte en artikel med rubrikgrad 3 för att sedan använda rubrikgrad 2 senare i texten. Det skapar otydlighet för läsaren.  

Så här skriver vi en ingress

Ingressen är två till tre meningar lång och sammanfattar hela innehållet på sidan. Ingressen är viktig eftersom dess innehåll plockas upp av sökmotorer och lockar besökaren att läsa vidare. Använd gärna definierade nyckelord som sidan bör förknippas med. Läsaren ska se direkt i ingressen om den kommit till den sida där informationen som denne är ute efter kan hittas.

Så här skriver vi en brödtext

Brödtexten består av text, andra och tredjerubriker, punktlistor och eventuella länkar. Brödtexten ska alltid vara vänsterjusterad (vilket är förinställt), dvs inte vara centrerad eller högerjusterad. 

Använd punktlistor

Uppräkning av flera saker i rad gör sig bäst i punktlistor. En punktlista gör det lättare för besökaren att läsa och ta till sig det som står. En överskådlig text underlättar för att ögat att hitta rätt och gör att texten ser lättillgänglig ut.

Länkar

Länktexter ska vara tydliga och innehålla ord som beskriver vad länken handlar om. Användarna måste annars läsa mer än nödvändigt för att förstå sammanhanget. Textlänkar är också bra för synlighet i sökmotorer.

Länkar med klicka här eller läs mer ger ingen ledtråd om vart den leder och ska undvikas.

Skriv länktexten så att det går att förstå vart länken leder även om den skulle vara tagen ur sitt sammanhang. Tips! Använd rubriken på sidan du länkar till som länktext.

Bra exempel: Hur du anmäler dig, hos antagning.se.

Intervju med Huvudskyddsombud Annica Hofberg (engelska)

Undvik alltid att lägga länkar i vänstermenyn som leder bort från kth.se. 

Ankarlänkar kan användas för att länka till ett specifikt ställe på en sida. Det finns ingen specifik modul för det i polopoly, men går att lösa. 

  1. Placera markören vid det ställe på sidan där du vill ha ditt ankare. I det här exemplet vill vi länka till stycket om bilder på den här sidan och ställer markören vid rubriken bilder. Klicka på HTML-ikonen. 
  2. Skriv en rubrik och välj att inte visa den. Klistra in koden<a name=”bild”></a> , där du ersätter bild med ett lämpligt namn för ankaret. Spara och stäng.

  3. För att länka till ankaret på sidan använder du URL:en och sätter #bild på slutet. Exempelvis: https://intra.kth.se/itm/arbetsplatsen/kommunikationsstod/itm-s-riktlinjer-for-webbpublicering-1.975760#bild. 

Bilder

Bildförhållanden och format på bilder

Att spara din bild med rätt pixelstorlek är viktigt. Är bilden för stor gör den sidan tung och trögladdad. Är den för liten blir bilden oskarp. Tänk speciellt på att bilder som visas smått i puffar på datorn visas i fullbredd på mobilen. För att skapa ett enhetligt intryck på hela skolan använder vi följande bilddimensioner:

  • Hero (bild överst på en sida som inte är en nyhetssida): 868 * 244 pixlar
  • Nyhetstoppbild: 868 * 488 pixlar (=bildförhållande 16:9)
  • 2-kolumnspuff: 500 * 280 pixlar (= samma bildförhållande som nyhetstoppbild, men mindre tung)
  • 3-kolumnspuff: 540 * 360 pixlar (=bildförhållande 3:2)
  • 4-kolumnspuff: 540 * 360 pixlar (=bildförhållande 3:2)
  • Bild infogad i text (typ porträtt i nyhetsartikel): 270 * 270 pixlar eller 360 * 270 pixlar (=bildförhållande 4:3)

Esportera som jpeg och välj i rutan för export en kvalitet på ca 60-70 procent. 

GDPR och bildrättigheter

Använd Modellavtal (docx 56 kB)  vid fotning av igenkännbara personer. 

Vid fotografering och filmning på events kan Kombinderad deltagarlista och samtyckesavtal (xlsx 11 kB)  användas. 

För licensfria bilder rekommenderas Pexel , Pixabay  och Unsplash .

Mer om GDPR och bildrättigheter på intra.kth.se

Filmer

Filmer ska ha stängda undertexter (closed captions / CC) eller en kompletterande textbeskrivning. Detta gäller både vid publicering på KTH's webbsidor och i andra kanaler där KTH är avsändare för innehållet.

Filmproduktion steg för steg

Vi har ramavtal med en byrå som kan göra hela produktionen av film. Se avtalsdatabasen . För enklare filmer med liten spridning kan materialet filmas utan inblandning av byrå. 

  1. Skriv ett manus. 
  2. Filma ditt material och glöm inte klippbilder på personer i andra vinklar, på miljöer och produkter. Om du filmar med mobilen kan appar som exempelvis FiLMiC Pro eller Movie Pro hjälpa dig att kontrollera ljud, bildkvalitet och stabilisera bilden.
  3. Klipp ihop materialet i valfritt verktyg. För enkla mobilfilmer fungerar Imovie eller Clipsk bra. I övrigt använder vi på KTH Camtasia (eller Adobe Premiere Pro för dig som redan har Adobe-licens). 
  4. Lägg till KTH's grafiska element  i form av logo, textplattor och slutbild. 
  5. Spara filmen.
  6. Publicera på KTH Play.
  7. Texta automatiskt med hjälp av verktyget Reach  i KTH Play. Då kan besökaren själv slå av och på textningen (så kallad Closed Captions /CC). Beställ textning, kontrollera och korrigera felaktigheter, publicera. Vid behov, översätt till exempelvis engelska. Det gör du enklast genom att ladda ner SRT-filen, översätta och ladda upp den nya språkversionen. Alla meningsbärande ljud bör återges och det behöver tydligt framgå vem som pratar. 
  8. Publicera länken till filmen på din webbsida i Polopoly eller wordpress eller bädda in den på webbsidan.

Filmer och ljudfiler som alla kan uppfatta

Skapa och hantera video

Beställ film

Definiera en lista på 10-20 taggar som du använder på dina sidor och använd 1-4 per sida. Exempel på bra taggar: Energiteknik, utbildning, konferens, forskning, nationalekonomi, samverkan. 

Moduler i polopoly

  • Använd färgen rosa i puffar sparsmakat. 
  • Undvik utfällbara puffar och flikar eftersom söktermer då blir dolda i navigering inte fungerar i ”Sök".
  • Kolumndelare ställer krav på att innehållet i kolumnerna är konsekvent och fungerar i smal bredd, därför ser kolumndelar lätt oproportionerliga, sneda och för smala ut i mobilen. 

Läs mer om att skapa webbinnehåll

Hur du skriver för webben

Polopoly användarmanual

KTH formulärhantering