LightNight parade

LJMU online style guide

Style guide for online content

The following style guide relates to online content managed by the Digital Marketing Team, it is a work in progress. If you have a suggestion or question about the style guide please contact the Digital Marketing Team.

Please use the guide alongside the LJMU online brand guidelines and content strategy, available upon request.

Tips for online copywriting

  • Plan ahead: write a page plan (templates are available from the online copywriting team) before you start writing so you know who you are targeting, what their needs and wants are (and how we can address those), sources of information, appropriate media to accompany the copy, etc.

  • Headlines: you need to grab your audience, so make sure you give your headline some consideration. If you’re stuck for ideas you could try phrasing the headline as a question, provide a list, ‘how to’, or step-by-step guide to try to address the reader’s concerns. Use keywords wherever possible. Do not mislead your audience and try to draw them in with a headline that doesn't reflect the content 

  • Consistency: as there are a number of contributors/editors on the LJMU website, it's important to be consistent in tone of voice, language, terminology used, etc. Check this document or other webpages if in doubt

  • Instructional copy: this is probably some of the most important copy you’ll write so give it careful consideration. Is it helpful? Will it guide users on their journey? Go through the activity yourself before you write about it
  • Read it aloud: check your copy for sense, does it use natural flow and language, is it engaging?

  • Break up your copy: don't give users long reams of text to read, break it up with subheadings, use bulleted lists, insert quotes/images, stats, etc.

  • Reduce your text: edit and edit again, keep it as short and to the point as possible

  • Use links within your text: the website is meant to be a journey for users so point people to useful information, especially within our site and useful external sources if we don’t host the information
  • CTAs: every page should have a call to action, but try to limit these, so users know what to do next. For main CTAs you can use the blue button

Titles/headers

  • Use sentence case for titles/headings
  • The main banner headline should not be duplicated word for word on the body copy headline or subhead
  • There is no need to use a full stop at the end of introductory headers
  • As a default use <h4> tags for subheadings within text (although there may be instances when <h5> or <h3> is appropriate to use, in particular when trying to match the display of components used on the page, please refer to existing pages for reference)

Spacing

  • Only use one space between sentences – not double spacing
  • Only use single para breaks between paras – not double spacing

General copy guidelines

  • Use plain English wherever possible; try to avoid university, sector or subject-specific jargon
  • Use English spellings not American
  • Spell out acronyms that aren’t in common use (exceptions: when in banner headings and the heading would be too long to incorporate, in this case be sure to spell out the acronyms in first mention of body copy)
  • Mistakes such as typos, spelling and grammatical errors could potentially be damaging to LJMU’s reputation as a quality provider of higher education so it is essential that you always proofread copy before publishing
  • Do not use ampersands unless as part of a name/logo
  • Do not use exclamation marks
  • Be aware of supplied content using upper case on words that do not require it and change to lower case
  • When separating items with ‘/’ do not put spaces before or after the / e.g. apples/oranges
  • A full stop at the end of a quotation goes inside the quote marks if the material quoted is a complete sentence, outside if it is not.  For example: He said: “I enjoyed my time at LJMU.” He described his time at LJMU as “very enjoyable”.
  • Government – use capital G only in the phrase the Government, meaning the present or a past government.  Otherwise, use lower case – government policy, a future Labour government, etc.
  • University – use the capital U when referring to LJMU or another specific university e.g. “The University has bestowed an Honorary Fellowship”
    “Most universities to charge £9,000 fees”
  • Avoid using ‘whilst’
  • North West – use capitals only when referring to the North West. Otherwise, use lower case e.g. in the north west of England; travel in a north westerly direction
  • In a simple list, separate each item with a comma, but do not put a comma before ‘and’. In more complex lists, to aid readability, a comma before ‘and’ may be helpful and is permissible
    For example: The Director of the School of Natural Sciences and Psychology, and the Head of the Centre for Entrepreneurship both attended the event.
  • Collective nouns are singular in most cases, ie, the team is improving

Bulleted lists

  • Use bullets in place of long paragraphs whenever possible to make the copy more concise and easier to understand
  • If the items in a bullet-pointed list do not flow directly on from the lead-in text to form full, self-contained sentences, use an uppercase letter at the beginning of each bullet point

  • For example: 

    We offer a range of services for students.

    • You can have free one-to-one counselling
    • Our trained staff offer study support
    • The Student Advice and Wellbeing team provide financial advice
    • iPads are available in the libraries
  • If the bulleted items form complete sentences when put with the lead-in text they should begin with a lowercase letter (unless an initial uppercase letter is required – e.g. proper noun). Always ensure that each bullet point makes sense as an extension of the lead-in wording

    For example:

    Students can access:

    • counselling services
    • study support
    • Liverpool-based medical services
    • financial advice
    • iPads
  • Do not punctuate at the end of each point (no full stops)
  • If a bullet point contains more than one sentence it is permissible to put a full stop at the end of each sentence, but not the last sentence, within that bullet point (so the bullet point ends without a full stop)
  • For long lists of bullets (use your judgement, perhaps more than six) split equally into two columns in order to keep the page short (two columns will stack on mobile)

