The Sutton Poyntz website consists of a single Home page, with a unique style, and a number of web pages which use, broadly, a common pre-defined style. A fixed window size (960x600) was originally chosen so that almost all users will be presented with exactly the same view, but the Responsive version of the site now in use adapts to the user's screen or window size. The Responsive design has two main variants, depending on the width of the screen or window; for wide enough windows, the left-hand side of the screen is used for a Main Menu, but this disappears in narrow windows and is replaced by drop-down menus at the top of the screen.

Pages that are too tall to fit into this standard window are scrollable vertically; with one minor exception, all text and images are forced to fit horizontally into the fixed window size, so that horizontal scrolling is not provided (the exception is that there is a facility to put wide images, such as panoramic photographs, into a sub-window that scrolls horizontally).

Pages are grouped into subject areas (Sutton Poyntz Society, Living in Sutton Poyntz, History, etc.), and all pages for a single subject use the same Watermark image that shows palely behind the page text. Different subjects use different Watermark images to give them a subtly different look. The Watermark images do not scroll.

All pages contain the following sub-windows:

  • A Sutton Poyntz logo at the top-left corner, which links instantly to the site's Home Page;
  • Main Menu, either down the left-hand side of the main window or as a drop-down menu at the top, which expands as the user hovers on it to show the main subject areas and top-level topics for each subject area - this Main Menu is identical on every page in the site;
  • A standard set of functional links, either at the bottom-left of the main window or at the bottom of the drop-down Main Menu, providing a Search facility and links to a Site Map, a Copyright page, and acknowledgements to our main sponsors.

In addition, each page other than the Home Page contains the following sub-windows:

  • A 'breadcrumb' display at the top of the main window, showing where the current page is, logically, in the website;
  • A context-sensitive Top Menu, either at the top of the main window or as a second drop-down menu at the top, with links to other pages in the same subject area as the displayed page;
  • The page text area, containing text, images, tables, links etc. This is the only area that most authors are able to edit.

Generally, paragraph formatting is controlled automatically, and authors do not need to worry about it. There are a few DO NOT instructions scattered through these guidance notes, where authors are able to deviate from the pre-defined formats.


Style guide


We aim for content that is:

  • Relevant (i.e. to readers) - watch out for "ROT" (Redundant, Out-dated, or Trivial);
  • Accurate and authoritative, with links to other websites to add authority and reader interest;
  • Self-consistent, without conflicting or duplicated information;
  • Up to date and well maintained;
  • Legitimate, without defamation or unacknowledged use of copyright material;
  • Easy to read and easy to use, with a good structure and enthusiastic authorship. Important information should be easy to find, but multiple layers of pages that draw a reader gently into a subject are encouraged.

Page layout

  • It is often sensible to provide a section heading page which provides a short introduction to a topic, with links to the pages that give more detail. Section heading pages should normally be short enough to fit into the main window without the need for vertical scrolling.
  • Other pages can be quite long, but if a page looks long, think about whether it would be easier for the reader if it were split into multiple pages, with appropriate links.
  • In long pages, consider the use of "anchor points" at section headings, allowing you to provide direct links to each section of the text.
  • Try to avoid long sections of unbroken text. Headings help visually, and images, tables and text boxes can do so even more.
  • Each page should have a title that is descriptive for readers and usable by a search engine.


  • By default, paragraphs will be vertically separated from one another by a standard distance. It is possible, if necessary, to add a line break without this vertical separation, using SHIFT-ENTER.
  • Avoid paragraphs that are very long, and only use very short paragraphs with caution.


  • The standard font is 14pt Arial, black.
  • Bold and underline can be used by authors to emphasise single words or short phrases. Bold can also be used for short summary paragraphs.
  • Italics should be used only for quotations or foreign words.
  • Most text should be black. We have provided a very limited choice of other strong text colours (red, blue and magenta) that can be used to highlight small amounts of text and should still provide good readability. These are to be used with care.
  • Similarly, apart from in text boxes (discussed below) most text should be displayed on a transparent background so that the Watermark image appears behind the text. We have provided another limited choice of pale colours (yellow, green and blue) that can be used to highlight small amounts of text.
  • Other standard fonts are provided for three levels of Heading, of which Heading 2 and Heading 3 are recommended for normal use. Heading 1 is a much larger font, and can be used with great care to introduce particularly important text.


  • For most purposes, all text should be left-justified. Right justification can be used where there is a good reason, for example for a column of numbers in a table. Centre justification can be used occasionally where there is a good reason, for example the heading for a table. Full justification is not available.
  • Lists should be bulleted, but can numbered if numbering is truly appropriate. Multiple levels of list (i.e. lists within lists) are possible. Standard formatting is provided for lists, defining the indentation and the position and format of the bullet or number.
  • Indentation can be used at will, with multiple levels of indentation if appropriate. A standard indent distance is defined.


  • The use of attractive and appropriate images, including photographs and video images, is encouraged to make the site interesting and visually striking.
  • It is possible to align images to the left or right side of text, or to place it vertically separated from the text. Images are often improved by an appropriate caption, which can be achieved easily by placing them in text boxes (single column tables).
  • Images should not be displayed wider than 700px without taking the special precautions discussed in the guidance notes.
  • If you want to use imagery that is someone else's copyright, either get permission and add an attribution or provide a link to the image on their site.

Tables and text boxes

  • The use of tables can be an excellent way of presenting appropriate information, and adds visual interest to a page.
  • For a multi-column table, include column headers unless they are clearly not needed. Some tables also need row headers. Use bold or underlining to distinguish the headings.
  • A small font has been provided for use in tables where this is necessary to make a table fit horizontally into the text window.
  • A table that is too wide to fit horizontally can be placed inside a Panorma-type item that allows it to be scrolled horizontally. See the Vegetable Show page for an example.
  • Text boxes (implemented as single-cell tables) are an excellent way of providing additional or explanatory material in such a way that it does not interrupt the main flow. It is permissible to set the background colour for a text box to some light colour, to help distinguish it from the main text.

Links and References

  • We strongly encourage the use of links between pages in the village website, and also to other websites. They add richness to the site, allowing readers easy access to related information.
  • The text highlighted as a link should be something understandable (such as "Dorset AONB organisation") rather than an address (e.g. www.dorsetaonb.org.uk).
  • Where you are linking to another page in our own website, the new page should replace the previous page; where you are linking to another website, display the new page in a new browser tab, so that our material is still visible.
  • We strongly encourage the use of references to make our site authorative. A list of references can be provided either on a separate reference page or as a footnote on a page. In either case, the list should be numbered, and references to the entries in the list should take the form of a superscripted number in brackets, as [1]. This superscripted number should be linked to the reference itself.

Tooltips and Lightboxes

  • These can be useful ways of providing explanatory information, text or images, on a reader's request, without going away from the page being viewed.
  • tooltip is a short bit of explanatory text that appears when a reader hovers the mouse over a link. The explanatory text disappears automatically after a time, or when the mouse is moved away.
  • A "lightbox" is an image in its own window which pops up over the page being viewed when a link is clicked, part-obscuring the page until the lightbox is dismissed.
  • These can be very useful, but shouldn't be over-used as a feature.