With all eyes on the Beijing for the 2008 Olympics I thought I’d publish a few observations of how well the official Beijing Olympic 2008 website works for international users. This post accompanies one I wrote about the accessibility of the Beijing 2008 website and flags where the cross overs exist with accessibility, localisation and internationalisation.
Quick disclaimer: my background is not in localisation and internationalisation but accessibility. My interest in the two comes from where I see issues that affect people with disabilities also affect international users. As with the accessibility review this is just a snap shot of a few observations and I’d love to hear more about your thoughts on the site so please go ahead and post comments.
Before we start lets have a quick look at what is meant by internationalisation (also known as i18n) and localisation (also known as l10n).
The W3C definition of internationalisation is:
“…the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language”.
And the W3C definition of localisation is:
“…adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a “locale”)”.
This can be pretty confusing at first glance. The definition seems to apply two different things: going global versus going local. But if you’re a website owner based in the UK who wants to expand into foreign markets then you have to take the step towards going global before you can make an entrance locally. In simple terms, for the purpose of this article, what these two definitions mean is that a web site template needs to be internationalised (i.e. the back end and architecture etc) in order to support content to be localised, (text, colours, images, icons and so on).
Moving away from websites for a minute another way of looking at it is an analogy of a car. If the car is internationalised then the body of the car is built in such a way that a steering wheel can be easily fitted on either the left or the right. If the car has not been internationalised however then it wont be able to be customised to fit a steering wheel on either side so the body of the car has to be built from scratch. Once the body of the car is right then you can focus on colours and fittings. And this is a key thing to think about with both internationalisation and accessibility in a website. If both are incorporated from the start you’ll have no costly and difficult retrofits down the line.
So how does Beijing 2008 fare? In no particular order, here is a summary of a handful of issues I focused on:
Presentation versus Content
Key to both an accessible site and an internationalised site is separating presentation from content i.e. using structural mark up to indicate headings, lists and data tables and CSS for layout and formatting fonts and styles etc. Returning to the difference between internationalisation and localisation flagged at the start of this article this basically means ensuring that your web content is constructed so that it can be painted and decorated in a way that suits its target audience.
Let’s look at an example of why semantics are so important. Chinese uses italics as a form of emphasis when printed but this doesn’t tend to look that great on web pages, so using “i” tags around ideographic text is not an ideal solution. Emphasis i.e. “em” however can be used so that a dot appears over the character being emphasised or a shaded box appears as it’s background.
Looking at the Beijing 2008 site structural markup has been used for content and CSS for layout which is good. This allows for much easier localisation of each language component and flexibility to style text in a way that works for any given language. There is a slight problem with the heading structure coded in the site though, as headings are not always coded as they should be, as noted in the headings section of Beijing 2008: part one accessibility. This is a problem because if the semantics are not right the content becomes less useful or usable both in terms of access for technologies such as screen readers, (an access technology that reads aloud content to visually impaired users), and how the site is translated.
Language coding
When working on sites that have multiple languages it is important to indicate what the main language of a page is, and any language changes within the content . This is necessary for a number of reasons:
- Screen readers will be able to identify language changes.
- Browsers will be able to display text properly and display text according to language-specific hyphenation and spacing rules.
- Search engines are better able to index your pages. Google, for example, allows you to search by language.
The Beijing 2008 site is available in Chinese, English, French, Spanish and Arabic with some pages having some parts of the page written in a language other than the main language of the page. For example in the French site there may be words presented in English. This is not a problem providing the page has been coded so that the main language is indicated and any changes in language on that page have also been identified.
The main language of the page should always be coded in the HTML tag in the head of the document. After that, any changes in the language on the page should also be marked up using the LANG attribute. So for example, if you have an English site that includes the French text Au Revoir!on a page the LANG attribute for French must be used to indicate a change i.e. LANG=”Fr”.
In the Beijing 2008 site the native language of the language versions is correctly coded for the Chinese (xml:lang=”zh-CN” lang=”zh-CN”), English (xml:lang=”en”, lang=”en”) and French (xml:lang=”fr-FR”, lang=”fr-FR”) pages but changes in language within page content is not. So for example the top right hand links on the English page to 中文 and Français are not coded using lang=”cn” and lang=”fr” respectively. This would be made possible if the image links were given appropriate lang attributes and alternative text, or were replaced with text links with the language change identified .
Links to alternative language versions
When people navigate to a site that is not in their native language one of the first things they will do is look for a link that takes them to a version of the site that is in their native language. As a website owner one of the key things you need to do therefore is make links to alternative language versions as clear and easy to find as possible. There are a number of ways that websites link to alternative language versions including drop down menus, images of linked flags and text links of the languages. Ideally however the best way to do this is to provide a link to the language version in the language of the target page. The Beijing 2008 site does just that at the top right of the page with images of text for English, 中文” and Français.
So why is this technique the preferred one? Let’s look at the example of a drop down menu with the text “Select language” first.
If you are a non English speaker landing on this site it’s unlikely that you will read and understand the text label “Please select your language” (not to mention the fact that the colour contrast is pretty poor) and then look inside the drop down.
The second option of using linked flags creates problems for speakers of the same language from different countries. Do you click on the Spanish flag if you’re from South America, the French flag if you are from Quebec in Canada? This is where localisation comes into play. You need to be sensitive to people’s origins and not bundle groups of people together who consider themselves very different. It’s not unusual to get a US and UK version of the same site after all.
One thing that did initially catch me out however was the lack of prominence of the language links and presenting them as images of text. The Olympics website is the ultimate in terms of a global website and I expected there to be a clear, obvious place where I could browse language options. Using images for text is never really advisable as they can not be scaled up and enlarged for those of us who need larger font sizes, nor can the colour be changed, if the contrast or colour combination is difficult to read..
Images and animations
How accepting of a website people are, often comes down to how it looks visually, it’s use of images and animations. People from different cultures can have a very different perception of what good design is, and what they gravitate towards. In China for example people appreciate animated images more than people in Europe. Generally the Chinese are also less concerned with lengthy pages to scroll down and compact information whereas in the West we fear the fold and don’t want key links and text to be lost in the crowd.
When looking at the Beijing 2008 home page alone you are immediately presented with an animated image that takes up almost all of the top third of the screen and rotates constantly. There is also scrolling images further down as well as an animated image and the page requires you to do quite a bit of scrolling. If part of localisation is about designing to specific region or culture then in my opinion Beijing 2008 doesn’t quite hit the mark. After three years working on the web in Shanghai China I’m pretty familiar with Chinese web design and the site definitely “feels” Chinese in origin. A Chinese look and feel is wholly appropriate as it is the Beijing Olympics but it could be done in a way that makes it also appealing to a Westerner’s eye. To illustrate what I mean look at the differences between the Yahoo! China website and the Yahoo! UK website. These sites both have the look and feel of Yahoo! but there are fundamental differences between both. The Chinese version contains more images and animated images, involves more scrolling and contains more information than the UK one.
The URL
When working on international sites with different language versions clear URL’s are important so that users can figure out where they are. The URL, http://en.beijing2008.cn/
Recently ICAAN announced that it was testing the possibility of internationalised domains in eleven non-Romanized languages (i.e. translating .com) . It’s not clear at the time of writing as to when these would become established on the web, but it’s an interesting consideration for the Beijing 2008 site as well as the London 2012 site for that matter.
Conclusions
These really are just top level thoughts and there is much more that could be covered by someone far more qualified than I when commenting on the internationalisation and localisation of the site. That aside I think what is clear from looking at the Beijing Olympic site from the perspective of a user with disabilities, a mobile phone user or someone from a different linguistic or cultural background is that the site still has a long way to go before it can cater to the highest number of diverse audiences.
It makes me wonder if there are a standard set of practices that an Olympic website must follow which includes the Web Content Accessibility Guidelines, Internationalisation Best Practices and Mobile Web Best Practices that is handed down from the Olympic committee when each Olympic site is started. This would help build up a body of design knowledge for each new site therefore cutting down the work needed to be done in each new build.
London will be the host of the next Olympics in 2012 and there are clearly lessons to be learnt not least incorporating accessibility, internationalisation and mobile web best practices from the outset rather that slotting them in at vast cost after the site has been built. We’ve already seen the Sydney Olympic site fail in the courts due to accessibility, perhaps London 2012 can turn that around and be an exemplar of an accessible, internationalised site that renders well for mobile users.
Further reading and references
- W3C Internationalisation: all you need to know about building internationalised websites.
- Molly E. Holzschlag’s Putting the World into World Wide Web
- Find out more about declaring languages from the W3C
- W3C I18N Techniques: XHTML & HTML Authoring
- Planet Internationalisation: an aggregator for posts on internationalisation
- Mobile Web Best Practices: from the W3C
- Web content accessibility and mobile web accessibility: cross overs between WCAG and MWBP
Got a resource? Leave a comment and let me know.
Post a comment