Commonly used words and phrases - correct versions

  • full time and part time – “The course can be studied full time or part time”, however when it is used as an adjective use the hyphen: “It is a part-time course”
  • higher education and further education
  • a subject is lower case, a specific course is upper, ie: sport science vs BSc (Hons) Sport and Exercise Sciences 
  • lecturer not Lecturer
  • use -isation rather than –ization
  • A Level
  • IM Marsh – no space or stops between I and M
  • Mr/Dr/Ms etc. – no full stop after title
  • no one – two words
  • under way – two words
  • practice (noun), practise (verb)
  • Professor (do not abbreviate to Prof.) Capital P is used for the title Professor. Otherwise use lower case – He is a university professor
  • Pro-Vice-Chancellor
  • Vice-Chancellor
  • online – no hyphen/spaces between
  • webpage – no hyphen/spaces between
  • website – no hyphen/spaces between
  • etc.
  • BA, MA, PhD
  • masters course (use masters… not masters’ or master’s)
  • abbreviations – where possible use ‘Liverpool John Moores University’, especially when mentioning it the first time on a page. Thereafter, the only acceptable abbreviation is ‘LJMU’. When mentioning a School/Centre for the first time on a page, spell it out in full – e.g. General Engineering Research Institute (GERI). Thereafter the abbreviation may be used
  • Great Britain: is made up of England, Scotland and Wales; the United Kingdom also includes Northern Ireland
  • use en dashes within text in place of hyphens (html: &ndash;)
  • Ensure correct Faculty/School/Centre/Department name is used, eg it is the School of Sport and Exercise Sciences and the Research Institute for Sport and Exercise Sciences
  • Use upper case ‘Faculty’ or ‘School’ only when referring to a specific Faculty or School e.g. At LJMU we have four faculties

Numbers, dates and times

  • Use commas to separate groups of thousands: 880,010
  • Use % rather than per cent
  • A range of years should be expressed in the form:  2005/07
  • Telephone number format: +44 (0)151 231 0000
  • Dates should take the form 6 June 2005 – don’t use ‘the’ before date or th/st after number
  • Times should be written as either 1.00pm to 2.30pm or 9.00am – 5.00pm (with spaces before and after the dash and no space between the time and am or pm). Do not use the format “between 9-11am”
  • pm/am/midday/midnight
  • Spell out numbers between one and nine, anything after than should be represented in figures except with abbreviated units of measurement and with percentages (eg: 4%). Never start a sentence with digits

Emphasis

Italics:

Books/films/songs: Titles of books, journals, plays, films, musical works etc should be given in italics if they are a complete published work; if you are referring to an individual short story, song, article etc within a larger publication, use quotation marks

Underlining:

Avoid using underlining for emphasis; this suggests a hyperlink

