General principles

The guiding navigation principle of our website is to show users a glimpse of something they might find interesting: an informative or intriguing headline; a lively, apposite and concise introduction; a high-quality, interpretive or illuminating image (when available). We then aim to deliver them to relevant pages as seamlessly as possible, led by their interest. Research shows that website engagement diminishes radically with the number of clicks needed to reach content. Accordingly, the site structure is as ‘shallow’ as possible. This ‘content journey’ is augmented by a standard ‘burger menu’ – represented by the three lines at the top left of the site, which allows users to quickly locate the top-tiers of content.

With this in mind, the structure has been designed so that users with a range of different motivations may quickly find the content that they are interested in: from first-time park visitors who simply want to check how to get to the park, to members of the local community who want to keep up to date with events in the park, and so on. Bear in mind that none of these user groups is likely to have a lot of time on their hands, so content needs to be clear, appealing and succinct. Much of our content will not have the luxury of good accompanying images, but those that do – important news and events, for example – can be highlighted prominently on the home page.

Home page visibility should be considered with special care. For the reasons outlined above, there’s a lot there, so we need to signpost it clearly and make it engaging. If returning users see new and interesting images and headlines each time they come to the site they will expect more, inspired to return more frequently, providing us with greater opportunities to tell the story of the park and instil our message. A virtuous circle.

Webflow

Our website is built using Webflow, an application that enables the design and construction of responsive websites with browser-based visual editing. Webflow was selected following a review of available options on the basis of flexibility (our needs are quite specific) and reliability (it runs without the need for third-party plug-ins, is powered by Amazon Cloudfront and hosted on Fastly).

The CMS (Content Management System), which enables us to create and edit content, has two main views: WYSIWYG (‘What You See Is What You Get’), with point and click control over existing content; and ‘CMS Collections’, which enables new content to be created and edited at a much more detailed level. However, both operate within parameters and it is important that all website Content Editors aim to follow our guidelines.

Additional third-party software can be considered for integration, or to work alongside Webflow, but these solutions need to be properly reviewed and tested for suitability.

‍Editing the website 

Designated Content Editors will receive an email invitation. After following the confirmation link in the email, these collaborators create an account by setting up a username and password in order to login to the site's Content Management System Editor. Passwords must be a minimum of 10 characters and should include one uppercase letter, one lowercase letter, and one number.

To begin editing, follow the link in the invitation email, or simply add /?edit to the end of any URL within the site. From there, you should be given access to the editorial tools at the foot of the page. 

The following concise guidelines presume users have access to the CMS Editor, wherein, additional notes are appended to the individual fields for specific guidance. More detailed generic information can be found here: https://webflow-editor-guidance.webflow.io/ (please note that as this is a general guide, not all options may apply).

Please refer to the user notes within the CMS, which provide further details about specific content fields.

Content structure

There are three kinds of content that Collaborators can create and edit.

The site is constructed as generic ‘TOPICS’, which collate specific ‘POSTS’, ‘SNIPPETS’ and ‘FAQS’:

• thus, a TOPIC is an aggregation of specific POSTS on a given theme, e.g. all the News, all the Friends, etc, which primarily provides links to that specific content, but can additionally have its own text, an image, an introduction and some key facts (which is the smaller prosaic information in blue text);
• TOPICS will not ordinarily be added or removed, as this will affect the home page and Navigation Menu, but the content within them may be edited and POSTS pinned to them;
• POSTS pages are ‘pinned’ to and thus linked from relevant TOPICS page(s);
• a specific POST might be a single piece of ‘News’; a particular ‘Thing to do’; etc;
• POSTS will generally have richer content than the conduit Topics pages, and may include videos, maps, etc;
• SNIPPETS and FAQS are not pages, but small pieces of reusable self-contained content;
• for each type of content there are mandatory and optional components, as indicated in the Content Management System.

Most of the editors’ work will be done under the ‘Collections’ tab, under the ‘POSTS’ heading. Here, you will be able to create, edit and delete individual pages. 

Note that POSTS may be ‘pinned’ against multiple ‘TOPICS’, using the ‘Multi-topic tags’ function when creating or editing an individual POST. A single POST can therefore appear underneath multiple TOPICS. For example, in some circumstances a POST may be deemed to be a piece of ‘News and Features’, as well as an ‘Event’ and a ‘Notice’, therefore pinned to all of those TOPICS. 

POSTS may also be featured on the HOME page in the “Hero” area at the top of the page (only for POSTS with great images), and/or within the HOME page grid, which is an overview of all the TOPICS. 

The HOME page grid lists all the TOPICS by name, plus, in most cases, their general summary/intro text. The summary/intro texts can be edited using the CMS. Within the ‘Notices’, ‘News and Features’ and ‘Events’ TOPICS, individual POSTS may be pinned. Although they may only appear under one of those headings on the home, to avoid duplication, they will nonetheless feature on all of the linked TOPICS pages to which they have been pinned. Note that it is possible to set a POST to appear within the home page grid as well as in the top Hero area, but such duplication should ordinarily be avoided. 

