Like the idea of managing your own website?

Fill in the form and we'll talk you through the process in plain English.

Or call us on
01264 848123
for a chat ...

What we need from graphic designers
to create a content managed (CMS) website

This page is intended for graphic designers working with 123Live. It is important to read and understand this page before submitting artwork to us for conversion into a content managed website.

We don't need HTML, just a static JPG image

We do not require any HTML from you. You just need to provide a single static JPG image of each page design and we do the rest. The JPG should look exactly as your wish the final web page to look (with different content of course). It is very time consuming to tweak HTML once it has been written, tested and validated.

Think of us as a printer. You provide us with 'camera ready artwork', and we provide a content managed website rather than printed paper.  

Here's a summary of what we need:

1. Supply a JPG image 100% quality (i.e. not compressed), 100% size.
2. The JPG must be RGB not CMYK. This will ensure that the colouring on the final website will exactly match what you see when you view your original JPG on screen. CMYK is used for print work, RGB is used for screen work.
3. The website can be any width you want, but we recommend a width of 750 pixels (see http://www.123live.co.uk/faq-will-my-website-fill-screen.htm).
4. Consider what will happen to the design if menu items are added or removed by the client.
5. Consider what will happen if the length of a page changes due to the client putting more or less content on a page.
6. Any background images, i.e. watermark images that appear behind text should also be supplied separately.
7. Show menu styles for 'default style', 'page currently being viewed' and (optionally) 'hover'.
8. Use Ipso Lorem (dummy) text. If you are supplying 'real' content, please also supply text and images separately.
9. If the text is 'anti-aliased' (smoothed), please list the text colours separately as RGB values.
10. Include a sample image in the main content to show the style for captions under images.
11. Show styles for hyperlinks: normal, hover, active and visited, even if the styles are all the same.
12. Show examples of all heading styles required.
13. Stick to the boring fonts that will be most readable on screen. Verdana is the first choice, then Arial, a few other fonts may be suitable for headings as these will usually be larger.

	Example artwork

Examples

• Waveprint - artwork - live website
• Ibiza Compass - artwork - live website
• Red Top - artwork - live website

Navigation/menus

There are three possible navigation elements, all of which are automatically generated by 123Live:

• The main "top level" menu
• A "sub menu" which shows additional pages under some or all of the main navigation items.
  
  There can be any number of levels to the navigation, but this does not affect the design of the sub menu, as only the pages at the current level are shown.
• A "path" (also known as breadcrumbs), that shows the user where they are within the website. This is just a string of menu items with perhaps a graphical element between them.

Bear in mind that the user can add pages, so the menus should be designed to be expandable. Users can change the text in the menus so ensure that the design still works if the menu text wraps to multiple lines.

Links in the menus will always be text, but we can wrap graphical elements around or behind the text.

The menus must go vertically or horizontally. We cannot, for example, arrange the navigation to curve or to go diagonally.

The sub menu is a separate element to the main menu. The submenu cannot be nested within the main menu.

Things to watch out for with menus

• Don't change the font size or go from normal to bold text to highlight the current page in the menu. The reason is that if the menu text gets bigger or bolder it may wrap onto a new line, this will have the effect of moving menu items that come after this one. People like the navigation to stay consistent from page to page and get really confused when things move around.
• Think what will happen if the user puts in more text for a menu item. What will happen to your design if the menu text wraps onto two or more lines?
• Don't even think about making horizontal menu items all the same width. If you do this the design will fall apart as soon as the user deletes or adds a page to the main menu.

Type styles

We can control spacing, leading and padding. We can also include borders and background colours and images for headers. We can also code an image for the bullet character which will apply to all bulleted lists in the website. So feel free to experiment.

Links in body text

It is up to you whether you show a different style for visited links. We strongly recommend that links are underlined.

Colours

From an aesthetic point of view it is safe to assume that visitors will have a high colour monitor, but please do check that the website will still be usable in 256 colours. For example, check that text, buttons or form fields will still be visible against the background. Ensure good contrast between text and background to ensure text is clearly readable.

Footer

Unless otherwise indicated we always include a user-editable footer which is the same on every page. This footer will contain contact information and perhaps a few links. Include a sample footer in your design.

Pencil and paper

If you are in any doubt at all that your design will work in 123Live please email a rough sketch. We can advise on suitability before you invest time in the detail.

Any questions?

Let us know, email support@123live.co.uk.