Standard pages
How the main article and feature pages on gold.ac.uk should be made using a range of different slices.
Primary page content
We have two versions of our standard page:
- Standard: Two column - the default page to use. It should always have a second column of related information
- Standard: Full width page - better for feature pages, especially where large images are going to be used. Should be used if there aren't any related information for the second column. Forms should use this
The majority of slices work on both, with the exception of image ones that need the full width of the page.
Start of pages
The subject of the page or name of service in a few words.
Must:
- Use words the audience would be searching for. These may be different to what the content is called
Should:
- Be one line
Must not:
- Be longer than two lines
- End with a full stop
Should not:
- Use abbreviations or acronyms unless they are commonly used terms people will be searching for. If they are used they should be explained within the page
This is a short description of what is the page or service is about and should confirm to the user they are on the right page. It works together with the page title.
Must:
- End with a full stop
Should:
- Assume the reader knows nothing about the page’s content
- Be one or two lines long
Must not:
- Be longer than three lines
This will change for pages in the new Visual Identity.
The background and text colour of the area on the left is dictated by the section of the website the page is in (eg the Students section is green and yellow).
The image defaults to one of the Ben Pimlott squiggle.
It can be changed to be:
- An image that represents what the service provides - this must have a gradient map with the bottom left colour in Photoshop set to 55 – 66 – 74.
- The visual identity of the service - this does not need the gradient map
The standard image size is 1216x347. For services with a large image on the their landing page it is 1216x640.
Text
Remember you are writing to read on a screen and most people will scan the text rather than fully read it.
On the web, what you would normally write as a single paragraph should be split into separate lines under a header.
Must:
- Split the text into sections, each with a header that explains what the section is about
Should
- Paragraphs should be two to three lines long. Usually one to two sentences
Use these to break the page into sections, so they are easier to scan and navigate.
Must:
- Start with H2 and cascade down (H1 is the page title)
Must not:
- Be used to emphasise text
- Be links
- Headers shouldn't be questions
Body text
Must:
- Link text must explain what the link is to
Should:
- If linking to an external website give the domain, especially if the user will be performing some kind of transaction. Example ‘Book on Eventbrite.com’
Must not:
- Be non-descriptive like ‘click here’ or ‘find out more’
- Be the full URL or include the http://www. – i.e. not http://www.site.com/page.html
Related links boxes
In addition to the above, these links should not wrap onto a second line. They must not wrap onto a third.
Used when the full text isn't relevant to everyone who visits the page.
And if the full text will push other important content down.
Preferable to accordions.
Accordions should only be used in certain occasions. Consider if 'Text: Show/hide content' is more appropriate.
These are used to contain text that may not be relevant to all visitors to the page. Or if different visitors need different information about the same topic.
They should be used with care as they add friction to the page, requiring the user to click rather than scan.
They should not be used simply to make long pages shorter. If the user needs to read everything on the page then do not use accordions.
If needed text and links should be repeated in accordions as the user will not open ones not relevant to them.
Used to bring the attention of the reader to an important piece of information.
Yellow is used when it is the main call to action (usually a link).
Blue is used to highlight important text.
Must not:
- Be longer than three lines
Be careful not to overuse on a page as it will reduce its effectiveness.
There is a slice for this kind of text with an option for show more. The line can also be added using class="highlight" or class="highlight-blue" on the p or div tag.
Must:
- Be used to warn people if the content of the page is not relevant to everyone and link the correct source of information
Should:
- Be used at the top of the page
Should not:
- Be more than two lines long
Contact cmr@gold.ac.uk to add a new table to a page. Copying a table from Word or Excel will not format the table correctly for accessibility.
Must:
- Only be used for tabular data Have a heading row with a title for each column
Must not:
- Be used to format or control the layout of text on a page
Should:
- Have a heading column with title for each row if required
Could:
- Have a caption to title the table
If the table contains a lot of rows/columns that will be wider or longer than the page alternative ways of presenting the information should be considered.
These are for:
- non-academic staff with student or public facing roles
- Visiting fellows, professors, tutors, associate teaching staff and technicians
- Emeritus Professors
See guidance on the CMR intranet.
Details of the person's role at Goldsmiths should go first. Any biography or further information about their background goes in the 'read more' section.
Ideally they will always have photos.
Recommended on longer pages to clearly show the break between sections (H2s).
Full width pages only.
Used when we need to log changes to the page.
Shows last updated date and a short dated sentence on each change.
Images
If you have a lot of images on the page use the full width page.
Images should not be inserted into the text box in the CMS (we realise this template guide breaks this rule).
If the image is decorative or does not contain content the reader of the page needs to know, then the Image Alt text must not be filled out.
Full width galleries
See campus tour and graduation galleries for examples.
Gallery: Full viewport image - can be used for a long thin image. Provide a mobile alternative if it is
Gallery: Single image - can be portrait, square or landscape
Gallery: Two images - recommended 620x420 for landscape, 620x775 for portrait
Short captions and credits can be added.
Gallery: Pop-up
See degree show for example.
Can be any size image but test on desktop and mobile.
This can be used on full width pages to place an image in one 50% column and text the next 50%.
See the visa guide for an example.
Images can be left or right. On mobile the left image appears before the text, the right image after.
Image can be any width and will centre.
Calls to action
Used to highlight the main action required from the user on the page.
Yellow is the main CTA on the page and should only be used once. Linen is used for secondary buttons or if there is a large number of buttons in a group.
Must:
- Clearly identify if it is linking to another website
Must not:
- Be used for anything other than a link to something the user has to do
- Be longer than one line. Supporting text can be written above or below
Should not:
- Be used more than once on a page for different actions
This is used when the main call to action on the page needs an explanation or multiple links.
It covers different types of action:
- Go to - another web page
- Read - a document in the browser*
- Download - a document to perform an action
- Contact - someone
*In general, Read should be used for a PDF the user is expected to read within the browser.
It can be used in a variety of ways:
Any instructions must be short and pertinent to the main action. Guidance should be in the body text of the page.
Only one CTA box should be used on a page.
This uses Block container: Event booking and Block: Event booking.
Block container: Event booking should contain a message that displays if there are no upcoming events.
Events
Must
- Title be one line
- Button be one line
- Set to expire after the event
- Check on mobile
Should
- Be used on the full width page. It is very tight on the two column page
When there is only one event the button should be yellow. When there is more than one event the buttons should be linen.
Navigating within page
Used on long guide pages to anchor down to sections.
Must:
- Match the headings each line links to (or a shortened version)
Can:
- Be used to link to content on other pages if listed under a second header 'On other pages'
This should be used to filter the user to different pages depending on what they need or who they are.
Questions must be a short question with a ? at the end
Options should be short and fit on to one line. They must not be more than two lines.
Embedding content
Content embedded from other websites will usually use cookies.
Therefore their use must be controlled via our cookie control. This means using the Embed slices in the CMS.
Second column
Must
- Have a header that explains what the links are about
- Use bullet points to separate links
Should
- Keep links to one line, maximum two
- Use additional boxes for different subjects
Can
- Be used for text
- Include an image for a logo
Must
- Only be used for related information, and not information that is directly about the subject of the page
- Be brief
This must only to be used when:
- there is an action the user may need to do in connection to the subject of the page
Must:
- Only contain a few words