Sorted by subject

Best practices for new websites

General information

  • Adjust your content to your target audience: if you are making a website for an international audience, please avoid bare shoulders etc.
  • Bear in mind delayed changes: if content from your site is retrieved from a database (e.g. a programme database), the process of caching information may lead to the alterations to become visible on the website up to one-and-a-half hours after the changes have been made.

High visibility of your information in search engines (SEO):

  • Names of files and folders:
    • write out names, do not use abbreviations.
    • use a hyphen (-) in-between words and only use lower-case letters. For example: ‘admission-degree-programme-in-psychology’, with Admission degree programme in Psychology as the title.
    • make sure your content contains important search entries people use when googling.
  • Unique texts: try not to post texts twice.
  • Minimum of 150-200 words per page.
  • No long texts
  • Use subheadings (in Heading 2).
  • In the running text, use links to other pages within your website, so as to allow people visiting the website from a mobile phone or other portable device - who don't see the menu on their screens unless they swipe or scroll to the left - to easily click through to other relevant pages.


  • Length: Try to keep the menu on the left short. Ideally, it should not comprise more than 7 to 8 items, to keep it orderly and clear for the visitor.
  • Website structure: In principle, there are a number of levels.
    • On the bachelor's programmes website, these are:
      • 1 www.utwente.nl (home)
      • 2 domain page (e.g. education)
      • 3 main item within the domain 3 (e.g. bachelor's programmes)
      • 4 main structure within the main item (e.g. bachelor's programmes, admission/enrolment)
      • 5 degree programme (e.g. Communication Studies)
      • 6 substructure within the degree programme
      • 7 tabs within the substructure item
    • Try not to go any lower in the menu hierarchy.
    • In principle, at the lowest level, you can choose between tabs and an additional subfolder.
      • To activate tabs, select 'Show folder contents as tabs' in the Properties window of a folder. The files will now be presented as tabs in that folder.
        • Using links (either internal or external links) as tabs is not recommended, as the user is then immediately redirected to another location where navigation is different (possibly even completely different), making it difficult to switch to a different tab. It is better to include a link on a page in a tab or to make use of a content link.
      • If a folder includes several files or subfolder and tabs are not activated, a submenu is created, to be recognized by an arrow next to the menu item of that folder. However, the use of this function is not recommended, as it makes the website complex and inconvenient for the user.

Header (section in the top)

  1. Vertical label: is created by the online media team
  2. Images in the header: these should fit in with the UT style or running campaigns. Header images can only be included at specific levels, in consultation with the online media team (not at the user's own discretion).
  3. Title in the header: in principle, you don't need to fill in a title at the top of the header space. Only fill in the title at the top if it adds value.
  4. Call to Action (CTA): in principle, you can do this yourself, but please note that the text should not exceed the length of two lines and that the button will only cover one line. Please also note that when you want to copy a CTA from a parent level (e.g. you are working on a commercial website for a degree programme and want to copy the CTA for the Open Days), you need to keep your CTA clear. Filling in your own CTA means your site will not show the CTA of the central parent level.

Main screen

Headings and subheadings

  • Start a page with Heading 1 (the Heading 1 style should only be used in this specific location!)
  • Other subheadings Heading 2
  • If an additional level is necessary, Heading 3, etc.
  • Keep headings and subheadings short (maximum of two lines)

Content text

  • Keep it short
  • Preferably use short paragraphs of no more than 8 to 10 lines each
  • Use as many subheadings in-between paragraphs as possible
  • Use many links in your text to lead the visitor to other relevant pages (see also the information above about visibility on the web (SEO)).
  • Be sure not to use too many videos, images or other elements in the text, so as to keep the text pleasant to read.
  • If you use images and/or videos in the running text, these are to be related to the content and serve to support the text.
  • Preferably use landscape orientation instead of portrait orientation for your images.

Widgets

  • Number of widgets: Do not use too many widgets, as the page may otherwise look slightly cluttered. Scrolling is allowed. Ideally, there are 4 to 6 widgets on a page, depending on the length of the text. Determine whether you think the page is clearly structured.
  • Order of widgets: check whether the order of the widgets looks good on the website. If not, adjust the order so that there are no empty sections between the widgets.
  • Large and small widgets: if you use widgets, preferably use at least one one-column widget, so that the space to the right of the text is being used. 

From this point onwards, the information is about individual widgets:

  • Description of a widget: if a widget allows you to include an introductory text, then please do, as the visitor will better understand what the widget is about.
  • Title of a widget: clear title, so that the visitor knows what the widget is about straight away. Make sure the title reads well, so do not use

Bachelor's Open
Days 14/15
March

but rather
14/15 March
Bachelor's Open
Days
(the date should be on one line to keep it clear)

  • Double text: make sure that, in a widget, you do not write the same thing three times, like in the following example: title=about the campus; description=about the campus, link below=about the campus
  • Text: if a widget includes text, keep it short (preferably 2 to 8 lines) 

CTA: use per page

The same guidelines apply to CTAs as to the ordinary widgets above. Additional tips:

  • CTA widgets: a CTA widget is always and automatically in a different, striking colour. This is important to make people click the widget. That is why you should not use standard widgets (such as media widgets) as CTAs; these do not stand out.
  • General use: A CTA really is a CTA, a Call To Action, e.g. a call to enrol, register, or request a brochure. A link to a news report and the like is not a CTA.
  • Keep it short: CTA in the upper-right corner covering no more than 3 lines, with the button covering no more than 1 line (Enrol, Register, Are you coming?, etc).
  • Number of CTAs: preferably use no more than 2 CTAs per page, as otherwise they will not stand out as CTAs any more. After all, CTAs have a distinct colour and if you use too many, they will not stand out as such any more.
  • The footer is automatically generated depending what page you are on. In principle, you don't need to do anything here.
  • Minisites: automatically generated, but you can also overwrite the standard footer using your own footer instead. However, make sure the links are relevant/related to your content, as this is important for your visibility in Google.