Menu  

This is a H1 heading, all pages should start with a heading, note that there is no full stop after headings - (only use one H1 per page)

Don't not make headings bold, keep them in their default setting.

This is a sub heading (H2)

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 it's value.

Please note ...

  • This is not a how to update the site guide, please refer to the printed CMS guide for information regarding this.
  • Be aware that this  page contain lots of intentional "Lorem Ipsum" dummy text.

Images (landscape)

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 and the right dimensions, they will work best if they cropped in landscape.

policebike1.jpg

Caption text (found via STYLE menu dropdown) can only sit below images that take up the full column width.

If possible, general landscape type images that are to be positioned centrally (like above) or aligned left or right should be pre-cropped to these dimensions 635px × 390px.

illustration-bikes3.jpg

Illustrations images that take up the full column space need to be 635px wide. As the height for illustrations vary there is no height restriction.

Please pre-crop/resize all your images before uploading them to the CMS!

You can use http://cropp.me/ to edit/crop your images.

Images that are low quality or not used correctly will reduce the value of your copy and ultimately your message.

Content images left, right or centred?

test

Images can be aligned to the left or the right (when placed in the main content column) by using the the 'Styles' drop-down menu on the editor toolbar. When images are aligned to the left or right they are automatically reduced in size.

Sometimes images look best aligned to the right (when positioned near bullet points for example), other times to the left. This often depends on how much copy is available on the page.

Important. If you are having problems aligning images, try clearing the style via the small eraser icon, you can find this on the toolbar.

By default, images (as long as they are resized correctly) will take up the full width of the content column.

test

* Image (left/right) alignment is only available in desktop view.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Book Images (portrait)

bookcover2.jpg

Book images are generally displayed in portrait, by default they will sit (full sized) in the centre of a column. However, they work best if the are aligned to the left or the right. When they are aligned to the left or right the are sized down. Important. If you are having problems aligning images, try clearing the style via the small eraser icon, you can find this on the toolbar.

Book images (portrait) need to be cropped to 631px × 902px.

Images in the sidebar?

Images can go in the sidebar, however they need to be at least 480px wide. If they are smaller than 480px they will not align correctly and may look awkward when viewed on a mobile phone. If in doubt re-size your images to the dimensions mentioned above.

Text

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 ...
break-space.

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.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

This is a smaller Heading H3

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.

Important. Only use H1, H2, H3 etc for headings don't use headings for whole paragraphs.

Don't make headings (h1, H2, H3 etc) bold! // Don't use heading for a hyper link - visitors will confuse them with headings.

If you want to create a simple but eye catching link, use a blockqote like this ...

My important link

External links get a small arrow icon like this ... www.suspiremedia.co.uk.

A simple bulleted list

  • Oranges
  • Apples
  • Bananas

Another list, this time numerical

  1. Oranges
  2. Apples
  3. Bannanas

Tip: If you want to add an image near a list (like above) - align it to the right.

Very small text

Text can be made small by using the SMALLTEXT class via the STYLES dropdown.

Bold or Italic

Use Italic when the text needs to convey emphasis.

Use Bold to show text or phrase importance i.e. warning text, error text, instructional text etc.

Adding News

  • To add a News item, go to Content > News and then click on Add Article.
  • In the first field type a short summary.
  • It's important that the the summary text is wrapped in a paragraph. To do this just press return (on your keyboard) at the end of the summary. Use the backspace key to move the cursor back up so it's placed directly after the last word in your summary.
  • Do not add images or other links in this first field.
  • In the second field place your detailed or full news story. You can add images, links etc in this field.

Video Media

Video (via Youtube) can be added to any page. The video player will be dispayed just below the search field in the websites sidebar. To add video do this ...

  • Find your video on Youtube
  • Click on the Youtube 'share' button/link
  • Copy the last part of the url, it looks something like this It4WxQ6dnn0
  • Log into the CMS and go to your page
  • Paste the Youtube code into the video input field.

File names

All files, images, pdf, MS-Word etc must be saved in lowercase with-out-spaces.

For example:

  • my-image.jpg not my image .JPg
  • my-document_about_housing.pdf not my document about housing.PDF

Links to files

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)

Its also a good idea to open PDF's in a new window.

Text should only be copied/pasted into the CMS from a .txt file

Do not attempt to copy text or images directly into the CMS from ...

  • MSWord or Similar word precessing packages
  • Email
  • From another website
  • Dreamweaver or similar web authoring packages

Strip out the formatting

Save your text as a .txt file, then copy the text from the .txt file into the CMS, all MSWord (or similar) text formatting will then be stripped away. You can then start to format your page via the CMS.

Rememeber: Do not paste raw HTML or any other code into the CMS from Dreamweaver or similar web authoring packages.

Remember many visitors to your site will be mobile users

This site has been designed to adapt/respond to various screen resolutions, if you follow the above suggestions/guidelines your website will continue to function and display content correctly across a wide range of devices.

End of style-guide ///