{"id":63,"date":"2010-07-30T14:35:47","date_gmt":"2010-07-30T14:35:47","guid":{"rendered":"http:\/\/sburke.eu\/blog\/?p=63"},"modified":"2022-07-25T23:27:41","modified_gmt":"2022-07-25T22:27:41","slug":"web-design-and-google-translator","status":"publish","type":"post","link":"http:\/\/sburke.eu\/blog\/2010\/07\/web-design-and-google-translator\/","title":{"rendered":"Web Design and Google Translator"},"content":{"rendered":"<p><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2010\/07\/translate_logo.gif\"><img loading=\"lazy\" class=\"alignright size-full wp-image-65\" title=\"translate_logo\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2010\/07\/translate_logo.gif\" alt=\"\" width=\"211\" height=\"40\" \/><\/a>People visiting your website may come from many different nationalities and may not\u00a0speak English. The majority of these people use &#8220;Google Translate&#8221; to convert websites into their native language. I seen this with\u00a0the kartbuilding.net website where I was surprised at how many people used Google Translator to view the website.<\/p>\n<p>As a result, websites should be designed and tested with Google Translator.<\/p>\n<p>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\u00a0for certain things. It\u00a0should be\u00a0possible however to make your website fully\u00a0compatible with Google Translator so it will show up correctly. I found the following issues to be observed:<\/p>\n<ul>\n<li>Avoid redefining the &lt;style&gt; tag in your css.<br \/>\nFor example, I had:<br \/>\n<span style=\"color: #999999;\"><em>&lt;div class=&#8221;roundedcorner&#8221;&gt;&lt;style&gt;Content here&lt;\/style&gt;&lt;\/div&gt;<\/em><br \/>\n<\/span>I redefined the style tag itself\u00a0in css, trying to be neat and quick,\u00a0to have a background image and height of 5px. Thus it broke with Google Translator.<br \/>\nI had to modify it to the following below and remove the css from the style tag.\u00a0<br \/>\n<em><span style=\"color: #999999;\">&lt;div class=&#8221;roundedcorner&#8221;&gt;&lt;style class=&#8221;roundedbottom&#8221;&gt;Content here&lt;\/style&gt;&lt;\/div&gt;<\/span><\/em><\/li>\n<li>Don&#8217;t place strange characters inside a href tags.<br \/>\nFor example, I had:\u00a0<em><span style=\"color: #999999;\">&lt;a href=&#8221;#&#8221;&gt;Test ?&lt;\/a&gt;<\/span><\/em>. The ? mark broke things and messed up the display.<\/li>\n<li>Note: Google strips some single and double quotes (&#8221; and &#8216;).<br \/>\nAs a result after the translation, html will show up as <em><span style=\"color: #999999;\">&lt;div class=roundedcorner&gt;Text..&lt;\/div&gt;<\/span><\/em>. This shouldn&#8217;t break things however.<\/li>\n<li>When testing with Google Translator, you may find that it caches\u00a0files. You can force Google to show the most recent design by adding &#8220;?test=123&#8221; to the end of the URL.<br \/>\nFor example: http:\/\/yourwebsite\/page.html?test=213 (and to change the number at the end each time).<\/li>\n<\/ul>\n<p>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&#8217;t work.<\/p>\n<p><a href=\"http:\/\/translate.google.com\" target=\"_blank\" rel=\"noopener\">http:\/\/translate.google.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>People visiting your website may come from many different nationalities and may not\u00a0speak English. The majority of these people use &#8220;Google Translate&#8221; to convert websites into their native language. I seen this with\u00a0the kartbuilding.net website where I was surprised at &hellip; <a href=\"http:\/\/sburke.eu\/blog\/2010\/07\/web-design-and-google-translator\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,12,15],"tags":[18,26,27],"_links":{"self":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/63"}],"collection":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":15,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/63\/revisions"}],"predecessor-version":[{"id":701,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/63\/revisions\/701"}],"wp:attachment":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/tags?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}