Cookies

We use cookies to ensure that we give you the best experience on our website. You can change your cookie settings at any time. Otherwise, we'll assume you're OK to continue.

About the University web site

Design Guidelines

These pages are intended as a technical brief for web content desgin and implementation, to ensure that the University has a consistant web presence. The information contained with in the pages will be kept up date as appropriate and it is recommended that they are refernce when starting/updating any web design work.

Any design developed for implementation within Durham University's web service must follow currently published best practices for accessibility and usability, including the Web Content Accessibility Guideline. It is University Policy that all new web 'official' pages comply with the Priority 2 Recommendations of the W3C Web Accessibility Initiative guidelines. Since accessibility improvements are almost always also usability improvements (and vice versa), the general quality of the user experience is also improved by following this requirement, enhancing the ability of the website to promote the University brand.

Layout

Pages should be designed with a 'flexible' layout. That is, the page should be responsive to the user agents context and adapt the layout to work at varying resolution levels, and in differing viewport sizes. The page does not necessarily need to look consist across the various context s, but the same mark-up must be used to achieve the layout.

It is recommended that layouts are built with a 12 column grid system in mind. The grid should be fluid and responsive, and also allow for nested grids.

Samples of appearance at widths of 320px (phone), 768px (tablet), 1024px (netbook) and 1600px (desktop) to give examples of how the design elements would move and/or resize should be included. Excessive white space in large windows, and horizontal scroll bars in narrower windows should be avoided as much as possible.

Page height should be used efficiently, with as much of the main body text area as practical being  above the fold . Exactly where this is will vary with width and with browser font size, but ideally over half the browser window in typical graphical browsing environments should be body text or otherwise page-specific elements. The size of the body text area is likely to vary significantly. The design should show how the layout would work with both relatively short and relatively long body text areas (at least a range of 200 pixels to 2000 pixels).

The layout needs to be accessible in a wide range of browsers. It should therefore be designed so that a top-to-bottom linearisation of the content gives a sensible reading order. The routine use of columns within body text should be avoided.

As part of achieving this flexible layout, the use of very large, very wide, or very tall images as design elements should be avoided unless the image can either sensibly be repeated and/or cropped at smaller or larger display widths or heights, or the image can sensibly be displayed once without looking out-of-place at larger display widths or heights (though in this case thought still needs to be given to the appearance at smaller display sizes that might crop the image).

Progressive Enhancement

Progressive enhancement can be used to enhance the users experience where appropriate and/or available but a suitable base level of functionality must be provided for those user agents that do not have the required/chosen abilities.

JavaScript (and/or polyfills) can be used to fill in any ability gaps that user agents may have, however it must not be required/relied upon for the base level of functionality to work.

Navigation

Designs should indicate how navigation will be displayed within a site of up to 5 levels and with several items on each level. The current page should be easily distinguishable, and a distinction between visited and unvisited pages must be visible. Pages may occasionally be  hidden within the navigation. An example of the navigation structure when viewed from a hidden page would be useful.

Consider providing a breadcrumb trail, indicating the user's current position in the site structure.

A search box should be provided in a reasonably prominent position on all pages.

Images

For the most part, images of text, rather than text itself, should not be used. Exceptions would be within logos or decorative 'banners' and title bars (in these cases, alternative text will be supplied during implementation). Where the text is not part of a logo, it should be large  at least 16pt  to compensate for difficulties users will have resizing it.

Additionally, images of text should either be consistent between pages or restricted to the home page only  on any significantly-sized site making customised image graphics for every new page creates a substantial workload.

Large images will cause delays on slow connections. Unless the site is intended for an audience very likely to have a fast connection (an internal University site, or one aimed at UK academics) then the total image file size should be kept as low as possible.

Images must be responsive and able to adapt to changes in layout, for example a small image in a desktop layout may be scale up in a mobile layout and vice versa.

Fonts

Where particular fonts are specified for a design, alternatives and appropriate generic (e.g. 'serif', 'sans serif') fonts should be indicated to assist with implementation. Serifed fonts should not be specified for body text (or large heading blocks). Fonts selected should be commonly available on most computers.

Differing font sizes will be implemented using relative to the browser's default size, rather than absolute sizes. The main body text should be the browser's default size. A default size of 12pt can be assumed when making design samples, with additional design samples assuming 9pt and 24pt alternative default sizes being useful. Text below the default size should be rare or entirely absent.

Any fonts (including those used in images) that differ from the standard font families as show in the table below, must be available licence-free.

Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS, cursive
Courier New, Courier New, Courier, monospace
Georgia, serif
Impact, Impact, Charcoal, sans-serif
Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif

Colour schemes

Colour schemes which do not provide adequate contrast between text and background should be avoided. Colour schemes which lead to problems with colour vision should be avoided. This is especially important for body text, which should generally be (near)black on (near)white or vice versa.

Colour schemes that require gradient background images should be avoided unless the gradient can be repeated and/or cropped without unwanted visual effects.

Link Colours

Colours should be specified for both unvisited and visited links and it should be possible to easily distinguish the two. These may be different in the navigation area, and within the body of the page. Colours used for Headings within the page should not be used for links. Link colours (both visited and unvisited) must be distinguishable from normal text.

Content samples

Samples of the following types of content should be provided:

  • Paragraphs of text
  • Numbered and bulleted lists, including nested lists
  • Tables (with both column and row headings). Tables may have substantial widths and the design should consider the effects of a wide table on layout.
  • Headings (at least four levels, ideally all six)
  • Emphasised text
  • Links (visited and unvisited)
  • Quotations (blockquote)
  • Images (both large separate images and images integrated within a paragraph of text)