Links

  • When linking to an external website ensure the link is set to open in a new window
  • When linking to an internal webpage the link does not need to open in a new window
  • Ensure links to pdfs are set to open in a new window – this is really important as the user will shut down their browser (our website) when they close the pdf
  • Always link dynamically on the website, don’t use absolute/relative links unless there is no other way to link to the page on our website (ie. when linking to a particular search on the course factfile, PGR, PGT, etc.) Linking dynamically is really important as the system alerts users to broken links so the user can relink it and avoid having broken links on the site
  • Do not use ‘click here’ or ‘here’ as link text as they are not good for accessibility/usability/seo. Instead use descriptive text (note: you don’t need to include the action in the link text) (guidelines are here: http://www.w3.org/QA/Tips/noClickHere)
    eg: View Dr Smith’s profile
    Download the undergraduate prospectus
  • Avoid using long link text, no longer than 4/5 words, you can instead link the key part of the phrase, such as: Find out about the Centre’s research into primates
  • Do not use naked links (full URLs) as text links (unless it is a part of terms and conditions and similar type of content where there is a requirement to do so)
  • Also try to avoid spelling out email addresses within the body copy, instead you could link across the key words such as: Please get in touch with us to find out more. If you do need to include the email address, for a contact us section for example, they should be displayed as all lower case: staffdevelopment@ljmu not StaffDevelopment@ljmu
  • If a link occurs at the end of a sentence you should include a full stop but do not include the full stop within the link or link text
  • If you’re sending a user to the intranet and a password is required, indicate this by including (log in) following the link but not included in the link text
  • Be aware that what you name a page will make up the tail end of your page's URL, so keep it short but also keep in mind keywords for search engine optimisation

CTAs

  • Do not use CTAs such as ‘Find out more about…’, unless you have provided sufficient content leading up to that line. Otherwise if it’s the first time the user has been introduced to the topic you should just use ‘Find out about…’
  • Try to limit the number of CTAs on a page, but all pages should have at least one
  • CTAs should be obvious on the page and also indicate where the user will be taken to

Layout

  • Do not justify text as this is harder to read, text should be flush left
  • Try to use testimonials as much as possible, these should be used in quote components as a device to break up text (note that when omitting a word or part of a quote use ellipses to indicate this)
  • For any figures or stats bring these out of the text into a rotational quick facts component or key figures component
  • Enter text without non-breaking spaces (especially in places such as the Key Figures component) as once this page is reduced in width (mobile view) the spaces display between text

Addressing your audience

  • Ask whether the information you want to add to the website is useful to the audience, if so further examine it to determine what aspects are most useful to narrow it down, decide what questions this user would be asking about the topic – and then answer these in the text in a concise way. Anticipate what might stop them from proceeding further on their journey on the website and address any potential blocks – ie have you provided them with a link to the next steps, every page should have at least one CTA
  • Wherever possible address the student as an individual and reflect their point-of-view, not the University’s. Try to avoid ‘we’, ‘us’, ‘our’. Instead use ‘you’, ‘your’
  • Pages should inform and inspire, language should be clear and accessible

Copy length

  • Try to keep sentences/CTAs/paragraphs/pages concise, for most types of content people tend to scan rather than read
  • Try to limit paragraph length to 3-4 lines
  • Break up text with subheadings and bullet points to help readers skim over the page to get to the information they need
  • If some of the content lends itself to a collapsible/expandable dropdowns (faq component) add this to your page to shorten the page length

Time-sensitive content

If you are adding content with dates ensure that you make a note of when the dates are due to pass so you can update the page, or set the page to automatically be unpublished. If you can initially edit to remove any time-sensitive content then do so.

Duplication of content

  • Avoid duplicating copy across the site, instead signpost to the existing information with brief introductions or visual links (section links)
  • If duplication is necessary, try to add the information into a component so it can be used in multiple places and then if any updates are required it only needs to be changed once to be reflected everywhere
  • If duplication can’t be avoided, ensure that the digital services team update the robots file to exclude the duplicate content from search, also exclude the item from site search within the CMS
  • Try to write a unique synopsis for each page rather than copying and pasting from elsewhere, likewise when writing meta descriptions

Interactivity/shareability

  • Your content might best lend itself to more interactive formats: videos, infographics, lists, step by step guides, animations, FAQs, other sharable content
  • Include social media feeds/references in text where applicable

Images

  • When using image carousels try to use the text elements/captions to explain the image wherever possible
  • Images need to be resized/cropped to fit their intended use (depending on whether they are going to be used as section links, banners, gallery images, etc.) Images should be resized to fit the dimensions of the particular section they will be used in a Photoshop before they are uploaded to the website rather than choosing the incorrect-sized image from within the CMS media repository
  • As banner images are letterbox in style they should be carefully resized and cropped so that the majority of the subject is on the right-hand side without it being hidden by the blue title bar. Also ensure that 360px height banners (for courses) are uploaded distinctly from 290px height banners.
  • Try to use images that enhance/compliment the subject matter. For example, don’t use an image of the interior of an empty building when the topic is about providing support.
  • Images, like copy, should inspire and should be inclusive
  • Naming conventions: ideally image filenames should be named according to where they are going to be used/subject area and include the dimensions of the image within the name itself, ie RISES_biomechanics_research_1320x290px.jpg, so that on first glance other CMS users can see the dimensions and it gives an idea of where the image belongs/what it is
  • Organise images within the media repository in a meaningful way by naming folders according to type/size
  • Ensure that any copyright info is included in captions

Alt tags

Alt text is used for screenreaders and if the viewer can’t or chooses not to view the images. The context of the page helps determine what information is useful as alt text for an image. Alt text should generally be short.

Generic illustrative – stock image or photo to illustrate the copy: not necessarily obvious from the copy what this would be so describe quickly and literally, eg ‘Wooden hourglass on wooden surface’, ‘Man’s hands in handcuffs held behind his back’. This is information that is unlikely to be included as a caption so should be included as alt text.

Specific illustrative – if the image is of a specific thing or place it is best to describe it in specifics, eg ‘Canary Wharf at night reflected in the Thames’, rather than ‘Tall office blocks at night reflected in a river’; the former is still indicative of the latter but gives useful extra information. ‘Bandstand in Nice used as a memorial with flowers and French flags’. A caption may provide the specific information, in which case the alt text field can be left blank.

Specific individual – likely referenced in the copy, so the name is usually enough. Extra illustrative information may be helpful if relevant to copy, eg ‘Sandra Edmunds in the field’

Group – either a quick description, eg ‘Large group of students in a workshop room’, or mentioning a specific individual/group already highlighted in the copy if relevant, eg ‘Betty and other students pose for a selfie’, ‘Law student debating finalists’. Again this information may be included in a caption, in which case the alt text field can be left blank.

Useful information about context for images: http://webaim.org/techniques/alttext/

SEO

  • Consider the words/phrases that your audience would use when searching on Google and incorporate these and similar words/phrases within your copy
  • Ensure the synopsis and meta descriptions use the keywords/phrases to aid search
  • Meta descriptions are truncated so try to keep them to 160 character limit
  • Give some thought to the synopses, these are displayed on the internal site search (or as summaries when used in news, features, blogs), they should be concise but descriptive and give an indication of what the user will find on the page
  • Do not overload your copy with keywords, using natural language will always work best for SEO
  • Write in the pyramid style and keywords/phrases should naturally load towards the top which will help SEO