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 »
WPMU 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.