- 6 - Selecting images
- Further tools and resources
- 10 - Analytics
- YouTube
- 9 - Social Media
- Alert (Extranet only)
- Featured Guidance (Public website only)
- What's New box (Public website only)
- Home slider (Extranet only)
- 8 - Promotion of content on the digital platforms
- 7 - Logo use and brand colours
- Writing content for NPSA
- 2 - Pop-up Video
- 1 - Embedded Video
- 5 - Embedding videos within content
- Web page Design
- Disclaimers and Copyright
- 4 - Style guide principles
- 3 - Meeting accessibility requirements
- 2 - Writing your content
- 1 - Start with a user need
Writing content for NPSA
We have developed the NPSA content playbook to assist staff in developing clear, easy to understand information. The steps outlined here provide a guide for content owners to follow, outlines the design system and how to meet accessibility requirements.
This content playbook is continuously updated so we welcome your feedback on how it can be improved.
Please speak to the NPSA communications team for further information.
1 - Start with a user need
When creating content, its important to understand your users. Asking the right questions will help you do that. You'll need to find out:
- who your likely users are
- what they're trying to do
- how they're trying to do it now
- how their life or work influences what they do and how
- their current working experience and organisational risks
2 - Writing your content
Use the following tips on how to write your content.
Use meaningful headings
Meaningful headings make your content more accessible as they help users navigate the page. You should remember to format headings correctly using markdown.
Explain all abbreviations and acronyms
Before using the acronyms, you should explain the term first and include the acronym in brackets e.g. Operational Requirement (OR). You do not need to explain acronyms that are well known and in common use, such as UK, EU or VAT.
Keep sentences short
Read the sentence aloud. If you have to take a breath, you need to shorten or break up the sentence. Avoid wordiness by cutting useless modifiers and breaking up long thoughts into several sentences. If the topic is complicated, balance it by using short sentences to explain things.
Keeping sentences short helps with accessibility.
Plain English Examples
Readability: Grade 15
Readability: Grade 10
Use descriptive links
Using descriptive links helps users know where a link will take them, or what downloadable linked content is. Do not use "click here" as link text.
Click here to download our terms and conditions
Change to: Download our terms and conditions (PDF, 4.2MB)
Go to this webpage for our masters course list.
Change to: The Courses for 2019-20 page has a full list of our masters courses.
Visit us our webpages: ww.example.co/openaccess
Change to: Visit our Open Access site
3 - Meeting accessibility requirements
Content owners should be working to ensure they are following the standard WCAG 2.1 AA, as this is the standard the website needs to adhere to.
Content owners will also need to check that suppliers they are using for content design are following this standard.
Government regulations require accessiblity to be thought about from the start. More guidance on designing for accessilbility can be found on the gov.uk website.
Content must be available to at least one of your senses.
- e.g. for visual impairments can text be increased in size? For hearing impairments is there a transcript available for a video to be read?
Ensure users can find and use your content, regardless of how they choose to access it. Not everyone uses a mouse, some may have to use a keyboard or speech recognition software.
- Can your content be accessed using different input devices?
The content needs to be understandable and accessible to a range of cognitive abilities. Can users understand your content and how the service works?
- Use clear and simple language that's easy to understand, e.g. plain English and short sentences.
- Make sure interfaces are consistent and predictable.
Webpages need to be built to be compatible with the technologies that people are using. Compatibility with assistive technology agents and can accurately interpret content.
- Can your content be interpreted reliably by a wide variety of user agents?
- Does the content work with screen readers or older browsers?
4 - Style guide principles
When designing your guidance you will have to include disclaimers, Crown copyright and think about how to lay it out on our websites.
Disclaimers and Copyright
Templates and FOW are available for:
- Disclaimer for use on one-to-many published guidance
- Handling instructions
- Disclaimer of liability
- Endorsements
- Crown Copyrights
Every piece of work created by NPSA that is shared externally should be marked as Crown copyright so that we are properly asserting our intellectual property rights over the guidance.
- Mark your work with the copyright symbol and the year of creation
- This should be visible on each page of your document
- The logo with trademark is used within the Catalogue of Security only
The Comms team can provide you with the appropriate wording templates for your guidance and is also available on SharePoint.
Web page Design
- Blue banner text provides a brief overview of what the page contains.
- The Excerpt is pulled in to other pages (such as landing pages and search results) and provide a preview of what the page contains too. In most cases this can be the same as is used in the blue banner. Please note, there are restrictions regarding the length, with a maximum number of characters allowed.
- All blue banners and excerpts will have no full stops at the end
Page level/layout | Modules available to use on the page | Page Example |
---|---|---|
Level one - Mega Menu page |
blue banner with excerpt grid layout displaying all related pages/topics |
Personnel and People Security |
Level two landing page |
blue banner with excerpt overview content grid layout for associated content |
Windows and Glazed Facades |
Level three page layout - left hand side navigation |
blue banner or optional image with excerpt side navigation to act as anchor links for longer content pages include the use of bulleted text and call out quotes adaptable content blocks that can be used with background image, colour blocks, content with link and images, gradient content and iconography to highlight content Sub section menus Tabbed content block |
|
Level three page layout - full width |
blue banner or optional image with excerpt include the use of bulleted text and call out quotes adaptable content blocks that can be used with background image, colour blocks and iconography to highlight content |
Forcible Attack Resistant Material (FARM) Project |
Banner and image dimensions
Recommended Size: 1600px x 400px
Upload Size : Less than 500kb
The banner is placed on the homepage, and across the top of each webpage.
Recommended Size: 600px x 200px
Upload Size : Less than 500kb
A mobile banner should be uploaded to be responsive to smaller screens
Recommended Size: 300px x 400px
Upload Size : Less than 500kb
The excerpt image is placed on the page and is pulled automatically into What's New boxes and other fields.
Recommended Size: 2550px X 307px
Recommended Size (Mobile): 720px X 520px
Upload Size : Less than 512 KB
5 - Embedding videos within content
Videos can be played using either Vimeo (OS videos) or YouTube (Official videos). Due to accessibility requirements, all videos will require subtitles and transcripts, of which can be easily incorporated in the video modules we have available. Please ensure you provide us with a transcript, even if your video has no narration.
We actively promote use of our YouTube channel and will, by default, publish all Official videos there in addition to the website. Please let us know if you do not want that to happen.
Additional guidance on using videos can be found here (internal use only).
Videos can be displayed in the two ways listed below:
1 - Embedded Video
When using videos within content, we can embed them onto the page where they will appear as full width. This is to meet accessiblity regulations and provide consistency across the platforms. The sample video below shows the correct dimension. You will also see a link to the transcript. Please speak with one of the communications team for further assistance.
2 - Pop-up Video
We can also use our new functionality of the pop-up video. This video can be linked from any word, however, for accessiblity reasons, they must have a transcript attached.
Please speak with one of the communications team for further assistance.
6 - Selecting images
These websites provide images, icons, etc to be used within your content. We also hold an image library (internal use only) - anything within the library can be used on the public site or Extranet.
More details about using images on NPSA's websites can be found here (internal use only).
Description | Paid | |
Unsplash | The internets source of freely-usable images. The internet's source of freely-usable images. | Free |
Pexels | Free stock photos, royalty-free images and videos shared by creators. | Free |
Pixabay | Royalty-free images and royalty-free stock. | Free |
nounproject | Icons and Photos For Everything | Mixture |
freepik.com | Graphic resources for everyone - Find Free Vectors, Stock Photos and PSD | Free |
icons8.com | Free icons, photos, etc | Free |
7 - Logo use and brand colours
The NPSA logo is used to distinguish our brand quickly and simply. More information is available in the NPSA Brand Book (available on SharePoint), and there are a few guidelines which should be followed whenever using the logo.
8 - Promotion of content on the digital platforms
There are various ways to promote your content on our websites, and these vary depending on whether it is published to the Extranet, Public website or both.
Home slider (Extranet only)
- Imagery to be provided by content owner or request put to Comms Team (see above for recommended dimensions and sizes)
- Six home slides at one time
- Four week duration of home slide
- Limit banner title four to five words
- Limit banner description to 15 words
- Text required is a Title and short description and link to content.
- Text can be black or white, and be positioned left, right or centre, depending on the image
What's New box (Public website only)
- Imagery and text is pulled from the landing page, or can be provided by content owner and put to Comms Team
- Five What's New content boxes at one time
- Limit excerpt to 22 words
- On rotation - newest goes first
Featured Guidance (Public website only)
- For campaigns/guidance collections
- Five featured guidance pieces displayed at one time
- Descriptive text (excerpt) is pulled from the landing page
- Imagery is pulled from the landing page
- Changed every week
Alert (Extranet only)
- Send an email alert as a means of making users aware of new content helping them to keep up to date with the latest information
- Subject of email to be catchy and attention-grabbing
- Include page title, URL of new/updated page and a short description of your content
- If the member is not logged in they will need to login before they can view the page
- Once logged in they will be redirected automatically to the new/updated page
- Space around the logo - There should be sufficient clear space around the logo to let it breathe and prevent its clarity and visual impact from being obstructed.
- Logo size - The logo should be legible at any size. Do not use our full logo unless there is ample space to allow for legibility.
- Do not stretch or distort the logo.
- Images uploaded should be 'optimised for web' (i.e. the file size should ideally be under 200kb).
- Our logo is available in original, white or black depending on the background it is being placed on.
Use the core and secondary palette of NPSA Brand colours to make your guidance interesting and eye-catching.
- The colours we use consist of a core palette of 4 colours and is to be used as the foundation for most publications.
- The secondary palette has been developed to work with the core palette for a variety of graphics and presentations.
- Refer to the Brand Book for the type/weight and graphical objects should and shouldn’t be used in conjunction with each background colour in order to meet the internationally recognised accessible website guidelines produced by the World Wide Web Consortium (W3C), working to AA level where possible.
9 - Social Media
NPSA have a LinkedIn channel for organic posts and a YouTube channel to upload OFFICIAL videos.
NPSAs LinkedIn account is an additional way of sign posting our priority audiences to NPSA advice and guidance.
Adding hashtags to the LinkedIn post will make your content more discoverable
Any spaces or symbols used within the tag will break the link, this means no spaces, apostrophes, commas, exclamation points, or hyphens.
We recommend using 3 hashtags, 2 of these should be big and broad e.g. #security or #risk, and 1 niche hashtag such as #MaraudingTerroristAttack
The ideal length for a LinkedIn post is around 100 characters. The 'See More' button cuts off messages at about 140 characters. As a general rule of thumb, stick to 25 words or less.
Posts with visual content, such as images and videos, typically result in a 2x higher comment rate.
YouTube
10 - Analytics
The Communications Team provide statistics for NPSA content using multiple web analytics services, for further informaiton on the types of analytics we can provide please read our Guide to Content Analytics.
The below graphs show the engagement statistics for our platforms so you can publish content at the highest traffic times.
Further tools and resources
- Hemingway plain english checker tool - The Hemingway app is a third party tool. You must not use it for any sensitive or personal information. You can use the browser-based version, which is free, or the app, which is paid for. Check with your organisation's IT policy if you are unsure.
- Plain English Campaign - An organisation promoting plain english communications. Their website features resources to help improve your writing.
- GDS Style Guide - The Government Digital Service style guide covers style, spelling and grammar conventions for all content published on GOV.UK, arranged alphabetically.