Apply online
Find out moreEditing the website
Training
Our website is a powerful communication channel. We want to empower our community of website editors so that together we can unlock it’s potential.
We run monthly 1-hour virtual training sessions. These are available for new users and anyone who would like a refresher. To book your place please email websupport@herts.ac.uk
Standard pages
Adding different types of content encourages users to engage with not only our website, but our story.
We are constantly creating new content templates for the website, enabling access to complex functionality in a simplistic easy-to-use interface. These templates have been created and tested by the Digital Team for best performance and optimisation. We have put together this guide to demonstrate the functionality of the different content templates available to use.
| Name | What's it for | How to use it |
|---|---|---|
| Comparison slider | This slider will allow you to compare. There is space for an image, five features and a CTA link. | Example: This is used to compare products and services. |
| Content | A block of content. Includes content text and content description fields. | Example: This is used for text. |
| Country button | These country buttons allow you to include the country name, country image and where you would like it to link off to. | Example: International pages to display specific country requirements. |
| CTA Buttons | Buttons to drive actions from users. Add as many as you require, and select the number of columns based on design and number of CTAs. | Example: Book an open day button or apply. |
| CTA External URL Buttons + Anchors | Select how many buttons you want per row from the drop down menu. Enter the text you want to appear on the button. Add in the asset number or external URL of the page you want to link to. | Example: Used when linking to different internal and external pages. |
| Dropdown list | Title with expandable content with max 5, 10 or 30 dropdown options. To be used when a small amount of additional information is required within lists. | Example: A list of projects with names and descriptions. |
| Featured boxes | Two large image boxes with a description and CTA. | Example: To be used to link to prominent relating pages. |
| Flickr album | Embedding a Flickr gallery into a page. | Example: When you want to break up a page of text or showcase any visual content. |
| Floating pod | Right hand pull out to draw attention to additional or important information. | Example: This can be used to draw out a key statistic in a case study or a CTA action. |
| Full Width Highlight | A full width highlight which includes a full width image, heading, description and a CTA field to link off to another asset. | Example: Used to show 'Our History' as a highlight. |
| Gecko Form Dropdown | This gecko form template requires a heading and a gecko form source which can be found under Forms > Share > Embed Your Form On a Website > click 'Get Alternative Code'. | Example: src="https://app.geckoform.com/public/ #/iframe/FOEU031boaQ2bBzV". |
| Icon Options | Select how many icons you need from the drop down menu. Click select to pick which icon you would like to display. Title and small text are optional. Contact Admin for new icons. | Example: Used to highlight key facts or as internal links. |
| Image Block | Use the asset number of the image you'd like to display. | Example: Use 80 width to showcase imagery and use 60 width to break up text and help tell a story. |
| Image dropdown list – 10 | A dropdown list of up to 5 or 10, which includes a title, image, intro and then the main content when row drops down. | Example: Used when showcasing a team. |
| Image grid | There are 4 variations of this image grid. You can have 2, 3, 4 or 5 images side by side. | Example: Used in the brand toolkit to showcase our logo. |
| Image slider | Use to showcase a series of images. The size can be either 60 or 80 width. | Example: Use 80 width to showcase student work and 60 width to break up text content and to help tell a story. |
| Landing Boxes - 6 | You can have up to 6 or 12 pods using this template. The pod displays the page thumbnail image and the page title. | Example: Used on landing pages, helping the user navigate to child pages. |
| Landing Page Slider | You can have up to 4 CTA slides linking to other pages. To add the image, go to the page you are linking to > Metadata and add in Landing.Subpage.Slider.Image, Landing.Subpage.Slider.Title, Landing.Subpage.Slider.Description. | Example: This can be used to highlight key courses for recruitment or pages relating to the page you are on. |
| Logo Carousel | Enter the logo/images you wish to use and also provide a URL for the logo to link to if clicked and also the ALT text for screen readers etc. Ideally make the images the same width (around 200px is best) so there is a smooth flow between transitions. | Example: This can be used when showcasing the partners we work with. |
| Step by step | A button which is positioned at the bottom right of the container. Can include text and where you want the button to link off to. | Example: Used for a 'next step' on UCAS applications. |
| Pod slider | A rotating carousel of asset links with title and description. | Example: This can be used to highlight relevant information. For example, news and events. It can also be an alternative to using lists. For example, equipment listings and product portfolio. |
| Research Biography | A biography field with space for a photo and link to RIS. | Example: To be used in research case studies. |
| Research RIS buttons | CTA buttons linking to RIS pages for Research Groups and Centres. To include RIS links only. | Example: To be used on research pages only. |
| Tabbed Content | When there is a lot of information that is related and doesn't justify needing to use another page. | Example: Used when providing information about different travel options. |
| Testimonial - Pod | A formatted container to make a quote stand out. | Example: This can be used to draw attention to a particular point or significant statement made by someone. |
| Testimonial slider | A formatted slider to make quotes stand out. | Example: This can be used to draw attention to a particular point or significant statement made by multiple people. |
| Video Block | Use when you want to embed a video from Vimeo. | Example: Used when a Vimeo video is required. |
| Video slider | Scrollable video embed slider. Paste the embed URL from YouTube or Vimeo. | Example: To embed from YouTube the URL would look like: https://www.youtube.com/embed/fHI8X4OXluQ. To embed from Vimeo the URL would look like https://player.vimeo.com/video/218771705. |
| Youtube - Responsive | A responsive Youtube template which requires the YouTube ID. eg: " 81UvmdVXdqI". | Example: This is used to embed YouTube videos on a page. |
Course pages
Course pages act as a shop window to prospective students. They should be as exciting and informative as the courses themselves.
Course pages are the most important pages on our website. They help showcase the University's varied portfolio and unique selling points fuelling the aspirations of prospective students.
Editing course pages
Course pages are edited differently to other pages on the website as they rely on systems used throughout the University, for example the Student Record System. Access to the Course Marketing Module (also known as CMM) is limited to specified individuals and teams to ensure accuracy and consistency across our portfolio.
Different sections of a course page are owned by different departments across the University. For any changes to modules, programme specifications, application dates or course fees please refer to the contact details in our Service Agreement. You'll need to be logged in to access. Please note that the web team do not have permission to make these types of changes.
For sections of a course page highlighted red on the course page ownership diagram please email web support details of your course page amend.
New course pages
Requests for a new course page are made through the course content discovery form and sent to Marketing and Communications. The information you provide will be used to write the course page, so please provide as much detail as you can. Copy will be written in line with our style guide, tone of voice and accessibility guidance to ensure consistency.
Course pages are triaged based on their priority, depending on the point in the recruitment cycle. We aim to action requests as soon as possible. We'll collaborate with you throughout the writing process, please allow 3 weeks from submitting the form to your new course page being published.
Writing for the web
To write for the web, you need to speak to the reader directly. It must be personable and informative, yet concise.
Writing for the web involves crafting your content while considering the technical workings on websites. This guidance details how you can combine these skillsets to showcase the University's offering.
Writing style
Like all communication channels used by the University, writing on the website should follow our style guide and tone of voice guidance to ensure consistency.
However, there are certain stylistic features to remember when crafting textual content for the web.
To ensure your writing is successful for this platform:
| ✅ You should | ⛔️ You should not |
|---|---|
| Keep pages of text short to avoid requiring users to scroll | Overload the user with information |
| Keep paragraphs short (around three to five lines of text) with each containing one main information point | Refer to other web pages on your site or the information they contain |
| Write objectively, rather than as a sales pitch as web users are generally looking for specific information | Be overtly promotional |
| Include a call-to-action (or CTA) or have information on what to do next (ie contact details) on each page | Be vague or abstract when using text links (eg 'click here') |
| Make sure each page is understandable by itself | Refer to information on other pages in your writing. |
| Put important information and action words at the beginning of sentences | |
| Use meaningful words for text links (eg 'Read more about scholarships') so users know what to expect. |
Structure
Structuring a webpage well can make a huge difference. It makes it easy for users to find what they're looking for. Plus, it increase our search engine rankings.
Here's how to create an effective webpage layout:
| ✅ You should | ⛔️ You should not |
|---|---|
| Use clear headings and subheadings to break up information | Repeat information |
| Use page names which clearly describe and signpost what your page is about to users | Use bullets and numbered lists excessively |
| Front-load important information by starting with the information most important to your audience | Use heading and subheading formatting to make text appear a certain way. |
| Use the correct formatting options for headings, subheadings and paragraphs | |
| Use bullets and numbered lists to break up ordered and unordered lists | |
| Visually separate information using white space and multi-media assets (ie images and videos). |
Search engine optimisation (SEO)
Good SEO not only enables a better user experience (UX) but it will also make your pages rank higher in search engine results.
This guide won't provide any secrets that will magically rank your pages first on Google results (sorry!), but following the best practices outlined below will make it easier for search engines to understand and prioritise your content.
What is SEO?
Simply put, Search Engine Optimisation (SEO for short) is the process of making your website better for search engines.
SEO is often about making small changes to parts of your web page. When viewed individually, these changes might seem like small incremental improvements, but when combined, they will have a noticeable impact on the user experience and performance in organic search results. You're most likely already familiar with many of the topics in this guide, because they are the usual ingredients that serve any web page, but you may not be making the most out of them.
This guide separates SEO into two sections, content and technical.
The content section will help in your day to day role when producing or editing web pages alongside our writing style guide. The Digital Team have already implemented the technical changes required for a great SEO rating, but this guide will still give you an overview so you can see how it all combines into one SEO package.
SEO for content editors
| ✅ You should | ⛔️ You should not |
|---|---|
| Include appropriate LSI* keywords within the content that users would typically search for to find that page | Use heading and subheading formatting to make text appear a certain way |
| Use the correct formatting options for headings, subheadings and paragraphs. Headings should be used in the correct order | Make the page name too long. This automatically generates the page title which should not be greater than 80 characters in length |
| Include internal and external hyperlinks to relevant content | Open internal and external links in new windows as it hinders accessibility |
| Fill in the metadata description field which should accurately and concisely describe the content on the page with a max of 150 characters | Add images to the page without entering a descriptive ALT tag |
| Enter descriptive ALT tag descriptions for all images. | Add images that aren't optimised for the web. A data heavy image will increase page load time resulting in a lower SEO score |
| Make sure to link back to the web page from respected websites | Upload an image in the wrong dimensions. Adding a larger image than the max-width of the parent container can cause a negative score. |
| Regularly update the content to make sure it is relevant and up to date | |
| Before making a page live, check for spelling mistakes and make sure all links work correctly | |
| A correct use of font size throughout the site. |
* LSI (Latent Semantic Indexing) keywords are conceptually related terms that search engines use to deeply understand content on a webpage. In the early days of SEO, Google and other search engines would figure out a page’s topic based 100% on the keywords they found on the page. But search engines are a lot smarter these days. Google will still scan your page to see if you use the term in your title tag, content, image alt text, etc. But it will also search your page for LSI keywords. As an example, if you sold iced coffee, LSI keywords could be 'filter', 'cold water', 'beans' etc. It is important to keep this in mind when creating content for the page.
SEO for developers
| ✅ A valid Sitemap listing all page URL's of the site, submitted to all relevant search engines. |
| ✅ A valid robot.txt file listing what URL's search engines should crawl/not crawl. |
| ✅ Make sure the website has the correct meta tags in the head of the page such as the description and the viewport. |
| ✅ HTTPS - use a secure http(s) connection. |
| ✅ An easy to use URL structure with words that are relevant to your site's content and structure. |
| ✅ A valid title tag that reads naturally and effectively communicates the topic of the page's content. |
| ✅ A fully mobile responsive design. |
| ✅ No use of Flash throughout the site. |
| ✅ The page load speed is quick and optimised. |
Related Guidance
Get in touch
If you have any questions please contact a member of the team:
| Contact | |
|---|---|
| Web and Digital team, Marketing and Communications | websupport@herts.ac.uk |
| Jak Kimsey, Head of Digital and Creative Experience (he/him) | j.kimsey1@herts.ac.uk |
| Marketing and Communications Business Support | marketinguh@herts.ac.uk |