This is a draft
Introduction¶
This is the style guide for editors of the Climate Camp website. It is intended to ensure consistency (of both design and information) is maintained throughout the website, so it’s very important that everyone reads it and takes note.
Some of the instructions are more technical than others. If you don’t understand something technical, don’t worry, it’s unlikely to apply to you.
Some of these issues could be made easier by technical changes to the software, which we will look into implementing.
General¶
- Fonts and styles should never be manually specified. Fonts and styles are defined using CSS for the whole website, so should not be set differently on specific pages. Often when pasting in from a Word document the fonts will also come too – please make sure to click the “rubber” icon which will erase the styles. If something looks “wrong” by default get in touch and we will make the necessary changes site-wide.
- Take care with spacing. Particularly when pasting text in from an outside source, the spacing between paragraphs will become messed up. In this case it is necessary to go through deleting the spaces between the start of one paragraph and the end of the previous one, and then pressing return to create a “proper” paragraph break. If you know about HTML, paragraphs should be enclosed in “p” tags, and not broken with “br” tags. There should be no empty paragraphs.
Headings¶
- Hierarchy. Headings in web pages range from “Heading 1” (biggest/most important) to “Heading 6” (smallest/least important). There should only be one Heading 1 in the page, and this is automatically inserted at the top of the content based on the page name/title, so you should never use a Heading 1. The other headings should be used to form a sensible hierarchy of information.
- No manual formatting. Often when headings are written in plain text emails, the are done in CAPITAL LETTERS, possibly with stars or other character surrounding them. On the website, headings already have styles applied to show their visual importance, so capital letters, stars, etc should not be used.
- Headings in capitals. There is a heading style which comes out in capitals, which can be applied using the class “caps”. However, this should be used very sparingly in the main content area. All headings in the sidebar are styled as caps by default.
Links¶
- Headings. When linking within a headings, use a ‘»’ character at the end of the link, to indicate visually that it is a link. Avoid using links inside a Heading 2.
- Text. Do not use text such as “click here”, or simply the website URL. Instead, find a way to incorporate the link “inline” into the body of the text. For example, do instead of writing “To search for something go to Google: http://google.com/”, you would write “To search for something go to Google”
- Including links in text. When putting text on the website, try to look through the content and spot obvious opportunities to link the user to other relevant content. This might be other pages on our own website, or external web pages to do with what is talked about in the content. This is a key part of making our website interactive and keeping users engaged.
Lists¶
- No manual lists. Lists should never be written out manually, for example by manually writing the number of a list item before it, or by using a star or bullet character. Instead, use the bulleted and numbered list functionality provided by the editor – which will produce a HTML unordered or ordered list respectively. This makes the code more semantic and ensures lists are all styled in the same way.
