First Translations, Inc. - Industry Standard Translation Services

You’re hearing about it everywhere. Web 2.0. It’s on every blog, every design studio claims to do it, every company wants it. You can find how-tos and tutorials showing you step-by-step how to become a “Web 2.0 designer.” What most people don’t realize is that there are many facets to what makes up the Web, not just the look and feel of the sites and user interfaces. Real Web 2.0 sites, which are well-built, offer a new way of gathering and communication information. The most successful are actually information-based. Inevitably, distributing information can usually mean a wide audience, and that audience might not all be from the same region, country, or even part of the world.

It is not only smart to offer your content in multi-language form, but to utilize the tools available to you to create a user-friendly way of accessing multi-lingual information. Designers use a language called CSS to layout web pages these days. If you get the chance to talk with your information architect or user interface designer before kicking off the project, make sure to ask them about CSS. If they aren’t using CSS, then they are probably using table-based layouts meaning you should probably be kicking them off the project before kicking off the project itself.

CSS stands for Cascading Style Sheets and is basically a language used by browser rendering engines, such as the gecko engine at the heart of the Firefox browser, to position and style the elements of webpages on the screen. We won’t go into too much about CSS itself here, since it is outside the scope of this article, but rather touch on how it can help you to better convey and communicate your ideas and information to your audience.

The latest CSS standard which is CSS3, has not been officially released and only the latest and most standards compliant browsers use only some of its advanced features. The interesting part about how CSS3 works is the ability to target decendant selectors within tags. So, for instance if the first paragraph of a container of text is in English, you could simply target that element and apply some sort of background styling to the paragraph such as a flag or symbol that clearly illustrated to users that localization is occurring within the text. This can also be done with CSS2, by simply adding a class (classification) to the paragraph element and then targeting it. The CSS3 decendant selector version is better in some ways and in some ways not. One of the advantages is that it requires less markup and is a more loose way of being able to apply the styling. Instead of changing both the XHTML, you can just simply target elements based on their order in the normal flow of the document. Theoretically, with CSS3 you could style an entire page just as effectively as CSS2 but without any element IDs or Classes. I don’t know why you would do that, but you could.

So, back to the issue. There are plenty of uses and reasons to use smart CSS styling to enhance multi-lingual designs:

• You can apply icons to certain paragraphs of text based on the type of paragraph. You can’t tell CSS that a paragraph of text is written “in English.” But, you can however, give that paragraph a classification “English” and tell CSS to apply an icon or symbol where ever it sees that classification.
• You can style certain bodies of text or page layouts certain ways. This is important if you are serving information in a format which is variable. For example, some languages require the right to left text direction instead of the left to right. You can have your content management system handle the text and serve it up to a page with a particular body classification. The CSS will then know to switch around the columns to the other side of the page and align the to the left or right.
• Classification of information allows you to creates hooks for disabled users such as those using screen readers or braille monitors. CSS allows you to present the information in a clean, functional manner with accessibility features which can be hidden from plain sight for screen viewers. Those features, however, are available to a screen reader which turns off all styling done by CSS, unhiding the accessibility features and allowing the user to traverse the inforamtion quickly and easily, without having to listen to a text in 3 or 4 other languages before coming to the one they wish to use.

Of course, these are just some of the ways that good, smart information design can help you reach your audiences and keep those visitors coming back. Talk to your designer about how you can integrate these sorts of methods and technologies into your site. While the cost up front might have you wondering, the return on investment will amaze you.