Working version online

After a good couple of months additional work, mainly comprising layout adaptions, screening and amending my client’s provided content for use on the web, a working version of the website can found at:

http://www.vitalis-greetsiel.de

Protected: Critical evaluation and self reflection

This post is password protected. To view it please enter your password below:

Password:

Text resizing in browser

Screenshots showing how text resizes within the browser (major accessibility checkpoint). As I used relative values and not pixels this works up to two steps without breaking the layout. All sizes above would most surely mean the user needs a different device with actual screen magnifying capabilities as opposed to a normal web browser. See also: http://www.etre.com/blog/2007/09/how_to_resize_text_in_your_bro/

Online: new header images in content pages + generic dummy page

http://vitalis-greetsiel.de/relaunch07/vitalis_content_well.htm

http://vitalis-greetsiel.de/relaunch07/vitalis_content_um.htm

http://vitalis-greetsiel.de/relaunch07/vitalis_content_hotel.htm

http://vitalis-greetsiel.de/relaunch07/vitalis_content_rest.htm
Dummy Page:
http://vitalis-greetsiel.de/relaunch07/hotel.htm

New header image applied

New header images created

As not every image was wide enough for the header space of 930 pixels at a 1024×768 resolution I had to create simple montages which I think work quite well. The colour scheme in the right hand area derives from a colour picked within the actual image on the left.

Older Mindmaps

In the context of my previous post  it might be useful to upload my very rough, initial mindmaps from when I first thought about the proposed topic. I have ever since meant to update and upload these by using a tool like mindomo or mindmeister but have never quite come round to it.

Testing the website in Lynx

See a simulation of how the website would be rendered by the Lynx browser; this is a popular check for accessibility and well formed code:

Background information:

• The Lynx browser is a text-only browser and is a fantastic tool for checking on the accessibility of any web page. It works in much the same way as any other Internet browser (such as Internet Explorer), except it doesn’t have support for JavaScript, Flash, CSS or images. As such, what you see on the screen is a rough approximation as to what a screen reader user will hear when browsing the site.
  Source: http://www.webcredible.co.uk/about-us/news/nov-2004.shtml
  

• Lynx is probably the most widely-used text-only browser, and is commonly used by those with visual or physical disabilities. It is available for Windows, UNIX and DOS, while a Mac version is planned in the future. Development occurs on an ad-hoc basis by a small open-source community so support is rather limited. A degree of technical knowledge is required to install any version of Lynx, and it is necessary to compile some versions before they can be used.
  Source: http://www.testpartners.co.uk/resources_browsers.htm

Solutions to the image display & resize problems in IE 6

After some more research it became clear that the issue described in my previous entry is quite common and has caused some headaches within the webdesign community.

I have duplicated some experiments (See here and here) by Richard Rutter for my layout with these acceptable solutions also allowing for resizing the window to 800×600:

http://vitalis-greetsiel.de/relaunch07/vitalis_content019.htm

http://vitalis-greetsiel.de/relaunch07/vitalis_content020.htm
(issue at 800×600: side scrolling may imply content on the right hand side when in fact it is just the rest of header image hidden by the overflow:hide command)

The rescaled right hand image does not look brilliant at 800×600 which I presume is due to it being a GIF which is not the preferred file format for photographic images anyway hence I will create a new JPG or PNG which should degrade better.

Problems viewing layout images in Internet Explorer

Screenshot above shows how the new layout displays in Internet Exlporer 6.0 on a PC. I will need to investigate further why this occurs on this browser and platform. As mentioned before although the inferiority i.e. bad support for web standards in IE is well documented I cannot afford to ignore this as it is the main browser/OS combination for the target audience as shown in my previous blog entry.