All websites are designed to follow a ridged set of style rules, these rules determine style and consistency, they apply to desktop and mobile browsers/devices alike. Without these rules the site would lose balance, coherence and ultimately its value.
Pease note, although the CMS is mentioned this is not a CMS guide on how to update your site, please refer to your printed or web based CMS guide for information regarding this.
//// Start guide
H1 Headings are normally created by completing the page heading field in the CMS. There should only be one H1 on any page, however you can have as many h2, h3, h4 etc as required. Note that H1's are automaticaly created blue.
H2 headings can normally be created within a content edit field via the fields toolbar drop down.
Headings need run down a page like this H1, H2, H3, H4.
Important. Only use H1, H2, H3 etc for headings and sub headings . Don't use headings for whole paragraphs.
Don't make headings (h1, H2, H3 etc) bold, they have already been styled!
All sub pages have a feature image option. Use this to quickly add an image to the top of any page. Feature images are landscape and sit just below the H1 (heading #1) at the top of the page. Using a feature image is the preferred way of adding images to a page.
Images (within content) are used to support your carefully crafted copy. Only add an image if it adds real value to a page.
Use your images carefully, only use images that are high quality, they will work best if they are cropped in landscape.
Your website images use the following dimensions 770px × 450px.
The CMS (Proceswire) will attempt to crop down your images as you embed them into a page. However, if you have the time it is better to pre-crop your images before uploading them to the CMS.
Images with a width of 770px will sit in the middle of the 'content column' (as above) and take up the full width of the space. This is the default position. Images can be aligned to the left or the right by using the 'Styles' drop-down menu on the editor toolbar. If you aligned a landscape image to the left or right it will be automatically reduced in size by 50%.
Sometimes images look best aligned to the right (when positioned near bullet points), other times to the left. This often depends on how much copy is available on the page. Image (left/right) alignment is only available in desktop view. On a mobile phone they will take up the default (full width position).
This is a short simple paragraph.
This is another paragraph, note the line balance and spacing of the paragraphs.
This is a line of text with a ...
To create a breakspace use Shift/Return on your keyboard.
The following is a blockquote.
Use 'Blockquote' (via drop down) on any selected paragraph. Block quotes are typically used to highlight a block of text.
This is some sample text displaying some simple formatting. Bold Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Italics etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
A simple bulleted list
Another list, this time numerical
Tip: If you want to add an image near a list align it to the right.
Video (via Youtube or Vimeo) can be added to any page.
To add video do this …
It's good practice to let your visitors know file size, especially if they are using a mobile device, example.
Download: name_of_file (1MB)
It's also a good idea to open PDF's in a new window. See CMS guide for details.
End of style-guide ///