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/ , is not that
intuitive for a user as it is neither easy to remember, tidy and
logical. Obviously URL’s are designed to be machine readable and
read by browsers however don’t underestimate the importance of
unambiguous human readable URLs. When I look at this URL I see the
“en” at the front which indicates to me that the site is in English
but the fact that it ends in “cn” makes me wonder if it may be in
Chinese. I’d prefer to see something like
www.beijing2008.com/chinese or www.beijing2008.com/cn for the
Chinese site followed by clear sub-domains. Del.icio.us and Flickr
have unambiguous clear URLs. Looking at my page on del.icio.us
you’ll see that it is constructed by the site domain followed by my
online name http://del.icio.us/iheni. If searching for links on
del.icio.us that I’ve posted about internationalisation then the
logical construct is going to be
http://del.icio.us/iheni/internationalization. A URL that is easy
to work out, reinforces the name and brand as well as does wonders
when making a site more memorable and usable when presenting
content in multiple languages.
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
Got a resource? Leave a comment and let me know.