We are a co-operative providing affordable workshops and shared facilities for woodworkers.

Here you can read:

 

  1. Reflections on the overall project of constructing this website, and
  2. The advantages and limitations of Webnode software for achieving this web publication's goals. 

 

 

Reflections

Upside down

24/08/2013 21:53

This - being a blog - may seem a bit "upside down".  By this I mean: earliest on the bottom and latest top.

Two items spring to mind:

  1. I would choose a template with a different lay-out.  The current one does not allow for much text above the "fold" - that section which the user can see without scrolling downwards.
  2. I would spend more time on creating a consistant taxonomy, for facets of the organisation Chiselworks.  By this I mean that I would decide whether and when it is called by its name, and if and when variants should be used such as Chiselworks woodworkers, woodworker co-operative, etc.  Likewise, I would clarify my distinction between "workshops", "workspaces", and "spaces"

 

Webnode templates

10/08/2013 19:50

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 repor t 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 onclick attribute 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.

 

Construction tools

In my experience it was easy to use Webnode's software to construct a basic website, add pages and subpages, change the template, to preview and to publish content at the push of a button

I appreciated how straight forwardly I could upload files, such as documents, images and sounds.  Webnode allowed me to devise a folder structure and organise my files how I wanted them for easy retrieval. User files are hosted by Webnode, and there is a generous allocation of free server space too. 

On the downside:

  • I am missing a back-up function. I do realise this is offered as an optional paid for extra.  Unfortunately Aberystwyth University's assignment guidelines discourage the use of the paid for extras.  As a consequence I had to manually save to disc each page, article, changes made to the style sheet, etc. This proved tedious, and through backing up like this I managed to merely store some of the content.  If it were required to restore the website after an accident, this content would have to be manually reassembled to construct a replacement site, rather than retrieve the original one.  Further I find it worrying to use a free service that could at any day disappear, for construction and storage of a major piece of work.
  • Likewise I would have appreciated a facility for working offline; due to my home's somewhat wobbly internet connection I repeatedly lost some of my work, when the connection dropped to Webnode's server.
  • An "undo" button exists within the text and image editors, but it would have been immensely useful to have had one for all aspects of constructing and editing the site.  Spellchecking software within the text editor would no doubt have prevented some howlers.

Webnode support

This is a feature I find most useful.  Webnode users have several options to access help and support when constructing their sites. 

  • Webnode's officiel site has a searchable and browsable knowlegge base with step by step instructions.
  • There is a user forum provided jointly by providers and users of Webnode.  It is searchable, and I received timely and helpful repies to my questions.
  • Webnode's blog offers regular tips on how to add and use tools such as tags or a connection to LinkedIn, a social media site for professionals.
  • Webnode staff offer to answer individual questions by email.

Engaging with Chiselworks' audiences

Webnode's software is aiding Chiselworks' goal of facilitating user enquiries and information by providing a number of widgets and templates that the site designer can easily utilise and customise.  Examples of these, which are used here, are the contact form, FAQ and forum.  They are easy to use and update, and Webnode sends an email to a specified address each time the contact form has been used, helping the administrators to provide speedy responses.

I learned how to harvest HTML code from other websites for use with Webnode's facility to embed code.  This way I was able to provide a Google map, an RSS feed to another woodworkers' site, and links to Creative Commons information.  This would be useful for the audience of Chiselworks if the organisation did exist.

Promoting Chiselworks and its members

Webnode provides instructions how to register the site with internet search engines Google and Yahoo to increase visibility. - I did not use this facility, as I do not want the site to be found by genuine searchers looking for woodworkers, or workshop space.  Webnode adds some social networking buttons to some of the content by default, and the designer can add more. This enables visitors to share and "like" the content, which in turn is likely to increase the website's ranking.  The facility to add meta-tags to each page should also improve the website's visibility.

Chiselworks has many members who would want to construct their own promotional page within its website.  Webnode facilitates this by allowing its users to add components to their pages, such as photogalleries and contact forms, and to embed files.  An example of a member's promotional page is Lula's page, which I feel is quite sucessful.

Robustness

With this requirement of the assignment guidelines I struggle.  Nothing appears to be written about this in the course text, but reference is made to a WC3 document - the Web content accessibility guidelines.  Its section on Robustness defines Robustness:

"Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies."

The explanations that follow appear to deal exclusively with validity of code, e.g. HTML.  Code is provided by Webnode, not me.  I have however endeavoured to fulfil to those accessibility criteria which are under my control. This extends from presenting the content in clear language, with simply constructed sentences grouped into small chunks of text, to technical aspects like providing alternative text "Alt text" for images.  

I had planned for Chiselworks' website to be easily navigated and content found where the user will expect it.  Using Webnode assists in this:

  • It locates some page functions in commonly expected places. For instance the logo and link to the home page is placed in the upper left, and the search facility in the upper right corner.  The main menu is at the top of the page.
  • It automatically provides a "breadcrumbs" trail to allow the user to retrace her/his steps.
  • Once I had planned the structure and allocated the content into broad categories it was easy to construct the site's pages and sub-pages. Webnode provides flexibility to re-allocate sub-pages to main pages, change page level in the hierarchy and sequence.  It also keeps a repository of discarded content, just in case it is needed again.  The latter function has a small drawback as redundant content can still be found through the search facility.

