People visiting your website may come from many different nationalities and may not speak English. The majority of these people use “Google Translate” to convert websites into their native language. I seen this with the kartbuilding.net website where I was surprised at how many people used Google Translator to view the website.
As a result, websites should be designed and tested with Google Translator.
Unfortunately Google does mess with the underlying html code, adding in extra tags and css. As a result your website may not render correctly, be readable or even work at all if you have used javascript for certain things. It should be possible however to make your website fully compatible with Google Translator so it will show up correctly. I found the following issues to be observed:
- Avoid redefining the <style> tag in your css.
For example, I had:
<div class=”roundedcorner”><style>Content here</style></div>
I redefined the style tag itself in css, trying to be neat and quick, to have a background image and height of 5px. Thus it broke with Google Translator.
I had to modify it to the following below and remove the css from the style tag.
<div class=”roundedcorner”><style class=”roundedbottom”>Content here</style></div> - Don’t place strange characters inside a href tags.
For example, I had: <a href=”#”>Test ?</a>. The ? mark broke things and messed up the display. - Note: Google strips some single and double quotes (” and ‘).
As a result after the translation, html will show up as <div class=roundedcorner>Text..</div>. This shouldn’t break things however. - When testing with Google Translator, you may find that it caches files. You can force Google to show the most recent design by adding “?test=123” to the end of the URL.
For example: http://yourwebsite/page.html?test=213 (and to change the number at the end each time).
Hopefully watching out for the above points will have your websites render correctly with Google Translate. Javascript should work ok also. If you do have issues, I suggest viewing the html source of the Google Translated page, and break it down. A final note: if you have a login required to access your website, then Google Translate won’t work.