How to format content for your web developer

You can provide documents to us in Word, RTF or plain text, but should provide in a single document.

You can apply formatting in Word (eg. bold and sizing) to headings to make them easier to read, but we will strip out all formatting before we convert to html, so we need to have specific annotations in place, to tell us what style we need to format.

You should endevour to keep text formatting as simple as possible, as this will make the website easier for you to update.

Use can use the following formatting annotations:

Page description

Use this to tell us what content goes on what pages. Use the page descriptions in the site plan as the page description.

Also put a page-break in your Word document before a new page, or put a dotted line between the pages.

Example:
_________________________ [Page] About

If the page goes under another page in the navigation, indicate location using a ">"

Example:
[Page] About Us>Our staff

Page heading

This is title of the page appearing at the top of the page. Its usually formatted as a heading style.

In many cases it will be the same as the location.

Format with the word [Page] at the beginning

Example:
[Page Heading] About our company

Body text

You don't need to insert any annotations for body text. Use an additional line break between paragraphs to indicate a new paragraph.

Heading styles

You can use up to 4 heading styles.

Heading styles should be formatted using the prefix h1., h2., or h3.

Example:
h1. About us
h2. Our company
Body text body text body text.

Bullet points

Please don't format text using word bullets. Instead use a * symbol

Example:
* point 1
* point 2

Indents

Please don't use indents to format text. It is unusual to use indented text in websites. We can set up a specific style for a block quotes, but you should discuss with your Account Manager first. For example - is this in addition to your Feature Boxes? Remember, we can use colours and other formatting not often used in standard Word documents to emphasise headings. We recommend that you use additional heading styles to break up text (see Heading styles).

Bold/underline/emphasis

We don't use underlining in web pages, as it confuses users by giving the appearance of a link.

To add italics or bold - just apply the Word format. There is no need to use specific indicators.

Of course if you want to be helpful :) you can add the html codes instead <.strong>for bold<./strong> or <.em>for emphasis/italics<./em>

Feature box

A feature box is text that is separate from the main flow of the text, and can be used for Quotes, or Features, or other important information. They are similar to what print designer call a pull-out or call out.

Your Account Manager will explain how they can be used in your design. pull-quote http://desktoppub.about.com/library/glossary/bldef-pullquote.htm You need to identify what text will be setup in a feature box.Identify a feature box with the the words [Feature] and finish with the words [End Feature].

If you need quote marks for the text make sure you include them.

Example:
[Feature] All products come with 30 day money back guarantee. [End Feature]
Or add a link as follows:
[Feature] All products come with [Link: Features>Guarantee] 30 day money
back guarantee. [End Link] [End Feature]

Testimonial

A testimonial is a feature box that contains a customer testimonial or case study.

Identify a testimonial with the the words [Testimonial] and finish with the words [End Testimonial]

You can include other formatting within a testimonial eg. bullet points, headings.

Indicate if you want to include an external link to the person's website or email address.

Example:
[Testimonials]
h1. Our clients say:
"ABC Limited make the best widget we've ever used."
Fred Jones
[Link:www.jonesltd.com.au]Jones Limited [End Link]
[End Testimonial]

Images

If you want to specifically insert images in your content, you should identify the image in square brackets using the same name as the file supplied. [Image: man-at-computer.jpg] If you have a specific requirement for the cropping of the photo, please let us know.

Example:
[Image: man-at-computer.jpg / close-up]
[Image: man-at-computer.jpg / full-image]

If not specified our designer will use the cropping best suited to the design.

You also need to provide the images in digital format.

Tables

In web design, you should only use tables for tabulated data. Keep your tables as simple as possible, as they will have to be re-created in html, and the more complex you make them, the harder it will be for you to update.

You can use Word table to fomat. Or here is a simple annotation for small tables, using the "pipe" symbol |. Just use the | to tell us where the table cells begin and end.

Example:
| Description | Price |
| Cleaning services | $1000 |
| Other services | $2000 |

Links

Indicate the text to be displayed, as well as actual link.

For external links - by default the link will open in a new window. eg. [Link: www.apple.com] apple computer [End Link]

For internal - by default the link will be a direct link. Use the page description for the link reference.

eg. [Link: About Us>Company] Our Story [End Link]

In some cases you can include a popup link where the page will appear in a set size popup window. Page in popups are outside the normal navigation, and should be used with care, as may be difficult for search engines to crawl. Please consult your Account Manager first.

Example:
[Popup:Terms] Terms and conditions [End Popup]

To link from an image use the following format
[Image: man-at-computer.jpg AND Link: Products>Cleaning Products]

Email

Indicate text to be displayed, as well as actual email link

Example:
kevan@mail2grow.com [mailto:kevan@mail2grow.com]

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code: