Building websites that are easy to translate

March 3rd, 2009 admin

Websites contain text and styling. As it turns out, the site’s styling determines how easy it will be to translate it.

When you build your site, it’s important to keep in mind that one day, you may need to translate it. This means that the same pages will have to display nicely when the text changes. I’d like to talk about a few problems that we see repeating. Understanding those problems amounts to 90% of the solution. The rest is common sense.

Images and Flash as text

I’ve already covered this issue before and I’m far from being the only one talking about it. While the W3 guidelines suggest supplying alternative texts for images, you can usually skip the images altogether and achieve the same visual design using just text and CSS. It may take a bit more effort, but the rewards are great.

When translating images, translators can only supply the text that needs to appear. Then, a graphic artist needs to rebuild all images to include the translation. It’s pretty obvious that this kind of work is much more time consuming (and prone to errors) than just translating text.

Fixed size elements

All too often, graphics designers like to set exact size for elements on the screen. It starts with fixed sizes for fonts and continues with exact width and height for boxes (DIVs, table cells, etc.). With some luck such a website would look the same on different browsers (although normally they don’t). However, once translated, things tend to break up completely.

German is typically 1.5 times longer than English. So, how would it be possible to squeeze in more characters to the exact same area?

What happens with such formatting is that text spills out, boxes run over each other and nothing looks as is should. To avoid it, always go for flexible layouts. Keep objects positioned relative to each other and not in absolute locations. Never assume any relation between the size of text and images and never use cell height.

Then, test. Try your website with a different font size and see what happens. If you can increase the size by at least 50% and then reduce it by at least 50% and things still display correctly, you’re in good shape.

Sentences that are broken by HTML entities

Consider this paragraph:

“Trucks are larger than cars so they weigh more.”

It’s pretty easy to translate. Now, what happens if I put this into a table, like this one:

<table><tr><td>Trucks are larger than</td>
<td>cars so they weigh more.</td></tr></table>

What I did is take that one sentence and place it into two table rows. Maybe I did that because I tried to make the two parts of that sentence appear one below the other. Who knows?

The result is, I now have two sentence fragments to translate, each making very little sense by itself. Even worse is the translation might now fit so nicely into that structure that I arranged.

The solution is obvious. Just don’t do it. Use other means to style the page, just don’t force texts into this kind of structure.

Conclusions

Building a website that’s easy to translate is very simple. All that it takes is attention to the fact that text size may change. Running a simple experiment on your site before you have it translated can save a lot of time, money and stress.

Posted in Drupal, Website tips, WordPress | No Comments »

Using WordPress? Try WPMU for Multi-lingual Websites!

December 31st, 2008 admin

wpmu-logoWPMU lets you run several WordPress based websites with a single installation and a single administration panel. Typically, it’s used to build blog farms but it’s also a great tool for running multi-lingual sites.

What’s WordPress MU (WPMU)?

WPMU is an extension for WordPress, allowing to run multiple WordPress sites from a single install and with a single administration login. We’ve already written here about how to install WordPress for multiple language blogs. WPMU is a much more systematic approach for running multiple blogs from the same code, sharing plugins and themes.

Besides sharing the same install directory, WPMU includes essential management for administrating multiple blogs from one central admin panel.

How can WPMU help build multi-lingual websites?

This is what we’ll do:

  • Run each language as an independent blog within the WPMU install.
  • Use the ICanLocalize Translation system to synchronize between contents in different languages.

If you want to see exactly how to do this, follow this detailed guide for using WPMU to run multilingual websites.

What’s good with this approach?

The best thing about building your multi-lingual WordPress site with WPMU is that everything just falls into place.

WordPress is designed to serve contents in a single language. Some plugins aim to provide multi-lingual support by duplicating tables and adding custom fields. These things work, but require major changes throughout WordPress. As a result, they’re very sensitive to WordPress updates and often cause conflicts with other plugins or with code in themes.

When you run each language in its own blog, everything works as intended. Each blog runs a single language, without any changes to the normal tables. The collection of blogs, implemented by WPMU provides the multi-lingual experience.

WPMU can be used to create full multi-lingual websites, not just blogs!

WordPress, although started as a blogging platform can be used to create full websites. We’re using it for our developers site, and our digital photography software site. WPMU makes it possible to do the same and create great multi-lingual sites.

A recent entry in our developers site shows how to use WordPress as CMS, by setting a static home page and assigning the blog page to a different page. The same thing can be applied to WPMU, when each blog instance is serving a different language.

Posted in Website tips, WordPress | 2 Comments »