However, I came up against some difficulties:

  • None of the templates provide for a local sub-menu as I had planned. 
  • The breadcrumb trail does not show the way the user gets to items that are organised in lists, like the members' individual pages.  For instance on Lula's page the user finds this breadcrumb trail:

Home > Lula Remax

though, given the navigation structure, it should be

Home > Current members > Members' pages > Lula Remax

This makes it more difficult for the user to retrace her/his steps.

  • Another problem with list items is this: The Site map does not show them; therefore individual members' pages, such as Lula's, cannot be found through looking at there.  But I preferred organising the members' pages in a list, rather than making each page a sub-page of the Current members' page.  This is because, with up to 25 members creating a page for each would have meant having a page with 25 sub pages - not easily navigated.
  • The Widgets that I inserted (Google map. Journey planner and RSS feed) at first would take Chiselworks' website visitors straight through to the originating websites.  This would have made them leave Chilselworks' site, which I wanted to avoid.  I managed to change the code, so these links now open in new tabs. 

To improve navigation and assist the user I devised several strategies:

  • Where a page had one or more sub-pages I used the introduction panel (on the upper right, next to the main picture) as a means to provide links from the main page to the sub-page and inserted a reverse link from the sub page to the main page.  This, I thought, would be an adequate substitute for the local sub-menu that I had planned.  I also used this panel to summarise the content of the page.  This gives the user an indication of what the page is about, without having to scroll down to the main content The exception is the Home page that shos a picture of Chiselworks' interior instead.
  • In the text of each page I inserted links to other relevant pages.
  • In the Members' pages, a tag-cloud, as well as links to each member, assist the user in searching and browsing for members and their products or services.
  • Where possible I made external links open in new tabs, rather than take away visitors from Chiselworks' website.
  • I edited the 404 Page not found page to include a link to the Site map, Search, and Home pages.
  • The functions of the Site map and Search page are to assist users to find specific content,  For the users' convenience I provided links between them.   

As a budding information professional I am uncomfortable with a task that demands of me to produce and publish a whole raft of false information.  I asked myself how can the website be "authoritative", as stipulated by the assignment guidance, yet purport to represent an organisation that does not exist?  Then I had a try at it:

  • I reproduced a photograph of an existing industrial warehouse building, and inserted a Google map location, to give the impression of Chiselworks being housed in a real building at a real location. I deliberately chose a derelict building (surprising to find that in 2012 Central London), hoping for it to be vacant, so that I would not offend any inhabitants.  Then I added some interior images of another, similar, building to give a feel of the inside. I would have liked to have provided a virtual tour, however, as I do not have access to a real Chiselworks, I arranged these images together with explanatory text as a substitute.
  • To represent Chiselworks' extensive provision of machinery I chose historical engravings of woodworking machinery (obtained from the Wellcome library on Creative Commons licenses), rather than contemporary photographs . This way, I thought, no one will be fooled to think that these really are currently in use by the Co-operative's members.
  • As per assignment guidance I invented contact details, people's names and Chiselworks' "address", although, if you look carefully, it does not tally with Google map's details.
  • To add credibility, I claimed that Chiselworks is a limited company and registered as a co-operative with the "appropriate registrar".
  • To give the impression that my website is about a real place and real people I invented fictional members with fictional CVs.  However, not wanting to publish pictures of "real" people I resorted to historical portraits from the Wellcome library to represent individual members of the co-operative.  Instead of a group photo I produced a crude sketch.
  • A website of a genuine organisation would benefit from verifiable quotes from people and organisations of authority, such as a managing director of an enterprise and a local paper. I duly created a couple of flattering quotes, making sure that I used names that are not associated with real sources. 

The purpose of this website as an assessed piece of work also required me to move Chiselworks' events archive from its most appropriate place.  Ordinarily it would have been published in one or more sub pages of a blog of current news.  But as the blog was taken for reflecting on this website, the archive was placed to become a sub-page of the "About us" page.  I employed internal linking - from the "Our history" section to minimise the effect of the unexpected position of this page.

 

The overall project

04/07/2013 22:34

This is the first website I have constructed.  I did not really know what to expect.  The module and associated readings appeared to make sense, until I embarked on the practical work.  Challenges arose from two main areas:

1    The website represents a fictional organisation, but should be 'authoritative'.

2       It was necessary to make compromises due to Webnode software's many pre-set features. These could not easily (and sometimes not at all) be adapted to the design I had planned, and to meet accessibility standards. 

Furthermore, building a website for an organisation should ideally be a work of a site development team, and involve sponsors, designers, webmaster, information architect, copywriters etc.  Though this project is quite small, I missed the opportunity to discuss my work and progress with others.  To some extent this is the same for all my assignments and part of being a distance learner.  Because it is my first website, and because so much design work is required, I may have missed those critical discussions more than usual.

 

Chiselworks Woodworker Co-operative is located at 110 Woodpecker Street, The Oldest London Borough, London SE16.  We are registered with [the appropriate registrar] and limited by guarantee.

Creative Commons Licence
Images on this site, if not otherwise stated, are licensed under a Creative Commons Attribution-NonCommercial 2.0 UK: England & Wales License.