Formatting guide

Stumbleupon Diigo Reddit Digg del.icio.us

This is a general guide for page layout and formatting.

It consists of the parameters and recommendations for the layout of an article. Style guide sets out the basic recommendations for successful writing and better readability. It would be good to browse through it before you start writing. 

Page elements

The Bumblehood page consists of body text, templates, headings, pictures, tables, and outline boxes. The main objective of this guide is to lay down the properties and position of each element in order to enhance visual appeal and readability. A general guideline is to create the pages that have a clear look and feel. This basically means that there should be less formatting (bold, italic, underline, capitalization) and more linking. Another important thing to remember is that pages should fit well to multiple screen resolutions.

[Enter caption here]

Screen resolutions

  • The default resolution in which the content is produced is 1280 x 1024
  • The layout of the content should be checked and validated both on 1024 x 768 and on 1600 x 1200 (other heights are also acceptable)

Headings - Sections and subsections

The font size and font type of headings are defined by the Bumblehood CSS and do not change it if properly applied. Section font is Arial, size 19, regular (regular means that the font is not bold or italicized). If you notice that that the Section font is different than the defined - change it according to defined parameters.

  • Section is not bold - if you see a bold section, remove the bold
  • Subsection is bold - if you see a regular subsection, add bold
  • Do not put an extra line break between paragraphs, sections and subsections and vice versa. One paragraph line is sufficient. When you change the text to Section or subsection the appropriate spacing will be added automatically.
  • Always (unless it is really impossible) put at least one paragraph of the text between Title and Section and between Section and subsection.
  • Sections and subsection have only the first letter capitalized, unless they contain proper names

Extended title

Page Title is an element of extreme importance for SEO - Search Engine Optimization. Due to its importance for SEO, Page Title should be as much meaningful and contextual as possible. This basically means that it is necessary to add additional information to the Bumblehood title in order for search engines to find it properly. One suggestion for extended title is to add a location for the Article: e.g. Great minds of 16th century Venice. It is obvious that such long title is not good as a link title, but it is necessary for a page title.

Text amount

The amount of text on one page should at least fill one screen on 1280 px resolutions. Otherwise it will not look well in 1600 px resolutions. Use this page as a  reference, but  always check your page on a monitor with 1600 px resolution.

*************************

Example showing the proper spacing between headings and paragraphs:

Heading 1 (The title of the article)

/write a paragraph/

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vel lorem. Etiam ut tellus. Sed ligula nisi, tincidunt in, interdum vitae, commodo ut, tortor. Donec nulla pede, lacinia eget, cursus euismod, elementum nec, leo. Nam suscipit, orci non eleifend elementum, odio ligula condimentum ante, ut venenatis sapien nisl quis magna. Integer ullamcorper consectetuer velit. Aliquam eu tellus eget lorem consequat tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus a mi. Nunc id lectus id ligula ornare tristique. Cras quis tellus vitae elit sagittis interdum. Integer condimentum libero at diam. In hac habitasse platea dictumst. In ut elit at nunc imperdiet fringilla. In laoreet laoreet leo. /press Enter only  once/

Section 1 /select Section/

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vel lorem. Etiam ut tellus. Sed ligula nisi, tincidunt in, interdum vitae, commodo ut, tortor. Donec nulla pede, lacinia eget, cursus euismod, elementum nec, leo. Nam suscipit, orci non eleifend elementum, odio ligula condimentum ante, ut venenatis sapien nisl quis magna. Integer ullamcorper consectetuer velit. Aliquam eu tellus eget lorem consequat tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus a mi. Nunc id lectus id ligula ornare tristique. Cras quis tellus vitae elit sagittis interdum. Integer condimentum libero at diam. In hac habitasse platea dictumst. In ut elit at nunc imperdiet fringilla. In laoreet laoreet leo. An example of a well formatted page.

*************************

Body text

The body text font, size and alignment are predefined. Do not try to change them. Body text should always be written in a regular font. For uses of bold and italic see the paragraph below. Body text should be divided into meaningful paragraphs. Do not leave large amount of blank space between paragraphs. Start writing a new paragraph in the line immediately below the respective paragraph.

  • A paragraph should be at least 8 lines long in order to look well in all screen resolutions.
  • Do not add an empty line between paragraphs.
  • The first sentence of the paragraph is not indented.
  • The total amount of the text on one page has to be at least one screen with a picture no bigger than 300 px, if there is only one, and no bigger than 250 px if there is more. One screen with pictures is given here
  • There is no limit for maximal size of an article, but try to keep the articles between three to five screens.

Text emphasizing (bold, italic, underline, capitalization)

The text should not be excessively formatted. Too much bold and italicized text does not increases readability, rather decreases it.

  • Do not double-emphasize. If you bold a word do not italicize it, or underline it, or put it into quotation marks .
  • Do not underline the text. In the web environment hyperlinks are usually underlined. When you underline regular text it confuses the reader.
  • Do not use capital letters. If you have to capitalize something, change it into the title case. (Title Case Means That each first letter is capitalized, not the whole word)
  • Do not over bold the text.
  • Limit the boldface to none or maximally two bold phrases in one paragraph. Bear in mind the paragraph size described above.
  • Boldface should be used for proper names you wish to emphasize and for the terms connected with the theme of the topic. Basically, if you are writing about weather in Japan, bold the word Japan closest to the beginning of the text and bold the term climate couple of times on the page. The objective of boldface usage is to use it to attract the reader's attention to the general theme of the respective article. If you bold anything that comes in mind, or emphasize every fifth, sixth word in the text - you will not reach the goal, rather just create a messy content no one would like to read.
  • Do not bold links.
  • Use italics for phrases in other languages,  for isolated foreign words, for Latin names... See the Styleguide for more information on italics and emphasis.