Computer monitor showing a website homepage.

Web design and development

The world wide web is like a huge yellow pages where your prominence is not just governed by how much money you have but by how well designed and coded your website is.

Producing websites with web standards and accessibility in mind will help ensure that your business is not only higher up in search engine rankings, but also available to a wider audience.

Also check out my HTML email and web banner design services.

Working with Tony to develop our website was extremely easy. He listened carefully to our requirements and focused on both our needs and those of our audience. He offered us his extensive knowledge and experience and worked quickly and precisely to give us a site of which we are very proud. We are particularly impressed with how user friendly the "back office/administration" part of the site is. Thank you Tony!

Adrian Evans, Director, Adrian Evans Search & Selection

Tony works quickly and effectively. We were thrilled with the website he created for us and has since developed and enhanced. We have received a lot of positive feedback about the site and it compares favourably with those of many other similar sized organisations and even larger organisations.

Sian Vasey, Director, ECIL

HAFAD had a positive experience of working with Tony and were impressed by his expertise, commitment and personal support towards the project. Despite a tight time scale he produced a high quality web site that we are proud of. We would have no hesitation in recommending Tony.

Mark Gallagher, Information officer, HAFAD

I'd like to say how pleased I am with my new website. It looks great, very stylish, is easy to negotiate and I think most importantly its fast. I've received many compliments about it and I would highly recommend Anthony Otyehel to anyone who was thinking of having a website designed.

Darren Dutson Bromley

The suite of web-banners that Tony designed for Vector Art 3D, have an eye catching design that succinctly communicates the messages we required. Tony was able to take out basic text and make it into a professional and attractive solution to direct customers to key areas of our site..

James Booth, Vice President, VectorArt3D

Tony has been an invaluable resource and team member during the development of our latest website, from the development of the information architecture, documenting the web design guidelines and producing website graphics through to the production of a new set of accessible client minisites while meeting the deadlines set.

Miranda Agnew, Online Marketing Manager, Michael Page International (June 2006)

Website design

Websites that I design and build are for the most part static website which means that they do not have a built-in CMS (Content Management System) and are managed directly with the client at a low maintainence cost, guaranteeing that the quality of the design is maintained as well as the code. View the gallery to see examples of websites that I have built as well as iPhone web apps, web banners and HTML emailers.

All websites include:

Professional layout design of key pages

With over 20 years working in graphic design and over 10 years in web design working with large international companies, medium sized businesses and individuals, you can be sure that the design of your website will be in safe hands.

If your business is in need of a fresh look or you have no definite branding, you can turn to me for the development of your logo, stationery and any other branding needs. If you are in need of imagery, it can be sourced from a range of low-cost image libraries.

Take a look at how I developed the branding and web development for Adrian Evans Search and Selection.

XHTML/CSS conforming to web standards

The main body of code that makes up a website covers two areas, the structure of the website and the presentation of the website.

In simple terms, XHTML is responsible for the underlying structure of the website, while CSS is responsible for the presentation and visual appearance of the website.

Web standards is a general term for a set of best practices and technologies that have been developed by the The World Wide Web Consortium (W3C), along with other groups and standards bodies for creating and interpreting web-based content.

A site that has been built to web standards generally will be:

  • Less bandwidth intense
  • Future-proof
  • Extensibility
  • Easier to maintain
  • Compatible with newer browsers
  • Accessible

Back to top

WCAG 1.0 Priority 2, level AA compliant

The W3C (Word Wide Web Consortium) created a set of guidelines for creating accessible websites, the Web Content Accessibility Guidelines (WGAG) 1.0. Since 1998 it has been a legal requirement to try and make sure that your website conforms to these standards. This however, can depend on the size of your organisation, the type of information on your website and the financial means you have in order to satisfy the guidelines.

It has been generally accepted that WCAG 1.0 Priority 2, Level AA should be the standard that websites should be developed to and is this level has been referred to in many requirements including the UK Government and European Union guidelines on web content accessibility.

Designing and building a website based on these standards not only help protect you from any legal implications that may arise trough the use of your website, but also help to increase your website SEO.

Back to top

Inclusion of accessibility features

The accessibility of a website can be tested using a series of automated programs like Cynthia Says. However automated testing alone is not enough, as the accessibility of a website is very much dependant upon the interaction with the audience.

Through the experience of developing website for users with disabilities, a set of accessibility features are used on all websites that I develop to a varying degree (dependent upon the depth of content).

  • Skip links
  • Tabbed browsing and focus
  • Proper form control and validation
  • Resizable text - not graphics
  • Expanding containers
  • Semantic structure
  • Use of the TITLE attribute
  • Descriptive link text
  • Alternative stylesheets
  • Site map

Skip links

Skip links are include to help users who cannot - or have difficulty using a mouse. These users often use the TAB key to jump from link to link. Without skip links, every time a user selects a link to another page, the page refreshed and they have to TAB all the way through the navigation just to get to the content and any links that there might be in the content. With skip links they are offered the choice, before the navigation, to skip to the content, or to the sub navigation (if there is one) and from there they can kip to the content. The skip link don't normally appear unless a user presses the TAB key - so they do not need to interfere with the visual layout.

Tabbed browsing and focus

Following on from the skip links is tabbed browsing. Tabbed browsing is very helpful if you have restricted movement, but pretty useless unless you know what link has bee activated when you have pressed the TAB key. Therefore it is important that there is a visible change in the presentation of links when they are tabbed to, in the same what that there would be if you were to mouse-over a link. You would be amazed at how many large websites still overlook this accessibility feature.

