/[cvs.andrew.net.au]/uni/COMP2410/a2.html
ViewVC logotype

Contents of /uni/COMP2410/a2.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.11 - (show annotations)
Fri May 7 02:31:50 2004 UTC (18 years, 3 months ago) by apollock
Branch: MAIN
CVS Tags: HEAD
Changes since 1.10: +44 -0 lines
File MIME type: text/html
More final

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3
4 <HTML>
5 <HEAD>
6 <META http-equiv="Content-Type" content="text/html; charset=utf-8">
7
8 <TITLE>COMP2410: Assignment 2 - Website Critique</TITLE>
9 </HEAD>
10 <BODY>
11
12 <H1>A report on the Melbourne Commonwealth Games and Beijing Olympic Games websites</H1>
13
14 <H2>Introduction</H2>
15
16 <P>
17 This document aims to provide an objective comparison between the websites for
18 the 2008 Olympics in Beijing (<TT>http://en.beijing-2008.org/</TT>), and the
19 2006 Commonwealth Games in Melbourne
20 (<TT>http://www.melbourne2006.com.au/</TT>), herein referred to as the
21 Beijing and Melbourne websites, respectively.
22 </P>
23
24 <P>
25 This document will focus in particular in the areas of:
26 <UL>
27 <LI>target audience
28 <LI>site design and structure
29 <LI>useability, particularly for those with disabilities
30 <LI>design methodologies used
31 <LI>standards compliance
32 </UL>
33
34 <P>
35 Finally, this document will identify and highlight any deficiencies in the
36 above areas, and put forward recommendations for improvement.
37 </P>
38
39 <H2>Target audience</H2>
40
41 <P>
42 The target audience for the Beijing website is primarily for
43 English-speaking members of the global community, who are interested in the
44 progress of the 2008 Olympic Games. As there are still four years until these
45 games, this website is reporting on fairly procedural and bureaucratic
46 matters, and so is mainly going to be of interest to people wanting to
47 follow the early planning processes for these Games. The main purpose this
48 website probably serves today is to provide a degree of transparency to the
49 organising processes for the Beijing games. One would expect that as the
50 Beijing Games draw closer, this website will evolve into the more
51 traditional promotional website, like the Athens website is today. The
52 copyright for the website is declared to be held by the Beijing Organizing
53 Committee for the Games of the XXIX Olympiad, so one would presume that it
54 is BOCOG that sponsored its creation.
55 </P>
56
57 <P>
58 The Melbourne website is more promotionally oriented, probably largely to do
59 with the fact that there are less than two years until these Games commence,
60 and there isn't another Commonwealth Games between now and the Melbourne Games
61 starting. Also, as the start of the Games is much closer, a lot of the
62 bureaucratic processes would have already run their course. This website would
63 also be targeted at members of the global community who are interested to see
64 how these Games are progressing, but with slightly more of an intention to be
65 attending the Games. The Melbourne 2006 Commonwealth Games Pty Ltd corporate
66 has asserted copyright over the Melbourne website, and so is presumably the
67 sponsor of it.
68 </P>
69
70 <P>
71 To summarise, the Beijing website, in its current format, is mostly
72 reporting on the progress of the Beijing Organising Committee for the
73 Olympic Games (BOCOG), whereas the Melbourne website is more promotionally
74 oriented, focused on targeting potential tourists, who may attend the
75 Commonwealth Games. Neither website specifically credits an individual or
76 organisation as having been their creator, so it is presumed that either
77 they were created in-house, or the outsourcers did not receive credit as part
78 of the outsourcing arrangements for the creation of each website.
79 </P>
80
81 <H2>Site design and structure</H2>
82
83 <P>
84 The Beijing website is obviously developed with Chinese as its natural
85 language, and translated into English, due to the way some of the website
86 reads. From inspecting the HTML source, it is not immediately obvious how
87 the website was constructed, however there are some non-standard tags that
88 suggest a Content Management System (CMS) called Sohu was employed. The site
89 makes extensive use of Cascading Style Sheets (CSS). This website is also
90 making use of the HTTP/1.1 Language Negotiation feature, so English users
91 are directed to the English website, and Chinese users are directed to the
92 Chinese website, and both users can access the main URL
93 <TT>http://www.beijing-2008.org/</TT>. Interestingly enough, clients that do
94 not set the Accept-Language HTTP header are redirected to the English
95 website, so making this the default language for clients that do not support
96 Language Negotiation.
97 </P>
98
99 <P>
100 Structurally, the front page provides space for some graphics, and the
101 most recent news bulletin, with links to the headlines for more recent
102 bulletins beneath the current featured bulletin. On either side of the
103 centrepiece, are links to various other parts of the website. The Features
104 section is displayed in single-line summary on the left, and in slightly
105 more detail, with images, on the right. The webpage employs JavaScript and
106 Macromedia Flash technology.
107 <P>
108
109 <P>
110 The most notable flaws on the front page are that there seems to be a Y2K-type
111 bug with the display of the current date. For example, today is displayed as
112 01/05/104. Noticeably absent is a link to a site map, so there is no
113 immediately obvious mechanism for gaining an overall view of the website's
114 hierarchy. Also, one is given the impression that the designers were struggling
115 for content, duplicating the Features information in both the left and right
116 sidebars. Certainly it would unclutter the front page a little to remove this
117 duplication. An observation made with regards to the implementation of CSS on
118 this website is that the CSS data is embedded within the HTML source, which
119 does not exploit the central manageability feature that having a CSS in a
120 separate file gives. Finally, there is a search function on the front page,
121 made obvious by the presence of a search button, however, the form field for
122 entering search criteria, to the left of the search button, is completely
123 invisible (in Mozilla Firefox) due to the way it is rendered.
124 </P>
125
126 <P>
127 From inspecting the HTML source of the Melbourne website, again, no secrets
128 are given away with regards to the software employed for its creation. The
129 website makes use of JavaScript, Macromedia Flash and Cascading Style Sheet
130 technologies. This website does employ the method of implementing the
131 stylesheets in a separate file, allowing for quick, easy and central changes
132 to the style of the website if so desired.
133 </P>
134
135 <P>
136 The structure of the website consists of an emulated frameset, with a
137 persistent navigation bar on the left of the page. This navigation bar has
138 JavaScript expanding menus. There are also consistent navigation links at
139 the bottom of each page. The front page has space for an image (which is
140 related to current news on the site), and links to recent previous news
141 articles. The front page is used to convey announcements to the site's
142 audience. There is a link to a site map, which is laid out as a hierarchical
143 summary of links on the site.
144 </P>
145
146 <P>
147 The main error found on this website, is that on the front page, there is
148 currently an error in the HTML source, and an HTML comment is not correctly
149 opened. This is resulting in what should be a comment appearing at the top
150 of the page, which looks quite out of place. Strangely, this error only
151 seems to manifest itself in Gecko based browsers, such as Mozilla and
152 Mozilla Firebird. Internet Explorer, even in the HTML source, does not show
153 such an error even in the HTML source.
154 </P>
155
156 <H2>Useability</H2>
157
158 <P>
159 To assess the useability of both websites, they were viewed in Mozilla
160 Firefox and Internet Explorer on Windows, both with and without images
161 enabled, Mozilla on Linux, and Lynx on Linux. This gave an indication of how
162 the websites behaved in a wide variety of client browser situations. A
163 separate assessment was made of the dependence on graphics for navigation
164 and communication of important information. For the visually impaired, all
165 that would be available would be the text components of the websites, and
166 the contents of any image tag ALT attributes. This was a significant issue
167 with the useability of the Sydney 2000 Olympic Games website, which actually
168 resulted in legal action.
169 <CITE>
170 <TT>
171 http://www.independentliving.org/docs5/sydney-olympics-blind-accessibility-decision.html<BR>
172 http://www.abc.net.au/pm/s160905.htm<BR>
173 </TT>
174 </CITE>
175
176 <P>
177 Accessing the Beijing website with Internet Explorer resulted in a prompt
178 to install the Chinese Simplified language pack. Cancelling this
179 installation request still resulted in a readable English page being loaded.
180 Interestingly, the Y2K-type bug with the current date is not present when
181 viewed with Internet Explorer, which suggests that the problem is actually a
182 JavaScript implementation bug with Mozilla Firefox, or some sort of browser
183 detection logic error in the JavaScript on this site. Navigation around the
184 site resulted in further prompts to install the Chinese Simplified language
185 pack. This is probably because the character-set used is gb2312, whereas
186 most Western websites would use the utf-8 or ASCII character-sets.
187 </P>
188
189 <P>
190 The navigation links on the left make use of JavaScript to expand downwards
191 when clicked. For example, the BOCOG link, when clicked, expands downwards
192 to reveal "About us", "BOCOG leaders" and "Contact us". With JavaScript
193 disabled, the website detects this and renders the sub-links all the time,
194 for all of the links on the left, so there is no loss of functionality for
195 users that have a non-JavaScript capable browser, or have JavaScript
196 disabled for security reasons.
197 <P>
198
199 <P>
200 When browsing the Beijing website with Mozilla Firebird, the most noticeable
201 differences in the way the front page of the website was rendered were the
202 fact that the top banner took up more height on the page, forcing the rest
203 of the page to appear lower down on the screen. Also, as mentioned earlier,
204 the current date has the year displayed incorrectly, and the search text
205 input field does not have a border around it, making it quite difficult to
206 discern. The navigation links referred to in the previous paragraph are all
207 shown in their expanded form, as if JavaScript was disabled. There may be a
208 logic error in the JavaScript for this website, or the manner in which it
209 determines if JavaScript is enabled.
210 <P>
211
212 <P>
213 When viewing the website with Lynx, the navigation links that are normally
214 displayed on the left always appear first on the page, which makes it
215 slightly difficult to determine where the content of the specific page begins
216 and the persistent navigation links end, but the content is otherwise fairly
217 legible when viewed as just plain text. One complaint is that some of the
218 titles are implemented as graphics, without the use of an ALT attribute. For
219 example, the significance of the Features sidebar on the right of the front
220 page is somewhat lost without being able to determine that it is indeed a
221 sidebar devoted to features.
222 </P>
223
224 <P>
225 Browsing the website with images disabled (in Internet Explorer), but with
226 JavaScript enabled, is quite a sobering experience. All of the navigation on
227 the left sidebar is implemented with graphics that do not have an ALT
228 attribute, so one is presented with a number of anonymous image placeholder
229 boxes. Clicking on the boxes expands them down as before, presenting the
230 viewer with specific links, however there is no indication that one
231 <I>should</I> click on these image placeholders. On the BOCOG News page,
232 whilst the images themselves do not have ALT attributes, they do have
233 captions, however for a blind user using text-to-speech software, this may
234 be verbalised out of context, confusing the user somewhat.
235 </P>
236
237 <P>
238 As the Melbourne website's primary language is English, it is difficult to
239 tell if it is making use of language negotiation, but it is assumed not to
240 be, as the first language of the Commonwealth is English.
241 <P>
242
243 <P>
244 The Melbourne website does not make extensive use of graphics for
245 navigation, and it does seem to have learned from the Sydney Organising
246 Committee for the Olympic Games (SOCOG) experience. The one photograph on
247 the front page does have an ALT attribute, describing what it is.
248 </P>
249
250 <P>
251 The navigation bar on the left of the Melbourne website also makes use of
252 JavaScript in a similar manner to the Beijing website, however, the menu is
253 implemented entirely as textual links. With JavaScript disabled, all the
254 menus appear in their uncollapsed form, so again, there is no loss of
255 functionality for browsers that do not support JavaScript or have it
256 disabled.
257 </P>
258
259 <P>
260 Viewing the Melbourne website with images disabled results in a slightly odd
261 colour scheme compared to how it looks with images enabled, however this
262 will not be an issue to blind visitors, but non-visually impaired visitors
263 that have a low-bandwidth link will get a slightly more difficult to read
264 page, due to the colour scheme used, and the dependency on the background
265 colour of the navigation bar.
266 </P>
267
268 <P>
269 The Melbourne site makes good use of image ALT attributes throughout, even
270 for cosmetic images, where their presence or absence really only impacts on
271 the site's aesthetics, not its functionality.
272 </P>
273
274 <P>
275 Due to the fact that the Melbourne website does not make extensive use of
276 tables for its formatting, the page renders quite cleanly in Lynx. The
277 navigation bar always appears first, fully expanded, and then the body of
278 the page appears below it.
279 </P>
280
281 <H2>Design methodologies</H2>
282
283 The Beijing website uses a user-centric design methodology. The layout is
284 not overly tied to organisational structure, and aims to give the visitor
285 ready access to a number of different sources of information. It does not
286 overemphasise the use of multimedia technologies like Macromedia Flash,
287 whilst it does make some use of it.
288
289 The Melbourne website also uses a user-centric design methodology. It
290 presents a clean, uncluttered front page, and provides a number of links
291 based on potential information requirements of website visitors. It also
292 makes use of Macromedia Flash technology, but not in any form that detracts
293 from the useability of the website by not having it available.
294
295 <H2>Standards compliance</H2>
296
297 <P>
298 Unfortunately, the Beijing website does not contain a document type
299 definition (DTD) within its HTML source, and so the World Wide Web
300 Consortium's HTML validator was unable to automatically validate it against
301 the website designer's intended document type. Attempting to validate the
302 HTML as 4.01 Transitional (or any earlier HTML standard) and XHTML 1.0
303 Transitional resulted in numerous errors, so it is safe to say that the
304 HTML for this website is not compliant with any particular version of the
305 HTML or XHTML specification.
306 </P>
307
308 <P>
309 The Melbourne website does declare that it is using the XHTML 1.0
310 Transitional DTD, however, the W3C's HTML validator also finds a number of
311 errors in the HTML. Interestingly, it seems to be considering some of the
312 JavaScript code as HTML, which suggests that it has not been properly
313 escaped and encapsulated in the correct manner. This website is not
314 compliant with the specification that it is claiming to adhere to by its
315 DTD.
316 </P>
317
318 <H2>Summary</H2>
319
320 <P>
321 The Beijing website could be improved in the areas of standards compliance,
322 by first declaring a DTD, and then attempting to comply with it. It could
323 also be slightly less dependent on images for navigation purposes, and use
324 the ALT attribute wherever it does. Finally, the JavaScript code it uses
325 could be more browser-independent, resulting in a more consistent
326 cross-browser viewing experience.
327 </P>
328
329 <P>
330 The Melbourne website is significantly more accessible than the Beijing
331 website, and its main area of improvement is standards compliance. It
332 already declares a DTD, it just needs to comply with it.
333 </P>
334
335 <P>
336 In conclusion, both websites have room for improvement, however the
337 Melbourne website rates higher in terms of its current useability and
338 accessibility, both for unimpaired and visually-impaired visitors.
339 </P>
340
341 <H2>Recommended improvements</H2>
342
343 <H3>For the Beijing website</H3>
344
345 <OL>
346 <LI>Use a DTD
347 <LI>Comply with that DTD
348 <LI>Separate the stylesheet data from the HTML source
349 <LI>Use ALT attributes for significant images
350 <LI>Have better cross-browser support
351 </OL>
352
353 <P>
354 Using a Document Type Definition (DTD), within the HTML source will allow
355 for more accurate automated checking of the HTML against the declared DTD.
356 Complying with this DTD is the desirable thing to do for the website to
357 behave in an expected manner. Separating the stylesheet from the HTML source
358 will allow the web designers to leverage central manageability of the styles
359 across the entire website, without having to touch the HTML source. This may
360 be irrelevant, as there is the possibility all of this is handled by the
361 content management system (CMS) that is used. Using the ALT attribute for
362 images will avoid the risk of litigation that SOCOG experienced, as well as
363 providing a better browsing experience for blind visitors to the website,
364 and finally having better cross-browser support will allow for a more
365 consistent appearance for the website, regardless of what browser the
366 visitor is using.
367 </P>
368
369 <H3>For the Melbourne website</H3>
370
371 <OL>
372 <LI>Comply with the DTD specified
373 <LI>Provide multi-lingual support
374 </OL>
375
376 <P>
377 There isn't the significant room for improvement with the Melbourne website.
378 Complying with the DTD used in the HTML will improve standards support and
379 validation results. Providing multi-lingual support will allow greater
380 accessibility beyond English speaking visitors, however this may not be the
381 target audience, so it may not be of importance to the site's sponsor(s).
382 </P>
383
384 <H2>References</H2>
385
386 <P>
387 Independent Living Institute, 'Bruce Lindsay Maguire vs Sydney Olympic
388 Committee for the Olympic Games', <B><A
389 href="http://www.independentliving.org/docs5/sydney-olympics-blind-accessibility-decision.html">http://www.independentliving.org/docs5/sydney-olympics-blind-accessibility-decision.html</A></B>.
390 Last updated Tue, 03 Feb 2004 12:37:24 GMT.
391 </P>
392
393 <P>
394 The Australian Broadcasting Commission, 'PM - SOCOG fails to address the
395 blind on their website', <B><A
396 href="http://www.abc.net.au/pm/s160905.htm">http://www.abc.net.au/pm/s160905.htm</A></B>.
397 Unknown modification time.
398 </P>
399
400 <P>
401 Lengel, James G. <I>The Web wizard's guide to web design</I>, Addison Wesley, 2002.
402 </P>
403
404 <HR>
405 I declare that, except where appropriately attributed, the content of the
406 files I have submitted for this assignment is entirely my own work, and has
407 not been produced, in whole or in part, by any other person.
408 (signed) Andrew Pollock
409 </BODY>
410 </HTML>

  ViewVC Help
Powered by ViewVC 1.1.22