Features sorted by topic

Best practices for new websites

Basic rules for names and titles

The basic properties of a file are:

Field in WebHare

Example names

Explanation

Name (in URL)

meet-the-team.rtd

Only lower case letters, no spaces, special characters: ()-

Title (in menu)

Meet the team

Preferably short to keep it on one row in the menu. Always start with a capitalized letter.

Header title (above the page in header)

Who is who at the Social Media team

Make it longer and more explaining in order to help the visitor understand what the page is about.

SEO title*

Who is who / contacts Social Media team University of Twente

Show a special title in Google that is not visible in your content/page. Helps you to be found in Google on these words. This is especially helpful when people use other words to google you, for example a Dutch name of your department.

Description

Are you looking for contact persons for the UT social media channels like Facebook, Twitter or Instagram? Here's a list of all members of the UT social media team.

A short text to explain what the page is about. Preferably added to index files of important folders in your site. Use words that people might search when they need to find this page. In this text we used Facebook, Twitter, Instagram. If people search for these words they will find this page.

*This field can be left blank. It's not used often.

Never just delete a file

Even after deleting a file, someone might still have the URL/link of the deleted page, other pages may link to it and it will probably stay in Google for many weeks causing people to get dead links (404 error). To prevent this, try to link every page you are deleting to another relevant page. We call this URL history in WebHare. See our page on broken links and URL history for details to prevent your visitors from getting frustrated.

TIPS FOR NAVIGATION & MENU

  • Length of the menu: 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. 
  • Length of an item in the menu: Try to keep it on one row if possible. 
  • Put only your web pages in the menu: The menu should show pages of your websites. According to accessibility guidelines, some other file types may be very confusing for users. Do not use them:
    • No downloads: If you want to let people download a file (pdf, docx, xlsx, etc), use the inline component 'downloads/links' or the widget 'downloads/links'.
    • Too many links: Links in the menu may be confusing in many situations. Content links (stay in the current folder and load text from another page) are allowed. Internal/external links should be used very carefully as people do not understand that they have been send to a completely different folder or even website. Better: put a short text on a webpage and add you link there.
  • No double titles in the menu: When the folder above is called Research, your first file in the menu should have another name. Example: Research strategy, Research organization, ...
  • Good titles: Make sure your page has titles that make the visitor understand what the page is about. A page that contains contact information should not be called Organization, but should be called Contact or Contact & organization.
  • Combine pages: People tend to make many small pages, that could actually be combined to one page, separated by subheadings between the texts. This helps you reducing menu levels and makes your website easier to navigate: it's faster and users get a better overview.

Tips for pages

Some of these tips are just listed because it gives your visitors a better overview, but other tips are also for increased optimization for search engines. 

General properties of a page

  • Names of files and folders:
    • Write out names, do not use abbreviations.
    • Follow the rules listed in the first paragraph of this page.
    • Make sure your content contains important terms people use when googling/searching.
  • Unique texts: Try not to post the same texts twice.
  • Minimum of 150-200 words per page.
  • No long texts because people do not like/have no time to read that.

Headings and subheadings

  • Use subheadings (in Heading 2), but use them in the right order. Do not use a header 3 if you have not used a heading 2 earlier, for example. You start with heading 2 because the big title in the header area is your heading 1.
  • Keep headings 2 as short as possible (because they are listed on the right as a content summary)

Text and images

  • 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. 
  • Keep it short.
  • Preferably use short paragraphs of no more than 8 to 10 lines each.
  • Use a lot of headings between your text paragraphs.
  • 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 2 to 4 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.
  • 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 double text or too many words.
  • 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) .

Buttons (call to action)

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 element. 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.

header

The header area above your text can contain UT style elements (default), but can also be filled with images.

  • Pictures should always have the required minimum size, mentioned when uploading. The required size is listed above your picture, the actual size of your picture is listed next to the picture name below the image.
  • Positioning of people/heads: If there are people/heads on the picture position them correctly. The image may look great on your screen but heads may cut off on smaller/other screens. Therefore always use the set reference point options to select a spot that has to been on screen - always.
  • No text on images allowed: Header images may not contain texts/logos. This makes the page look ugly. Maybe not on your device, but on many others. If you want to place a logo, you can do so in the text (wrap text around it) or in the footer area. 

Footer

Add specific contact information for your site in the footer. This will have people to contact you if they need to. To improve visibility in search engines you may also add links to the footer area. This could be links to related other sites and pages within your website that are requested frequently/relevant. See our footer page for instruction.