Proper form control and validation

For a user who does not suffer from a disability, a form is not usually too daunting. However, for someone with a disability or someone who relies on tabbed browsing, if a form's code is not structured properly then they can get into all sorts of bother.

Every form element (like a check box or a text area) should have a label associated with it (for example Name:). If this is not clearly defined in the code, then as a user tabs through the links, some of the form controls may not be activated in accordance with the label associated with them - leading them to either make a wrong selection or enter text in the wrong text area.

It is also helpful for the form elements to also have a change in appearance when they are activated, so that it is obvious to a user which form control is being used at the time.

Form validation is also important, and making sure a user is aware of which firm elements are 'required' is also important. An asterisk * is usually unhelpful, especially if it comes after the label associated with a form element or after the element itself. It is much better to use (required) in the label. That way the user can be in do doubt. When a user makes a mistake in a form, the validation should return them to the form with clear instructions on where they went wrong and how to make it right. The validation should be done on the server-side, rather than using javascript, as some assistive devices (that convert the web page into either braille or some other form that the user can understand) can not take advantage of javascript- and so the form may never be submitted successfully.

Resizable text - not graphics

Wherever possible resizable text rather than graphics is used on the websites, as when a someone with low vision uses a magnification tool, often the text becomes blurred or pixelated. Where they prefer to use the text scaling in the browser, the graphical text will normally not scale.

Expanding containers

Another, often overlooked, accessibility feature is expanding containers. There are many well design websites that look visually stunning and that have indeed been designed to web standards. However where there is text that can be resized in box elements, sometimes the height of the box has been fixed so that when the text on the page is scaled, either the text drops out of the box element or is obscured, making it unreadable.

Therefore every care is taken to make sure that any box elements that contain resizable text or content can expand to accommodate without obscuring or making the contents unreadable.

Semantic structure

In simple terms, semantic structure means that the content should have a hierarchy - which usually takes the forms of headings. if you have ever used word, you may have seen the heading styles - Heading 1 through to Heading 3, where they scale from the largest Heading 1 (H1) down to the smallest Heading 3 (H3). It is important that headings be used in a a web page to convey the hierarchy of the content in relation to itself, as some assistive devices, such as screen readers for the blind and those with low vision, rely on the heading structure to get a mental picture of the content on the page. If there are gaps in the heading structure (for example a H1 followed by a H3 with a H2 in between) then the structure can become confusing.

Use of the TITLE attribute

In some modern browsers and screen readers the TITLE attribute displays text when you hover over an element (or it is in focus). This can be used to convey addition information to help someone using an assistive device, such as when they select a link, if it is the current page they are on, then the TITLE may say "You are here".

Descriptive link text

It is important that the text on a link be descriptive, so that there can be no confusion as to where the link is going. If you have many 'click here' links in a document that do not convey where the links are going to, someone using an assistive device may have no idea as to where the link goes - as they may be used to looking at a list of all the links on the page to quickly navigate. The term 'click' also assumes that they can use a mouse and are aware of where 'here' is - in relation to the content on the page. Text such as 'Find out more about descriptive link text' would be more useful.

Alternative stylesheets

Depending on the size of the website and the budget available, alternative stylesheets can be developed to help users with a variety of visual impairments.

Site map

Where a website has sub navigation, you should always include a site map so that a user can quickly locate a page should they get lost in the content, or be able to get a quick overview of the website structure (which may not be apparent form the visual layout alone).

Back to top

Inherent high quality Search Engine Optimisation (SEO)

By deploying many of the web standards and accessibility techniques described here, the SEO of your website and it's possible ranking in search engine results may be sufficiently increased. This is because search engine use small programs called robots or spiders that crawl through the content of your website and log the information in a database on which the searches are carried out.

If you have a website authored completely in Flash, it is highly unlikely that the search engine will be able to log any of your website information, as it may not be able to get to the content. However the rich nature of a website designed to web standards with accessibility in mind enable the robots and spiders to digest the information in the same way that the assistive devices can, as they are both essentially machines.

However it is no guarantee of a high ranking, as market forces also take effect. For example if you are a small employment agency trying to get high on the search engine rankings, it can be near impossible, as job boards, with their high saturation of content, will always be higher up in the listings. Larger employment agencies also place their jobs on job boards for that reason - especially if they can link back to their own website - and can also spend a lot on internet advertising either with Google Adwords or advertising on sector specific websites.

However if you are a local business, and someone wants to search for a product or service locally, you have a much better chance of being found.

Back to top

Watch this space...

Developing a front-end for a website, or a component and need help with the visual design, layout, HTML, CSS or some jQuery implementation? With over 10 years of experience in web design, coding HTML and CSS as well as implementing accessibility feature and cross browser support, you will be in safe hands.

Recent contracted projects have included HTML5/CSS3/jQuery, mobile and responsive web design and build. Fully booked until April 2015.

View my CV

Responsive website.

Leave a great impression in their inbox

Creating stable HTML emails that work across multiple email clients can be a bit of a dark art. With over 5 years of producing HTML emailers, you can be sure that I have plenty of experience making sure that what you want them to see is what they get.

Whether you need a full visual design, just coding, delivery or all three - simply get in touch for a competitive quote.