INT1032 - Online Communication Design
Unit Brief
Evaluate a minimum of 5 different web sites within a category (e.g. shopping, financial, news, etc) and present your findings in a simple web site.
Each site should be reviewed against an evaluation criteria, with a star (or similar) rating given for each.
Proposal
I have decided to evaluate 6 web sites that come under the news category. I chose this category because of the wide array of different styles used in presenting and gathering of information on various web sites found within this category.
For example: Google News UK indexes news articles from many different news web sites and presents them all in its own customisable user interface. Whereas BBC News only uses its own news articles and doesn't allow any customisation.
I will hand code the web site using XHTML, CSS and PHP. I will use Macromedia Dreamweaver 8 for coding, and Macromedia Fireworks 8 for any graphics I require.
Research
Web sites which I found useful when creating this web site:
- W3Schools - Has HTML and CSS tutorials and references.
- PHP Manual - Contains references and code samples for all the PHP functions.
Web sites which I will use to help with my site reviews:
- Markup Validation Service - Checks to see if HTML is valid.
- CSS Validation Service - Checks to see if CSS is valid.
- HiSoftware® Cynthia Says™ Portal - Performs an automated accessibility check.
- Colorblind Web Page Filter - Allows you to view web sites as a colour blind person would.
Planning
The reviews will be presented within this hand coded web site with an overview page (this page), a page for each review and a page explaining the evaluation criteria.
The first thing I did was to look at my options for a web site layout and came up with some initial ideas.
I then went on to choose my favourite layout, highlighted some of the possible problems and looked at some possible solutions which helped evolve of my chosen design.
This helped me produce my final design, which I transformed into this web site using XHTML, CSS and a little bit of simple PHP.
Some sketches of the process can be found in the sidebar.
After I created the web site, I started planning the criteria on which to review the web sites. I used some of the examples from the brief and also some of my own. I organised them into four categories, with five criteria in each to make it easier to calculate the overall site rating.
I also had to produce a rating system to rate each criteria; I chose a star rating system as it is simple and easy to understand.
The evaluation criteria and rating system explanations can be found here.
Final Piece
The completed web site is what you are viewing now. It is XHTML and CSS compliant to ensure browser compatibility and accessibility. It also uses a little bit of simple PHP to include common files (e.g. header, footer, etc.) and put together the page title from an array.
Below is a summary of the reviews, along with links to the web sites reviewed and the full reviews.
- BBC News - 81%
- Google News UK - 76%
- Sky News - 72%
- The Independent Online Edition - 77%
- This is Hull and East Riding - 73%
- Yahoo! News UK - 72%
Review
In conclusion to my news web sites reviews, I have found that the format of most of the web sites I reviewed were very similar. All had good content and navigation, but were let down by accessibility issues. The BBC News web site came out with the highest rating mainly because of it's professional image and trustworthy content. However, sites like Google News UK and Yahoo! News UK were different from the other web sites I reviewed, in that they gathered content from lot's of other news web sites, therefore having the most content. They could have come out on top, but they were let down by their design and functionality.
If I were to this project again, I would spend more time testing the web sites out on different operating systems and browsers, and also checking that sites were usable with screen readers and viewable on other devices.
I didn't have much trouble whilst building this web site, except getting the headers and menus to line up properly at the top of the page. I managed this using CSS with help from the reference at W3Schools.
The web site could be improved by having better navigation in between pages. This could be achieved by using a breadcrumb, and could easily be added in the future. One person has commented that paragraphs are too wide to be read comfortably; I could limit paragraph widths, but this is really down to the personal preference of users. I could also add a print stylesheet, so when pages are printed, navigation elements are hidden, but the logo is still shown.
