Standard styling / elements to include in your website design

We thought it might be useful for us to provide a list of everything we need our design agencies to cover off in the design layouts.

As a general rule of thumb, we need the following elements included somewhere within the websites design:

1) Headings:

When setting up a content managed website, as not all the written content will have been defined at the design stage, its therefore important to show what ALL the different headings look like, and label each heading clearly showing the font, font size, and line height.

The example below shows us how heading 1 (H1) needs to look. its advisable to make sure other headings i.e Heading 1,2,3 (and 4 and 5 if neccesary) are also included in your design too so we can program it into the setup of the site:

[[Heading image]]

2) Images:

We need to see how any images that need to sit within the text are displayed on the page. In your design make sure you cater for larger and smaller images.

[[Images]]

3) Bullet Points:

We need to see what bullet points look like - both numbered bullet points and dot / symbol bullets. Even if numbered bullet points aren't used initially, they might be needed at some stage in the future so please make sure both numbered and symbol bullet points are included in your design.

When your client phones up and asked why the bullet points don't work using the WYSIWYG editor - you won't want to say to them that you forgot to incude them in the design!

[[Bullet Points]]

4) Quotes:

If you ever think your client would like to add a quote to the page perhaps as a testimonial or just to pull out some of the key info on the page (a bit like a newspaper does), then its a good idea (although not essential) to include the styling and design of how a quote would look.

[[Quote]]

[[WAES quote]]

5) Links:

We also need to see how a link would look, with any hover states and clicked states you want us to apply.

[[Links]]

6) Hover / clicked states:

In addition to this we also need you to show in the design all the different hover and clicked states throughout the site. For example the clicked and hover states for the top navigation, the sub level navigation and then any different states for any other bespoke content items which are included in the design.

Up to you whether you provide the example states within the main design files, or as a seperate file, but remember to make sure all the above is thought about.

[[BC rollover states]] 

[[BC rollover states2]]

[[Top nav rollver state]]

7) Fav Icon:

Lastly its always important to make sure you include a Fav Icon witin your design.

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file most commonly 16×16 pixels, associated with a particular website or web page. Browsers typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Most modern websites include a Fav Icon but sometimes web designers forget to provide this to us, so a Fav Icon has been added onto this list of things to make sure are sent over to us with the design!

We acually have the capability for you to upload and content manage your Fav Icon yourselves in Webi CMS too, or if you want you can send it over to us and we can add duing the development phase. Up to you, but remember to make sure its thought about and included in your site as its a common error to forget or miss off a Fav Icon in your website design.

[[Fav Icon]]

8. Cookies message:

With the recent new cookie laws that have been introduced, we also need a design for the cookie message popup. See below as an example:

[[Cookies message]]