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.
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 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.
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.
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.
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|
|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 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.
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.
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)