Building a usable/accessible web site

For the second  activity in session 04 you will be building a simple web site with due regard for usability and accessibility.

To help with this you will use some of the ideas you have learnt about styling with CSS.

You should cover the following steps:

• using tables for layout build a template for your main page;
• add in appropriate navigation and other areas;
• using CSS style your home page appropriately;
• publish your page with an explanation of how you have styled it and why you have chosen that particular design;
• publish your explanation as a comment on this blog post making a link to your page;
• add at least one more page to your site taking due regard for consistency of design and locating the user within the site;

How is it going so far?

Please comment on this post by telling me something about what you have learnt so far on the module.

You might do this by telling me:

• three things that you have learnt so far;
• any topics that are still a bit unclear for you on which you might want to do some more work;

Your may add your name to your comment or not as you like, but if you want me to get back to you for individual help I will need your name.

Checking for usability or accessibility

Now you have developed some ideas what makes a usable or accessible web site you can check some sites against these criteria.

To do so you should:

• choose a web site to check for usability or accessibility
• check it and put together a statement to say how usable and/or accessible it is and why you think so;
• publish this information by commenting on this post and giving the URL of the site together with your statement;

Finding out about usability or accessibility

In the first activity for session 04 you are going to locate information about accessibility and usability and then check some web sites to see how accessible and usable they are.

To do this you should:

• using a search engine of your choice locate information about usability or accessibility [or if you find difficulty use the resources given];
• decide what are the important aspects of usability or accessibility that each site has to say and make some notes about them;
• publish your notes by commenting on this post and give the URL of the site from which you have obtained the information;

Learning about CSS

Work through the examples on basic CSS that have been given this session.

Download the files used and make changes to them to understand how they work.

If you have any observations to make about these activities then respond to this post by making a comment.

My CSS styles

To complete this activity you should:

• write a web page which contains no styling;
• design a style sheet to style the page;
• place the style sheet in the header of the page;
• check that your styles behave as expected and if not modify them;
• upload your page to WebCT in the Presentation area, don’t forget and link it to index.html;
• respond to this blog post to explain your reasons for choosing these styles and link your page to your comment.

Advantages of CSS

Using the resources provided or otherwise:

Find out the advantages and disadvantages of CSS as compared with standard HTML

Publish these on the blog in response to this post

Take a look at what others have said and see if you agree

Designing a flowchart

Open a suitable tool for producing a flow chart e.g. MSPowerpoint;

Design a flowchart which explains in outline how to produce a web site;

Write a brief outline of how your flowchart uses ideas from design methodologies and why a flowchart is a useful tool in web design

In the WebCT presentation area publish your flowchart by uploading it and making a link from your index page

Publish your outline by commenting on this blog post and include a hyperlink to the page in the presentation area ( see my example comment)

Then go and have a look at what other people have said. You might want to reply to one of their messages if you have similar ideas and agree with their comments.

Designing a web page

You are asked to put together a web page taking account of good layout, appropriate colours and fonts, and text readability.

You may be new to Dreamweaver so I have given a workbook which will explain to you how it works.

Using Dreamweaver, or otherwise produce a well designed web page.

Call your web page index.html and upload it to your presentation area on WeBCT.

Explain why your web page is well designed by commenting on this post and attach a link to the web page itself to the comment.  I have made a comment to give you an example.

Take a look at other peoples web pages and comment on them constructively using the comment area on the blog.

Evaluation of web sites

Please comment on this post by giving your group’s evaluation of a web site.

Please include:

• the name of the web site;
• the URL of the web site;
• a summary of your critique;
• the name of your group