web design detail

"The devil is in the detail". And nowhere is that more true than in web design. The motley collection of web browsers in use today interprets web standards in a variety of ways. But web designers don't just have to accommodate the existing range of browsers. Technology is changing all the time. Users are continually upgrading their computers. Software developers are continually releasing new versions of web browsers or other user agents for viewing web sites.

A web site will not look the same on every viewing platform. So how do we ensure that it is still accessible and usable by as many users as possible? And how do we ensure that it communicates effectively with your target audience?

site content and structure

We will work with you to understand what information should be presented to users of your site. We will also structure this material so your users can find what they are looking for quickly and simply.

visual design

Design should be restrained. We don't add splash screens or Flash entry pages that trap your users on pages they may have no interest in. Animation can be irritating to users, so we use it very sparingly. Your web site should work alongside your other marketing materials - brochures, presentations and letterhead. So we will, where possible, use your existing logos, colour schemes and layout styles - although we may need to adjust these to work well on-screen. Web sites can be viewed on a variety of devices; monitor resolutions and colour calibration can vary significantly; text is generally harder to read on screen than on paper. So we may need to change fonts, font colours and background colours.

page layout

We aim to design individual web pages to be well laid out and easy to read. Good web page design allows users as much flexibility as possible in displaying your site. So we may design page width to be flexible ("liquid layouts") to cater for users with different sizes of monitors. We generally use fonts specified in keywords, so users can easily re-size fonts in their browsers - this is especially important for Internet Explorer (the most popular browser), which cannot easily re-size fonts specified in pixels in versions up to and including version 6.

navigation

Good navigation allows users to feel completely in control. Users should understand where they are in the site, where they can go next and where they have already been. We design navigation that is consistent throughout the site. Links will be clearly visible, will provide feedback to the user when they pass their mouse cursor over a link, and visited links will generally be coloured differently to show users which pages they have already visited.

templates

We will design your site using templates to facilitate minor amendments in future without you incurring significant re-design costs. Please note, however, that major changes to page layouts cannot usually be handled within existing templates.

copywriting

It is your responsibility to produce the material for the site, unless you ask us to help you with copywriting. Please bear in mind these suggestions for good web copywriting:

  • keep it simple!
  • get straight to the point!
  • break up the page into bite-sized paragraphs, with just one clear idea in each
  • use headings to break up the page and to maintain interest
  • use lists

photography

"A picture is worth a thousand words", so good photography can deliver real improvements to the effectiveness of your web site. At the briefing stage, we can help you review what photography is needed and either find a photographer, find some stock photos or, for simple requirements, take new digital photographs ourselves.

file sizes

We strive to keep file sizes as small as possible. Although the penetration of broadband is increasing in the UK, there are still many users who access the internet using much slower dial-up connections. As a general target, we aim for pages with a total file size (HTML page plus logos/images plus stylesheets) of less than 30 kb. This should download in:

  • 1 second for users with broadband (512 kbps or faster)
  • 5 seconds for users with 56.6 kbps modems

But we can aim for smaller file sizes if you like. Our record to date is a home page that was a tiny 8 kb!

It's useful to compare your site with the leading search engine Google, which is one of the fastest-downloading home pages on the internet. Google’s home page, where users start their searches, is very basic in design terms – very simple layout, no superfluous graphics, no unnecessary content and no animation. As a result, Google’s home page is only about 13kb in size and downloads in about 0.7 seconds over broadband and less than 3 seconds over a 56.6 kbps modem. If Google’s home page downloads in 3 seconds or even less, how long will users wait for your home page? If you keep them waiting too long, they will give up in frustration and go somewhere else – and Google makes it very easy for them to find another site to visit!

printing

How many times have you tried to print out a page from a web site only to find that it doesn't fit on an A4 page in portrait format? We will create a print stylesheet to ensure that your users don't have to suffer this inconvenience.

standards

XHTML is very much a current standard and it is more rigorous than earlier HTML. We generally use XHTML unless there is a particular reason to use HTML. This in turn should benefit you by ensuring that more browsers will display your site correctly. It should also make your site easier to update in future to subsequent standards. In either case, we will ensure our XHTML or HTML code validates.

You can validate XHTML or HTML for our sites or any other designer's sites using the World Wide Web Consortium (W3C) Markup Validation Service.

CSS

Web design has for several years been in a slow transition from relying heavily on tables to control the layout of pages to using Cascading Style Sheets (CSS) to control layout. Our sites now use CSS for controlling virtually all the layout. This provides tremendous benefits by:

  • simplifying each web page, by removing large numbers of nested tables
  • reducing the file size of these web pages
  • simplifying future changes to page format
  • assisting in making your site accessible by a wide range of users

We will ensure our CSS validates.

You can validate CSS for our sites or any other designer's sites using the W3C CSS Validation Service.

accessibility

We will test our design against The Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). Unless we notify you otherwise, your site will at least achieve Conformance Level "A". Many of our sites will achieve the maximum "AAA" grade. For comparison, in a 2004 survey of UK sites, 81% failed to achieve even the "A" grade - more information about web accessibility. See also the accessibility statement for this site.

You can test accessibility for our sites or any other designer's sites using the WebXact service.

testing

We test all our sites in a range of browsers. The list of browsers tested will change over time but, typically, our tests include the following:

  • on Windows:
    • Internet Explorer 7, 6 and 5.5
    • Firefox 2
    • Opera 9
    • Netscape 7.1
  • on Apple Mac:
    • Safari 2
    • Firefox 1.5
  • resolutions
    • from 800 x 600
    • to 1280 x 1024

There are various sources of statistics on current browser usage. These cover which web browsers are used, which operating systems, what screen resolutions, whether Java and Javascript are enabled. We would be happy to discuss these with you and to consider what issues are relevant for your target users.

Back to web design page

This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.