Basic designer guidelines

1. Sites are built around a 16 column 960px wide grid with 20px gutters, as demonstrated here:

http://www.user-friendly-websites.co.uk/admin/grid-demo.php

2. Site layout is always (top to bottom):

  • Header
  • Main Navigation (buttons)
  • Breadcrumb Trail (can be disabled)
  • Main content (12 columns) with side navigation (4 columns) on either the left or the right
  • Footer

If a page has no side navigation the main content will be 16 columns wide instead of 12, but the same content blocks are used (they are just adapted accordingly).

3. Content blocks available for main content areas are all detailed on these pages:

http://www.user-friendly-websites.co.uk/content-block-types-in-detail
http://www.user-friendly-websites.co.uk/content-block-types-in-detail-wide

4. Header layout is generally one large image (960px wide) or site title followed by sub title.

5. On a "100% width" layout the background of the header, main navigation, breadcrumbs, wrapper (which surrounds main content and navigation), and footer stretch to full width, but the content still remains at 960px. The 100% width is just an illusion created by the background images and colours not being constrained by the 960px centrally aligned width.

See these two examples:

http://full-width.user-friendly-websites.co.uk
http://normal-width.user-friendly-websites.co.uk

6. Any questions please just ask; but probably best just to send me your first layout ASAP so I can pick up on any potential issues!

Loading... Updating page...