NB: POSTS that are featured on the HOME page should regularly be changed, to prevent the site appearing stale.

Creating a post 

When creating a POST, try to choose a concise title that pairs well with an initial intro. These two elements, plus a “hero” image (i.e. most important image for that post), if set, will be visible from other, linking, pages. This information will be key to capturing the reader’s interest.

There are various fields in the CMS that can be used to create rich and interesting content. But please bear in mind that most of these are optional fields and the most concise form of content will usually be the most successful. 

The CMS structures POST content in the following order:

• title c. 1–5 words;
• key facts (a distillation for those without much time, and/or links to other related content);
• intro, c. 50–65 words;
• main text, circa 100–250 words;
• Google Map + caption, optional (will display full content width);
• continuation text 1, optional, circa 50–250 words (places text after Google Map, when used);
• video + caption, optional (will display full content width);
• continuation text 2, optional, circa 50–250 words (places text after video, when used);
• image + caption, optional (will display full content width);
• continuation text 3, optional, circa 50–250 words (places text after image, when used).

The object of the continuation text fields is to allow a more interesting structure in relation to the associated (optional) map, video and image fields, i.e. rather than having all the text in one run. (So you will not need to use any of the continuation text fields unless you are utilising the preceding map/video/image field.)

NB: TOPICS are structured similarly to Posts, but with no video option and therefore fewer inter-text fields.

Publishing

Be careful when publishing: the main blue “Publish” button will make all changes saved by all Contributors live, so it is generally best to publish specific TOPICS/POSTS/SNIPPETS using the menu below the green “Save” button. Set pages to “draft” or schedule when the content goes live in order to avoid accidental publishing. 

Text style

All text should be written concisely. Main text fields should be written in a bright, cheery, welcoming style, while key facts and captions should be short, simple and informative. Please follow our general principles to be found in the Guidelines chapter 4: Fonts and typography. Additionally, the BBC and The Guardian have free online style guidelines that will help with many points of style. For further information on typographic elements, including characters to copy and paste, see TypeWolf’s cheatsheets.

Paragraphs

Paragraphs are set in the HTML styles with the correct space after each, so only a single full break is required, not double breaks. Please ensure that copy which has been copied and pasted into the CMS fields from other sources does not include double paragraph breaks.

Also, please note that pasting into the CMS will unfortunately result in an extra, unwanted paragraph return at the end of the pasted matter, which must then be manually removed. 

Email links

As full email addresses can be very lengthy – especially ours –  it is usually best to embed email address links within a name or a descriptive word. Within HTML they will be treated as an unbreakable word and can consequently bust the text grid on narrow devices.

Always check your spelling and punctuation, especially if you know you are a poor speller. Careless mistakes reflect poorly upon us.

Rich text

High-level fields within the CMS use PLAIN TEXT, which appear within web pages according to pre-defined layout and style settings. Other text elements such as the MAIN TEXT field employ RICH TEXT, which affords a range of additional style options. Please try to use the stylistic features enabled by such fields sparingly.

The main styles you will need are: italicisation, emboldenment, and links. Images should generally be incorporated using the separate fields in the CMS, but when used within the rich . When linking to other pages in the website, set the destination link to open within the same tab; when linking to third-party websites please set the link to open in a new tab. 

There are also heading and list styles that will be useful:

• this is a bulleted list, which should be used in preference to creating your own;
• when necessary, the numbered-list function can be used, but consider whether the numbers are necessary to make your point clearly;
• ‍‍H1 is for large headlines with the same size and weight as the main page headings, please use this very sparingly (see Guidelines page 4: Fonts and typography for examples in use);
• H2 is for subheadings in blue;
• H3 is for sub-subheadings in black;
• H4 is used to head a list of bulleted points, as above, with no extra paragraph space;
• H5 is for image captions, in brown.

Occasionally, it may be necessary to include images within the Rich Text field, though it is preferable to use the main CMS fields for images. If you do insert an image, make sure you set it to align left. Click on the image to reveal the alignment tool, then select the blue option:

When editing using the CMS, bear in mind that the text styling within the rich-text field will not be the same as the finished page. Always check your work in preview mode carefully before publishing.

Images

Please follow our general principles to be found in the Guidelines chapter 6: Images.

Bear in mind that the website is responsive, i.e. the content layout adapts to the device the website is viewed with, so the same image may be shown cropped in either in landscape format (e.g. on a desktop web browser), or portrait format (e.g. on a mobile phone). Therefore it is always good to check the content you are producing on different devices before publishing. Accordingly, images that have the main content fairly centrally will tend to work best. There are some settings that can be used to improve how the image is cropped in certain cases – if you use one of these please check the result. 

NB: always include “alt text” with images (using the field below that in which you select the image). This is for accessibility and will help with search engine rankings.