Your handy T4 checklist
A series of final checks you should make as a contributor or moderator on a page in T4. You can find a more detailed explanation of these checks further down the article.
Page title/Output URI
Short and snappy, no extra spaces at the end (for moderators)
Hero (image or pattern)
Sentence case, watch long words, feature block, contrast on breadcrumbs over image
Headings
Correct hierarchy
Text
No extra returns, reads well, plain English, clear and understandable
Buttons
Colour change, descriptive text, correct destination, section links, opens in same window/tab
Lists
Bullets or numbers (if sequence is important), no full stops
Tables
Correctly formatted
Links
Descriptive text, correct destination, section links, opens in same window/tab, landing page link text
Images
JPGs, size and dimensions, optimised, alt tags
Video
Thumbnail, alt tag, transcript, media name, title, closed captions, audio description (when relevant), video plays
Key stats
Subscript, superscript, footnote
Section config
Abstract, thumbnail, content type tag
Preview
Always, including mobile view
Additional information
Read on for more detailed information about final checks in T4. Following this guidance will help ensure your page is on-brand, on-style, on-message and also complies with accessibility regulations.
Page titles and Output URIs
The page title is the content you put in the Name* field in the General section settings area of the page/section’s General tab. This is what you will see at the end of the breadcrumbs on your page. One thing to make sure of is that there are no spaces at the end of the page title (these will show as hyphens at the end of the web address – unless you have added an output URI). Your page title does not have to be the same as the page heading (the heading in your hero). It is good practice to make the page title no more than five words. Think of it as a snapshot of your page heading.
The output URI slug is the content you put in the Output URI field in the Advanced settings area of the page/section’s General tab. This is what you will see at the end of the page’s web address eg derby.ac.uk/something-in-here/output-uri-slug/. This will always appear in lower case in the web address. Any spaces within the slug you write into the Output URI field will appear as hyphens in the web address.
It is good practice to add a slug in the Output URI field. This allows you to change the page title without breaking any incoming links. If your page title is a snapshot of your page heading, your URI is an even more succinct version of this. With our courses, we have a specific style. With other pages, think of what someone might be searching for if they wanted to find the information on this page. Searches are commonly two or three words.
Hero (image or pattern)
Every page needs a hero. This supplies your page with your H1 heading.
Though your H1 heading will appear on the page in block capitals, you should write it in sentence case as this is how it should appear in lists and searches. The system will apply the relevant caps style. Check in preview whether or any long words are too long for mobile view. If they are, add the soft hyphen ­ in the appropriate place in the ‘<> Source code’ window. If you have a / (forward slash) that is causing a long compound word, you can add a zero-width space ​ in the source code window after the / (this is preferable to adding an actual space). If this is making your head hurt, we break it down in more detail in our article How to deal with long words/strings on mobile.
Check your preview to ensure their is strong enough contrast on the breadcrumbs as they sit over the hero image. If not, change the image or add a dark or light fade in Photoshop.
An image hero will have a feature block (introductory paragraph). This should be written in plain text. Again, the system will apply the relevant style. It is possible to override this. But don’t.
Headings
Check that the headline hierarchy has been followed:
H1 to H2
H2 to H2 or H3
H3 to H3 or H4 etc
The general rule is that your next heading has to be of the same size as the previous one or the next size down. You can go back up in size in a bigger jump eg from H4 to H2 but don’t jump on the way down. All this helps screen readers understand the structure of the page.
Don’t use heading formats to emphasise a paragraph of normal text, this can be achieved using the large font format. Use heading formats for headings only.
Text
Watch out for rogue extra returns at the bottom of paragraphs. And sometimes at the top of paragraphs.
Avoid overuse of italics or bold text as this can make the content difficult to read.
Read the text. You were going to do that anyway, I know. Make sure it reads well and is in clear, plain English.
Don’t publish anything you don’t understand. Go back to the source if you’re not sure.
Buttons
Check in preview that any call-to-action buttons on the page have been formatted correctly. Buttons should change/sweep from blue text on white to white text on blue when you hover over them. Check our digital guidance on buttons.
Lists
Use bullet lists unless the list items have a specific order or sequence (eg of actions), when numbered lists should be used. No full stops at the end of list items (even the last one).
Tables
Tables should always be built from scratch in T4, never copied over from another platform (such as Word or Excel). You can check whether or not your table is performing correctly by checking mobile view in preview. You do this using right click/inspect and clicking on the mobile view icon. A correctly formatted table will be responsive and fit on the mobile view screen.
Links
Check all links go to the right place and open in the same window/tab.
In-line links
These are links within your text. Check that the content in the link describes the linked page. Eg don’t say To find out more about our undergraduate psychology courses, click here; say Find out more about our undergraduate psychology courses. Some users will list all the links on the page. Using text that describes the link makes the content accessible.
If the link leads to a page where a login is required, say so in the link text (login required).
When linking to a page on the University of Derby website, use the Section link or Content link [if you want to go to a particularly spot on a page] functions, don’t link to the url (web address). This avoids the link breaking if the page is moved.
Landing page links
Landing page links to pages on the University of Derby website will pull in the page heading and abstract unless the “Title” and “Text” field in the landing page link item are used. If your page heading and abstract are long, this can affect the user experience. Avoid allowing the “Text” content to cause an ellipsis (…). Check the landing page link text on desktop by hovering over it. Again, use Section links when linking within the University of Derby website.
Images
Checks for images:
Are they jpg files?
Are they relevant?
Are they the right size and dimensions [if in doubt, download to double check]?
Have they been optimised (gone through TinyJPG)?
Do they have alt tags?
Hero images particularly are tricky. Always check your page preview to see how the heading sits over the image and also check how it appears on mobile. You do this using right click/inspect and clicking on the mobile view icon.
Using an abstract image in a hero avoids the text overlay/mobile issues.
NB when loading images to the Media library, make sure the images you upload have unique file names. If not, you could find images overwriting each other or a 3:2 version of the image being seen on the page instead of the 1:1 version. It’s good practice to add “hero” or “square” or “3x2” at the end of the file name before you upload the image to the Media library.
Image sizes
Hero: 2560x1600 pixels
Image embed:
3:2 – 2000x1333 pixels
4:3 – 2000x1500 pixels
16:9 – 2000x1125 pixels
Image group: use two or three images of the same dimensions ie all 3:2, all 4:3 or all 16:9
Media gallery: all images 3:2
Full width: 2560x1600 pixels or 2560x800 (letterbox)
Promo block: 3:2
Landing page link: 1:1 (square)
Impact quote: 1:1 (square)
Staff profile: 1:1 (square)
Optimising images
This is what you do with TinyJPG. The general rule is that hero images [and full widths] will be a maximum of 0.6MB but possibly less. All other images should be well under 0.5MB. You will need to be in T4, not just on preview, to check this.
If your file sizes are too big, it is a sign that they have not gone through TinyJPG or that they are png files rather than jpg files. It’s easy enough to change from a png to a jpg. Simply open the png in Paint and save as a jpg (or jpeg).
Optimising images makes the file size as small as possible without losing picture quality and means the website loads more quickly, improving the user experience.
Alt tags
These alternative descriptions of images allows users who can’t see the images understand what they show. Alt tags are a requirement for accessibility. You can check an image has them by inspecting the page (right click/inspect) or by finding the image in the Media library in T4.
Video (media embeds)
Your first check with video is to preview the page to see that a thumbnail image is being pulled through from YouTube. If not, you’ll see only the play button on the page. In this case, you will have to add a 16:9 image (2000x1125 pixels) using the Select media button.
And always check that the link is working correctly and that the video plays.
Alt tags
You must fill in the alt tag field with a short description of the video thumbnail.
Transcript
All videos should have a transcript. These describe dialogue and action/scenes. Even a fly-through video should have a list of all the places visited.
Media name
When you’ve done all your excellent transcript work, don’t forget to add a short, snappy media name. This creates a link on your page to the transcript in the format “View [media name] video transcript]”. So you don’t need to add the word “video”. Or “transcript”. Check on preview that this reads well.
Title/intro
We have introduced the title and intro for media embeds. This improves the user experience, providing clarity about the content.
Closed captions
These will be on the video when you open it on the page (or within YouTube). All our videos now should have edited closed captions. You will know they are edited because they will not say “English (auto-generated)” when you open them. If they say “Spanish (auto-generated)”, they definitely haven’t been edited.
Audio description
Some videos published on or after 23 September 2020 may need to have an audio-described version. If an audio-described version exists, you add its URL (web address) to the “Audio description” field in the Media embed. The words “and audio description” will then appear in the link generated by the media name. Videos that do not need audio description are simple talking head videos with no change in the visual content or videos where changes in the visual content are described already in the dialogue/narration.
Key stats
Make sure the information has been formatted correctly in line with our Key stats guidelines. The essence of this is to make sure the important information is in plain (and therefore large) text and anything around it, such as the ‘st’ in 1st, or the k in 10k, is in superscript of subscript. Add context and references (in the footnote field). Always check how it looks in preview.
Section config
Does your page have a section config?
Every page needs one of these. They are vital to the correct operation of the website.
In general, you will only need to call this “section config”. There is a special case with staff profiles when the section config should be called “section config - [last name], [first name]”.
Abstract
The “abstract” field should contain a description of the page. This should contain relevant keywords to the content of the page but must be written in clear sentences. This is important for SEO, as it will be the content seen under the page title in any search lists, either on the website or an external search platform, such as Google.
Thumbnail images
If images have been added to “Thumbnail image square” or “Thumbnail image rectangle”, check that these images:
Are relevant to the page [an issue if another page has been duplicated to use as a template]
Are jpgs – not pngs
Are 2000x2000 pixels (1:1) for square or 2000x1500 pixels (4:3) for rectangle [the square will pull in for landing page links and the rectangle in events and news lists]
Have gone through TinyJPG or another image optimiser [the file size should be well below 0.5MB]
Content type tags
If your page is a case study, course, course taster, event, news, staff profile or blog post, you need to select the relevant “Content type tag”. These tags appear in the hero at the top of the page.
The remaining tags and fields can be used where relevant, depending on the type of content you are creating.
Preview
Always preview your page before you publish. Always. This will show up any obvious issues with items such as Key stats, videos not pulling in thumbnails from YouTube, other image issues etc.
And check the page in mobile view to make sure nothing is forcing horizontal scrolling.
Horizontal scrolling
Horizontal scrolling commonly happens when you have long words in page headings (H1), incorrectly formatted tables, or long strings of text with coded (html) spaces (often around links and buttons). We have some additional guidance on this.
Content guide
For additional detail on how to use all the items within T4, please go to our Content guide.