littledetails.co.uk HTML and CSS web page template instructions

littledetails.co.uk
make a big difference

SEO Web Design Affiliates
Join our SEO & web design affiliate scheme »

job specification for HTML designers

All web sites must first be created as an HTML with CSS template before any additional work is done, such as adding additional pages or changing to PHP. Please ensure the web page fully complies with these specifications and instructions before submitting the page to us, as any changes to the code to make it comply with our specifications will be done in your own time.

Our aim is to create the simplest pages possible, containing the least amount of code. If you use any form of page building software, you must remove all reference to the software and any unnecessary code it creates from within the HTML before submitting it.

We work to the XHTML transitional doc type, which must be included in the top of the document, along with the UTF character encoding. Please view the source on this page and use the first few lines of the head area intact, up to the title tag.

The template must pass W3C validation for both HTML and CSS, and therefore adhere to the latest standards standards. The code must therefore be 'well formed' with all tags correctly nested and closed for example.

The template must work and be very similar in all current browsers such as Internet Explorer 7/8, Safari 4, Opera 9, Firefox Mozila 3, Google Chrome etc., without using browser specific CSS formatting. It is not necessary to make the template back compatible older browsers or with mobile browsers.

You will usually be working from an image created by one of our graphic designers. Please ensure the template looks exactly like the image. Do not attempt to make changes to the way it looks at this stage, even if you think it looks better.

When the page template is first created you should always include the CSS in the head area of the page so that both the HTML and CSS can be viewed inside one file.

It is good CSS practice to 'zero' all styles at the top of the style sheet prior to formatting the page.

We never use inline styles.
We only use Verdana font for the main text.
We never use justified text.
We always use text, and never the image of text, even in a logo, unless the logo has been specifically created with text that cannot be duplicated with CSS.
We do not use any deprecated attributes, such as border="0" in an image tag, instead set this within the CSS.
We adhere to the tableless design ideal, and use tables only to display actual tables of data.
All images must have height and width.
All images must have a relevant alt tag. If you have used a spacer image, ensure this has an empty alt tag.
Unless otherwise stated, we always write dark text against a light background for the main page text.

If the main page has a white background, and you have some text sections in white against a coloured background, you must change the colour of the white text to a slight off-white, or the search engines may regard this as hidden text on the page.

The template must include one single h1 title tag as the first line of HTML in the body. You may enclose this inside a div if required by the rest of the page heading and title area, and the h1 tag should always be formatted to fit with the rest of the page design. Remember, one h1 tag is used per page.

Lower header tags should be part of a tiered structure. There can be several h2 tags per page, and several h3 tags for every h2 tag for example.

We use strong tags and not bold.
We use emphasize tags and not italic.
We never underline text as this confuses users who expect only the links to be underlined.
We never use ALL CAPS as this makes text difficult to read.

The template should include actual links that we can click. This is the only way to ensure the links will be correctly formatted. Please just make each link to the page itself, eg, index.html, as when the link is clicked we will not move from the page we are testing.

Links should always be text links, and never an image of the text. Use CSS to format the mouse over 'hover' effects. Do not use image swaps. Do not create different background images for the static and hover states, instead, create one image with the static and hover backgounds joined as one image, and use CSS to change the position of the background image to display the different states on hover. This way there is no pause as the background image loads.

Link menus should generally be created from unordered lists. If the links are made to resemble buttons, the link should be the entire button, and not just the anchor text.

Be descriptive with the div names so that we can understand which section of the page the div covers.

Place a comment next to every closing div tag containing the name of the div tag being closed.

Do not overdo the divs. A div should contain several related elements, and not be created just to position one item. To position an individual item, give it an id and format the id.

Near the bottom of the page we almost always have an address tag area, containing such things as a copyright notice, a link to the terms and conditions, privacy statement and usually the sitemap pages.

Bookmark this page:

© 2024 littledetails.co.uk SEO Web Designs | privacy policy | terms and conditions | seo sitemap