As well as offering advice and services, we've also put together some resources to assist with the development of accessible and standards-compliant websites.

1. Documentation

There are many aspects to consider when undertaking the development of a website. Certainly the actual development of a website is the most significant aspect of any such project, however the overall success of the project will also depend on various other factors, which can sometimes be overlooked.

We have prepared a document of web project considerations which may be of assistance in planning your project, ensuring that no aspect of the project is overlooked and therefore encourage a successful outcome to your project. The document is available as a Word document, rich-text document or pdf document:

2. Guides

Listed here are some guides we've written to assist you with various aspects of building and maintaining a website:

4. Templates

We've designed a series of HTML/ CSS templates that can be used as a starting point for designing a website. The templates are all CSS-based layouts which separate presentation from content. This approach has several advantages:

  • Encourages descriptive mark-up (the HTML code can concentrate on describing the nature of the content, leaving presentational considerations to the CSS);
  • Ensures greater flexibility (pages will still be usable if Stylesheets are disabled);
  • Allows the design and aesthetic of a site to be centrally controlled (enabling you to change the look and feel of a large site by editing only a few files).

The templates are also designed to allow a content-first page structure. This means that in the HTML of each page, the main content comes before secondary elements such as navigation. This has several advantages:

  • Makes the content more accessible;
  • Optimised the site for search engine ranking;
  • Gives a logical structure to your pages.

The templates concentrate on layout, as producing layouts in CSS is an area that can cause difficulty. The templates are intended to be as aesthetically neutral as possible, as the aesthetics of every site will be unique to that project and is too specific to be templated (hence the dull grey colour scheme). These templates are intended as a foundation from which you can develop a site to suit your needs.

This collection of different layouts cover a range of common website layouts, with different variations of fixed and flexible widths, one, two and three columns. The fixed width layouts provide greater overall control of presentation, while flexible width layouts provide more space for content. Multiple column layouts provide more space for placing additional page elements (such as additional lists of links, search boxes, etc.), while fewer columns allow wider page elements (such as larger images) to be accommodated. Take a look around and pick one which most suits the needs of your site.

4.1. Fixed Width, Two Columns

screenshot of the fixed width, two-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a fixed width, consisting of two columns. This is a simple layout, suitable for sites that don't require many additional page features beyond the main page content and site navigation. This layout will display without horizontal scroll in an 800 x 600 window. This template is not suitable for sites that need to display content with a width greater than 600 pixels, or sites that need to be usable on screens smaller than 800 pixels wide.

All the files for this template are available for download: oxblueTwocolFixed.zip, or you can browse the template as HTML.

4.2. Fixed Width, Three Columns

screenshot of the fixed width, three-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a fixed width, consisting of three columns. This layout will accommodate some additional page features in the third column (latest news items, for instance). This layout will display without horizontal scroll in an 800 x 600 window. The three-column layout and fixed layout means a narrow main content column, which is appropriate for sites that mainly contain text and small images, but isn't suitable for sites that need to display items wider than 400 pixels in their pages.

All the files for this template are available for download: oxblueThreecolFixed.zip, or you can browse the template as HTML.

4.3. Flexible Width, Two Columns

screenshot of the flexible width, two-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a flexible width, consisting of two columns. The flexible nature of the layout enables it to accommodate larger page elements.

All the files for this template are available for download: oxblueTwocolFlex.zip, or you can browse the template as HTML.

4.4. Flexible Width, Three Columns

screenshot of the flexible width, three-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a flexible width, consisting of three columns. This layout will accommodate some additional page features in the third column (latest news items, for instance). The flexible nature of the layout enables it to accommodate larger page elements, though the three-column layout does limit this to a degree.

All the files for this template are available for download: oxblueThreecolFlex.zip, or you can browse the template as HTML.

4.5. Minimum Width, Two Columns

screenshot of the minimum width, two-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout consisting of two columns. The layout has a flexible width, with a built in minimum width, so that the page will not collapse beyond a certain width. This feature of the layout does not work in Internet Explorer 6 , due to that browser's non-support for the CSS min-width attribute (the template still renders acceptably in Internet Explorer 6). This template is suitable for sites that require some flexibility of width, but wish to maintain a certain minimum width (subject to browser compatibility).

All the files for this template are available for download: oxblueTwocolMinwidth.zip, or you can browse the template as HTML.

4.6. Top Navigation, One Column

screenshot of the top navigation, one-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a flexible width, consisting of one column. The navigation bar is positioned at the top of the page, below the header for the site. Having the navigation at the top of the page makes the full width of the screen available for displaying content. While the horizontal placement of the navigation bar has space-saving advantages, it does place a limit on the number and length of menu items that can be accommodated. Also, sub-section links cannot be accommodated within the navigation bar. This layout is most suited to sites with relatively few sections and a simple structure that would benefit from having the maximum page width available for content.

All the files for this template are available for download: oxblueOnecolTopnav.zip, or you can browse the template as HTML.

4.7. Top Navigation, Two Columns

screenshot of the top navigation, three columns layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a flexible width, consisting of two columns. The navigation bar is positioned at the top of the page, below the header for the site. Having the navigation at the top of the page makes the full width of the screen available for displaying content. While the horizontal placement of the navigation bar has space-saving advantages, it does place a limit on the number and length of menu items that can be accommodated. Also, sub-section links cannot be accommodated within the navigation bar (though sub-navigation could be accommodated in the side-bar div). This layout is most suited to sites that require space for many different items in addition to the main content, while still affording sufficient width for the main content itself.

All the files for this template are available for download: oxblueTwocolTopnav.zip, or you can browse the template as HTML.

4.8. Top Navigation, Three Columns

screenshot of the top navigation, two-column layout

This web page and its associated Stylesheet files provide a template for a CSS-based page layout of a flexible width, consisting of three columns. The navigation bar is positioned at the top of the page, below the header for the site. Having the navigation at the top of the page makes the full width of the screen available for displaying content. While the horizontal placement of the navigation bar has space-saving advantages, it does place a limit on the number and length of menu items that can be accommodated. Also, sub-section links cannot be accommodated within the navigation bar (though sub-navigation could be accommodated in either the left-col or right-col divs). This layout is most suited to sites that require space for many different items in addition to the main content, while still affording sufficient width for the main content itself.

All the files for this template are available for download: oxblueThreecolTopnav.zip, or you can browse the template as HTML.