Skip to content
  • Home
  • Content Playbook

Content design playbook

This playbook helps CPNI staff develop better content and increase engagement with their audience. Following these principles informs how to structure new content and provide a framework for ongoing development

Last Updated 04 March 2022

Writing content for CPNI

We have developed the CPNI 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 is an ALPHA version of the content playbook. We welcome your feedback on how it can be improved.

Please speak to the CPNI 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
  • there 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

Click here to download our terms and conditions

Change to: Download our terms and conditions (PDF, 4.2MB)

Go to this webpage for our master’s course list. 

Change to: The Courses for 2019-20 page has a full list of our master’s 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 - Embedding videos within content

    Videos can be played using either Vimeo or YouTube platforms. 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.

    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.

    Think before you link - Glitch

    Hi, I’m really impressed with your profile

    I represent an international recruitment company and have an opportunity with an overseas client that I think you’d be interested in

    They’re looking for an expert in your field to give a talk at an upcoming conference

    We’ll pay for your travel, and the hotel, plus an appearance fee for the right person

    Let’s connect and discuss further 

    I’ll send you my user details, so that we can talk more privately

    Could you send me your CV and details about your current role and contacts

    And once we connect, perhaps you can let a few secrets slip out about what you do and who you know

    We’ll try to make it feel harmless, but you’ll be giving us valuable information that we’ll put to all sorts of use

    We’ll arrange a meeting, somewhere unfamiliar, perhaps in another country

    We’ll send you all the details about when and where to go and we’ll look after you, even arrange for someone to pick you up

    Then at the meeting, we can bribe you to reveal more or put you in a situation where we can blackmail you 

    And of course, by connecting, we’ll be able to see everyone you’re linked to, your colleagues, everyone who trusts you, details about your hobbies, education and your family

    So, are you ready to connect?

    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.

    Think Before You Link Video

    5 - Selecting images

    These websites provide images, icons, etc to be used within your content.

      Description Paid
    iStock Discover royalty-free images, illustrations and videos that will make you stand out. Yes
    Unsplash

    The internet’s source of freely-usable images.The internet’s source of freely-usable images.

    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

     

    6 - 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.

      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 1 - Mega Menu page

      blue banner with excerpt

      grid layout displaying all related pages/topics

      Personnel and People Security
      Level 2 landing page

      blue banner with excerpt

      overview content

      grid layout for associated content

      Windows and Glazed Facades
      Level 3 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

      Professionalising Security

      Disrupting Hostile Reconnaissance

      Marauding Terrorist Attacks

      Automatic Access Control Systems

      Level 3 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

      7 - 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 (preferably landscape orientation)
        • 6 home slides at one time
        • 4-week duration of home slide
        • Limit banner title to 4-5 words
        • Limit banner description to 15 words
        • 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 to be provided by content owner or request put to Comms Team
        • 5 What's New content boxes at one time
        • Limit excerpt to 22 words
        • 6-week duration of content in What's New box

        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

        8 - Logo usage guidelines

        The CPNI logo is used to distinguish our brand quickly and simply. There are a few guidelines which should be followed whenever using the logo.

        • Space around the logo - There should be sufficient clear space around the logo to let it breathe and prevent it’s 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 blue on white, or white with a transparent background that can be used on any background colour.

         

        9 - Analytics

        The Communications Team provide statistics for CPNI 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.

        10 - LinkedIn

        CPNI’s LinkedIn account is an additional way of sign posting our priority audiences to CPNI 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 reccomend using 3 hashtags, 2 of these should be big and broad e.g. #security or #risk, and 1 niche hashtag such as #MaraudingTerroistAttack

        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.

        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.

         

         

        Did you find this page useful? YesNo
        Thank you for your feedback. If you have any further suggestions on how this information can be made even more useful to improve your experience, feel free to share details below.
        Thank you for your feedback. Sorry to hear that you haven't found this information useful. Please help us improve your experience and share how we can make this information more useful for you.