Preview
Always preview before you publish
I'll say it again: always preview your page before you publish. Always. In fact, always preview your page before you send it for moderation or, even, after each time you create a new content item. Checking at the earliest opportunity saves time later on.
Your preview will show up any obvious issues with both accessibility and general content use. This can include headline hierarchy, broken links, incorrectly formatted tables, videos not pulling in thumbnails from YouTube, other image issues etc. And you should check your preview in mobile view. This will provide additional confirmation that your content items are working correctly (and that your page provides a good user experience).
You preview a page in Terminal Four by using the Actions drop-down within the Content tab. The preview will open in a new tab in your browser.
To check mobile view, activate the Developer Tools window [by using F12 on desktop or shift-F12 on laptop or right-click and select Inspect]. Once this window is open on the side of your page, you click on the mobile device/tablet icon and the screen will switch to mobile view. If you are a keyboard-only user, you can tab to the icon and hit return.
For more details on mobile view checks, take a look at our guidance on how to avoid scrolling in two directions on mobile.
What to look for in preview
Let’s look at a few possible issues you will be able to spot in preview.
Image Hero
Choose your hero image carefully. As our image hero guidance explains, abstract images are a good choice because of the way the main heading sits over the image and the way the image responds on mobile devices. The whole hero image doesn’t fit to screen width on mobile as other images do but crops so only the central portion is seen. On mobile, you have to consider both the heading and the call to action button overlaying the image as well the loss of much of the image content off the side of the page.
Your main accessibility consideration with your hero image is the contrast ratio of your links, breadcrumbs and tags (ie how well they stand out against the image). We have more details on how to fix this in our contrast ratio guidance.
YouTube thumbnails
The media embed does not always pull in a thumbnail image from the YouTube video to sit on the page as part of the link. All you will see on the page is the play button.
Your solution here is to add an image to the media embed. You’ll find more information on how to do this in our media embed guidance. You should also test that the video plays correctly by clicking on the thumbnail.
In terms of accessibility, check that your link to the video transcript (and audio description where relevant) is working.
Tables
Tables need to be built from scratch in Terminal Four. If you copy over a table from another platform (such as Excel or Word) it will not sit happily on the page.
The first table here is not correctly formatted. The column headings should show as white on blue, not black on grey.
Gender
| Gender |
Number of applications |
Percentage of applications that received an offer |
Percentage of applications that accepted an offer |
Percentage of applications where the student registered |
| Female |
10,230 |
79.50% |
28.00% |
25.40% |
| Male |
8,080 |
85.20% |
25.40% |
23.00% |
| Other |
N |
N |
N |
N |
The second table is correctly formatted. It has white on blue text in the column headings.
EIMD
| EIMD quintile | Number of applications | Percentage of applications that received an offer | Percentage of applications that accepted an offer | Percentage of applications that led to a registration |
|---|
| 1 and 2 |
7,830 |
77.2% |
27.3% |
24.6% |
| 3 to 5 |
10,010 |
84.4% |
25.5% |
23.2% |
However, be warned, just because a table has white-on-blue column headings does not mean it has been correctly formatted. For a final check with tables, you should go to mobile view (which you can do with this page) as the table will reflow with the columns becoming rows. You will need to check the table still makes sense for the user on mobile and you may need to reconfigure your columns and rows.
If your table has not been formatted correctly, it is likely that it will not reflow on mobile (it will stay in its original shape and go beyond the page width). Your user will therefore be left with a page that scrolls in two directions.
Links
Check any links (internal or external) on your preview page describe their purpose and go through to the correct destination and open in the same tab/window unless the user is warned specifically that it will open in a separate tab/window.
Buttons
Buttons are sensitive flowers and need to be built in a specific, and mildly convoluted, way in T4. You will know when your button is performing correctly because it will sweep from blue text on white to white text on blue when you hover over it. Here's an example (and you can follow the link to find out more detail about building one):
Buttons
NB to see your button correctly in preview after you have constructed it, you will need to save your text block and go to Preview from the Action list in the Content tab. If you use the Preview button from inside the text block, you will not see the finished button (the system adds extra code to the button in the save process).
Images
More user-experience that accessibility, check your image embeds are displaying correctly, that your image group images all have the same dimensions, that your media gallery thumbnail images all have the same dimensions and that they perform correctly (with correct captions) when you click through into the gallery. This also applies to images on landing page links (which should all be square).
Key stats
You'll quickly spot when your key stats are not working properly. This can happen sometimes when a key stat is repurposed and the subscript/superscript gets mixed up. Or you've tried to say too much.
