Having worked through the course materials I had high expectations for the site I would create. I designed
- a shallow hierarchical structure to organise my content,
- conventional wireframes for page layouts, with main menu at the top and local sub-menus on the left,
- thought about the website's metaphor, which would emphasise timber and woodwork, as well as suggest to the visitor that they landed on the site of a reputable organisation,
- considered how to meet accessibility criteria,
- and picked colours for my scheme. For the last item I used Kuler software as recommended in the course text.
My attempt to shape the site towards the design I had planned first hit the buffers when I realised that there is no suitable Webnode template to match my plans. None had a local submenu. Only one featured a beige and brown colour scheme, which could have been used to emphasise the "timber and woodworking" theme, but I did not like the particular combination of sickly pastel-shaded browns. In addition the templates turned out to be below accessibility standards due to insufficient contrast between text and background colour, and the excessive use of block capitals.
The banner image and colour scheme cannot be removed or changed for any of the main, or sub pages. This is not just a bit boring - it also provides little feedback to the user where they are, as each page looks almost the same (until they scroll down). Sitebuilder report criticises the templates as "outdated" and "inflexible".
Editing the style sheet
Not content to give up on all of my ideas and designs, I decided to concentrate on metaphor, colours and accessibility. Then I embarked on a nerve-wrecking, trial and error journey, attempting to edit the 56 pages long CSS style sheet, with mixed success:
- I increased the contrast between text and background to match W3C standards,
- removed automatic capitalisation of headlines and menu items,
- changed the overall colour scheme from the sickly pastel combination to more solid "timber" colours, and a timber pattern background to enhance the timber theme, and
- replaced the groups of square dots that decorated headlines with thumbnail images of two chisels to enhance the woodworking metaphor.
In doing so, I learned that what appears to look like a winning colour scheme on colour editing software such as Kuler can look less convincing when used as a website colour scheme. Also, not all features of Webnode templates are governed by their style sheets, and therefore some colours, and most structural and functional elements remained unchanged. I think therefore, that my editing the style sheet made an improvement to the site, but the result is far from perfect.
Accessibility criteria
Further features of Webnode templates do not satisfy accessibility standards
- The default font is too small - well below the 18pt minimum recommended by WC3. At least most of this is easily changed through the text editor.
- Webnode allows for alternative text "Alt text" to be added to some images (those in the text/image editors) which helps to facilitate screen reader access. But "Alt text" cannot can be added comprehensively to all images which are important to understanding the content. Images in photogalleries and lists are furnished by Webnode with default "Alt text" which does not always fit the image and cannot be changed. The effect of this is to accidentally give misleading information. For example, Webnode named the Wellcome image of a lady with a guitar "Lula Remax" by default. This is patently wrong: It does not take into account that this image was used here to indicate that the image was in lieu of a "real" member of the woodworker co-operative. Similarly, Webnode inserts default "Alt text" for the images in Lula's photogallery, for which it uses their file names. For clarification I added a text box underneath the gallery summarising its content.
- Further accessibility problems are built into Webnode's software. For instance the University of Illinois' Functional Accessibility Evaluator does not approve Webnode's use of the "onclick attribute", saying "The
onclickattribute should not be used on elements that cannot accept keyboard focus". Without detailed knowledge of scripting it is impossible for a website creator like me to resolve this matter. Likewise some Webnode created text is hidden by using the same colour for text and background, a fault that is highlighted by the Web Accessibility Evaluation Tool WAVE. - Another of Webnode's shortcomings is that keyboard shortcuts cannot be specified to enable alternative navigation not using a mouse.