Web design - the detail

"The devil is in the detail". And nowhere is that more true than in web design. Technology is changing all the time and a web site will not look the same on every viewing platform. So how do you ensure that it is still accessible and usable by as many users as possible? And how do you ensure that it communicates effectively with your target audience? Attention to detail is key in any web design project.

Web site content and structure

I will work with you to understand what information should be presented to users of your web site and this will be structured so your users can find what they are looking for quickly and simply.

Visual design

Design should be restrained. Your web site should work alongside your other marketing materials – brochures, presentations and letterhead. Your existing logos, colour schemes and layout styles will be used or adapted to work well on-screen.

Web page design

Web design is very different from print for various reasons:

  • web sites can be viewed on a variety of devices with varying
    • monitor resolutions and even the aspect ratio of the browser window
    • installed fonts
    • font display capabilities (e.g. ClearType or sub-pixel rendering issues)
    • colour calibration
  • the user can adjust their view of the web page by
    • zooming the page
    • or zooming just the text
  • users' understanding of how their own device works may not be perfect (in comparison, most people know how to use a printed leaflet!)
  • text is generally harder to read on screen than on paper. So fonts, font colours and background colours may need to be changed.

Individual web pages should be well laid out and easy to read. Splash screens and Flash introductions that force your users to watch something they may not want to are generally avoided. Animation can be irritating to users, so it is used sparingly. It is important to make it easy for users to re-size fonts in their browsers – this is especially so for Internet Explorer (the most popular browser), which cannot easily re-size fonts if their size is specified in pixels.

Search engine optimisation

See the SEO page.

File sizes

File sizes should be as small as possible. Although the penetration of broadband is already quite high and increasing in the UK, there are still many users who access the internet using much slow connections. And small file sizes help everyone – the broadband users will think your web site is super-fast!

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. Navigation should be 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.

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? It is important to create a print stylesheet to ensure that your users don't have to suffer this inconvenience.

Easy to update

Depending on the complexity of your web site, templates and/or re-usable modules can greatly simplify future updates to the site. Often, a single change in one file can update many different pages of the site – e.g. if you want to change the telephone number in the footer of every page.

Update the site yourself

It is very important to say whether you want to update the site yourself. This can be handled by a content management system. Sometimes, there are also simpler ways to enable minor edits.

Standards

Your site will be produced in XHTML and I will check the code validates. 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. Bear in mind that as web sites increasingly use complex links to other sites e.g. buttons to link to social networking sites, or Google Maps that are embedded in your site, code validation issues can be introduced that are outside of your control – so a pragmatic approach has to be taken.

You can validate XHTML for any web sites here.

CSS (Cascading Style Sheets)

CSS is used for controlling virtually all the layout of your web site. This provides tremendous benefits by:

  • simplifying each web page
  • reducing the file size of these web pages
  • simplifying future changes to your web site layout and appearance
  • assisting in making your site accessible by a wide range of users

I will check the CSS validates. Again, a pragmatic approach has to be applied. CSS3 is increasingly being used to improve the appearance and simplify the coding of web sites, even though CSS3 currently does not validate. Despite this, many leading web designers and developers are encouraging the use of CSS3 – it can provide an improved experience for those users on modern browsers and doesn't cause any problems for other browsers.

You can validate CSS for any sites here.

Analytics

Google Analytics is generally installed on every site so that you can track how many visitors come to your web site and how they find you.

Accessibility

Your web site will be checked against The Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). Your site will typically at least achieve Conformance Level "A" against WCAG v1. Many sites will achieve the maximum "AAA" grade.

Testing

Your site will be tested in a range of browsers. Typically, tests include the following browsers, but let me know if you need any specific browsers to be tested:

on Windows:

  • Internet Explorer 9, 8 and 7
  • Firefox
  • Google Chrome
  • Opera
  • Safari

on Apple:

  • Safari
  • Firefox

resolutions:

  • from 1024 x 768
  • to 1280 x 1024

Mobile devices can be added to this list depending on your requirements - please let me know how important mobile testing is to you.

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. Let me know if you would like to discuss these and to consider what issues are relevant for your target users.

Copywriting

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

  • use clear and simple language
  • limit each paragraph to one idea
  • put the key point at the beginning of each page or each paragraph
  • use descriptive sub-headings
  • put important words in bold
  • use descriptive link text
  • use lists
  • left-align text

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, I 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.

print_version.jpg