Skip to main content

ITM's guidelines for web publishing

Strategies, guidelines and help on the way for ITM's web editors. Here you will find information about image editing, links, videos and how we write texts on the web.

General strategy

  1. Focus on the visitor's needs. Write with the visitor in mind - who are they and what information do they want to find? How do we present the information in an understandable and interesting way that makes the visitor continue reading? All pages must respond to a need from the target group and arouse interest in reading.
  2. Mobile-first communication. Try to gather information on one page instead of many subpages.
  3. Do not duplicate content. Refer to KTH's central channels in the first place. 
  4. Write in both English and Swedish.
  5. Images that reinforce messages and facilitate navigation.
  6. Clear and comprehensible content. The text should be comprehensible, clear and explanatory. Paragraph breaks and a well-thought-out heading help the reader to find its way through the text. This is much more important than the layout of the page.
  7. Unpublish and delete outdated information. You can define the unpublish date of a page already when you create it. The website is not an archive.

Write on the web

This is how we write headlines

The headline should clearly describe the content of the page. It shall not be longer than one line and shall only exceptionally contain abbreviations. The main heading on all pages has the highest heading level (Heading 1). The next heading, which is a subheading, must be of a different size (Heading 2). The heading following is a section heading and must be of the third size (Heading 3). Do not start an article with heading 3 and then use heading 2 later in the text. It creates unclarity for the reader.

This is how we write an introduction

The instroduction is two to three sentences long and summarizes the entire content of the page. The introduction is important because its content is picked up by search engines and attracts the visitor to read. Please use defined keywords that the page should be associated with. The reader should be able to see directly in the introduction if this is the page where the wanted information can be found. 

This is how we write a body text

The body text consists of text, second and third headings, bulleted lists and links in some cases. The body text should always be left-aligned (which is preset), ie not centered or right-aligned. 

Use bulleted lists

Listing several things in a row works best in bulleted lists. A bulleted list makes it easier for the visitor to read and grip what is written. A clear text makes it easier for the eye to find the right way and makes the text look easily accessible.

Links

Link texts must be clear and contain words that describe the link content. Users must otherwise read more than necessary to understand the context. Text links are also good for search engine visibility.

Links like click here or read more give no clue as to where it leads and should be avoided.

Write the link text so that it is possible to understand where it leads even if it were taken out of context. Tip! Use the title of the page that you link to as link text.

Good examples: How to register, on antagning.se.

Interview with Chief Safety Officer Annica Hofberg (Swedish)

Always avoid adding links in the left menu that lead away from kth.se.

Anchor Links

Anchor links can be used to link to a specific section on a page. There is no specific module for it in polopoly, but it can be solved. 

  1. Place the cursor at the point on the page where you want your anchor. In this example, we want to link to the section about images on this page so the cursor is placed next to that headline. Click on the HTML icon.
  2. Write a headline and choose not to show it. Paste the code <a name=”bild”> </a>, where you replace bild with an appropriate name for the anchor. Save and close.
  3. To link to the anchor on the page, use the URL and put the #bild at the end. For example: https://intra.kth.se/itm/arbetsplatsen/kommunikationsstod/itm-s-riktlinjer-for-webbpublicering-1.975760#bild. 

Images

Ratios and image formats

Saving your image with the correct pixel size is important. If the image is too large, it makes the page heavy and slow. If it is too small, the image will be blurred. In particular, keep in mind that images displayed in small puffs on your computer are displayed in full width on your mobile phone. To create a uniform impression on the whole school, we use the following image dimensions:

  • Hero (image at the top of a non-news page): 868 * 244 pixels
  • News top image: 868 * 488 pixels (= aspect ratio 16:9)
  • 2-column puff: 500 * 280 pixels (= same aspect ratio as news top image, but less heavy)
  • 3-column puff: 540 * 360 pixels (= aspect ratio 3: 2)
  • 4-column puff: 540 * 360 pixels (= aspect ratio 3: 2)
  • Image inserted in text (e.g. portrait in a news article): 270 * 270 pixels or 270 * 360 pixels (= aspect ratio 4: 3)

Export as jpeg and choose a quality of 60-70 percent. 

For free-to-use pictures we recommend Pexel , Pixabay , and Unsplash .

GDPR

Use Model agreement (Swe) (docx 56 kB)  when photographing recognizable people. 

When making photos shoots or videos at events, please use Combined participants list and consent agreement (xlsx 11 kB) . 

More about GDPR and copy rights on intra.kth.se

Videos

Videos must have closed subtitles or a supplementary text description. This applies both to publishing on KTH's web pages and in other channels where KTH is the sender of the content.

Video production step by step

KTH has a framework agreement with an agency that can do the entire production of a film. See the agreement database . For simpler films with a small target group, the material can be produced without the intervention of an agency.

  1. Write a script.
  2. Film your material and do not forget clips images of people from other angles, environments and products. If you are shooting with your mobile phone, apps such as FiLMiC Pro or Movie Pro can help you control the sound, image quality and stabilize the image.
  3. Cut the material. For simple mobile videos, Imovie or Clipsk work well. In other cases, KTH staff use Camtasia (or Adobe Premiere Pro if you already have an Adobe licence). 
  4. Add KTH's grafiska element  in the like logo, text plates and final image. 
  5. Save the video.
  6. Publish on KTH Play.
  7. Text automatically using the tool Reach  in KTH Play. Then the visitor can turn the subtitling on and off (so-called Closed Captions / CC). Order captions, check and correct inaccuracies, publish. If necessary, translate into English, for example. The easiest way to do this is to download the SRT file, translate and upload the new language version. All meaningful sounds should be reproduced and it needs to be clear who is speaking.
  8. Publish the link to the video on your website in Polopoly or wordpress or embed it on the website.

Videos and audio files that everyone can perceive

Tags

Define a list of 10-20 tags that you use on your pages and use 1-4 per page. Examples of good tags: Energy technology, education, conference, research, economics, collaboration.

Modules in polopoly

  • Use the color pink in puffs sparingly.
  • Avoid fold-out puffs and puffs with tabs, because search terms are then hidden in navigation and do not work in "Search". 
  • Column dividers require that the contents of the columns are consistent and work in a narrow width, therefore column dividers look slightly disproportionate, skewed and too narrow in the mobile.

Read more about creating web content

How to write for the web

Polopoly user guide

KTH form service