Assignment Progress

You are asked to outline how far you are with your assignment so far.

So far, I have created the web pages I will be using for my assignment. The website is basically a business website advertising my IT services (e.g. virus removal, web design, upgrades, etc).

My three audiences I will be designing for and the design considerations are:

• General Web User:
  This type of user uses a standard web browser and views the website on a PC or Mac. I will be testing the website for compatibility on Firefox and Internet Explorer, which are used by the majority of web users.
  
  The portfolio page will use JavaScript to load an XML version of the portfolio and effects the Mootools library to present the portfolio items in an enhanced, interactive manner. However, if JavaScript is unavailable they will be presented with a simplified view of the portfolio items.
  
• Mobile User:
  This type of user browses on a handheld device. Care will be taken to ensure that graphics and the over all page layout fits adequately on the small screens used. The navigation menu will be positioned at the top and links will allow the user to quickly skip to the content of the page.
  
  The portfolio page will be presented in a simplified view.
  
• Visually-Impaired User:
  This user will have a visual impairment, which will affect their ability to see the pages clearly. Consequently, the page will need to be designed with high-contrast colours, a larger (resizable) font-size and more spacing between hyperlinks to ensure the user selects the correct one.
  
  The site will be designed to W3C standards (valid XHTML, CSS and adherence to WCAG Level A conformance). This will ensure that users with other disabilities or users that use assistive devices such as screen-readers stand a high chance of being able to browse the website.

An XSLT file will also be created, which will transform the portfolio items held in an XML file to the XHTML table used in the portfolio.

This will ensure that when updates are made to the XML portfolio, the changes can easily be copied into the plain (non-JavaScript) version of the portfolio. In reality, server-side scripting would be used to generate this content, which would probably be held in a database.

There we have it. Hope you like the plan. On with the coding now...

Mobile Devices

For my assignment I am hoping to use mobile/handheld devices as one of my user groups. The idea is that users visiting on a normal computer screen will view the fancy, full design and when visitors using a handheld device (e.g. a mobile phone or PDA) view the site, they will get a slimmed-down layout that will enable them to browse more effectively.

One way of doing this is when you specify your stylesheets, you can add a property called media. By specifying media="screen", the stylesheet will only show when viewing from a normal screen and media="handheld" will only show that stylesheet if it is a handheld device.

Well that's the theory. After a few tests, it appears that Sue's Blackberry mobile and my Nokia N82 mobile despite their tiny screens like to think they are real computer screens and completely ignore the handheld stylesheet that was carefully crafted for them.

The result? Well, the main stylesheet loads, which means that you either end up seeing a small portion of the page and need to scroll till your fingers are sore... or the page is zoomed out so far, nothing is legible.

The solution? Well, JavaScript would be one method, but if that is disabled (I assume at least a small portion of handheld devices do not have JavaScript) then the only real solution is to use server-side scripting. This could be implemented by looking at the browser used or the operating system and serving up the correct site.

You can view this page on a normal computer or handheld device to see what stylesheets get shown: http://www.htmldog.com/test/handheld.html

Building a Usable/Accessible Website (Week 4)

The web page I have created uses a three-column approach. This layout works well for sites that have a lot of information as both the middle and right columns can be used for the information.

The layout stretches to the width of the screen. This would need to be checked on widescreens to make sure that the line length is not too long.

Using CSS, I have made the navigation menu move down as you scroll down the page. This makes it quick and easy to access.

Headings are used to make it clear what each part of the page is for.

The navigation menu uses list items turned into buttons. This makes them clear and the way the padding has been added, the whole of the button can be clicked rather than just the text.

Advantages and Disadvantages of CSS

CSS has its advantages and disadvantages. Here is a quick summary of them:

Advantages

• It allows separation of content from the presentation so that adding more information is easier. The pages do not consist of 'tag soup' with lots of font tags all over the place.
  
• Updating the styles can be done by editing one file rather than having to update every page on the site.
  
• Inconsistencies between styles on each page is kept to a minimum as each page is getting styles from the same place.
  
• Web pages can be displayed in many different ways to suit the user without having to create multiple copies of the pages. For example, a high contrast style with large fonts for users with visual impairments to a condensed layout to suit smaller screens e.g. mobile phones.
  
• Using JavaScript, there are many extra things you can do with the styles. This is known as Dynamic HTML (DHTML).

Disadvantages

• Variations in how browsers interpret the rules can impact how users see the pages. This may be tiny inconsistencies such as extra padding or content that can't be seen.
  
• Using tables for layouts can be significantly easier than using CSS techniques such as 'floating' elements, etc.
  
• The learning curve for CSS is bigger than for learning the basics of web design and using font tags for styling. This is especially true when trying to use CSS across different browsers.

Week 2 Activities

I have uploaded a web page to my web server. The web page uses a linked CSS stylesheet to style the web page. Here is an overview of what is happening:

• All the content is wrapped up in a DIV tag, which has been given a fixed width and centered on the page.
  
• The navigation menu is a standard bulleted list (like this one you are reading). It has been floated to the left, which makes the rest of the page content wrap around it.
  
• The links in the navigation menu have been given a 'hover' styling, which can be done by styling the a:hover element.
  
• The footer has been given a smaller font size.
  
• The rest of the page has been styled to give a different font size, style and colours to the default settings.

Activity 104) Evaluation of Kerrang Radio website

As an activity, we each had to evaluate a website. Being a rocker at heart, I chose to evaluate the Kerrang Radio website. Here are some of my findings:

Multimedia: The site uses lots of imagery and flash animations, which look very professional. Tests would need to be carried out to check whether it poses accessibility problems. The styles are consistent across pages and match the style featured in their magazine.

Layout: Looking at the source, the website layout is built using tables. Websites should ideally layout pages using CSS with the use of DIV tags, classes, etc. This allows content to be formatted to a variety of devices.

Fonts: The text is very small and when viewed in Internet Explorer, the increase/decrease text size does not do anything. This is because it uses fixed font sizes (px/pt) rather than relative sizes (em/%). Fortunately Mozilla Firefox ignores websites that fix their font sizes and will force the text to resize. Any users with visual impairments will be affected.

Navigation: The home page looks very busy, but there is a consistent navigation menu along the top of the page. This uses a dropdown menu style similar to PC software, which along with small font sizes may pose problems for users with cognitive/motor impairments. The menus do stay open fairly long, so this does help slightly.

Evaluation Criteria

What makes a good website? As a group, Matt, Gary and I came up with a list of some areas that make a website 'good'. Although, there is no such thing as a perfect website, it depends on the target audience; the user.

Anyway, here is what we came up with:

• Accessibility
  
• Site should be device independent e.g. mobile browser or
  screen readers. e.g. style sheet is different - page appearance.
  
• Take account of impairments e.g. visual, motor movement.
  
• Alternative media (video, sound) should have alternatives such as text etc…. (for those who cannot view the content).
  
• Fonts should be scaleable.
  
• Usability
  
• Examples include; consistent layout and navigation/menu.
  
• Error messages should be clear and provide relevant feedback (e.g. ERROR 101, Computer Says No!).
  
• Security
  
• All user input should be screened.
  
• Sensitive data should be kept secure e.g. encryption (e.g. SSL).
  
• Usefulness
  
• Content should be relevant to the websites aims or objectives.
  
• Aesthetics
  
• Adhere to corporate branding e.g. business colour schemes.
  
• Be both eyecatching where required and provide alternative media such as images, video and sound…but not be overdone.