{"id":6824,"date":"2010-07-14T06:25:36","date_gmt":"2010-07-14T13:25:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=6824"},"modified":"2017-04-13T18:16:29","modified_gmt":"2017-04-14T01:16:29","slug":"cross-culture-design","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/cross-culture-design\/","title":{"rendered":"Tips for Web Design that Crosses Cultures"},"content":{"rendered":"
The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible \u2018world-wide\u2019. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process.<\/p>\n
<\/p>\n
This is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people.<\/p>\n
There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translation widget such as Google Translate<\/a> or Babelfish<\/a> to your site, allowing visitors to translate text to the language of their choice. Remember that any text embedded in Flash files won\u2019t be translated \u2013 which is (yet another) a good argument against using too much Flash.<\/p>\n If you’re confident in using inline functions, you can build inline translation code into the site using Ajax, in connection with geolocation, to facilitate a smooth immersive translation process that directs the visitor to the correct language version, as determined by where their ISP is hosted. <\/p>\n If you do use machine translation, try to make your original content as simple and direct as possible and avoid specific cultural references, as these will invariably not translate well.<\/p>\n If budget allows, having your copy professionally translated is the optimum choice. Using a native speaker from the target market will ensure that meaning and nuances will carry over to your translated site and any linguistic or cultural mistakes can be avoided.<\/p>\n Not all languages read from left to right like English. Scripts such as Arabic and Hebrew read from right to left. While CSS makes it easy to flip a vertical navigation bar (which would normally be located on the left-hand side for a left-to-right language) and script direction from one side to the other, using a horizontal bar located across the top of the page will add a sense of continuity and cohesive design to localized versions of your site.<\/p>\n Unicode UTF-8 is the ideal character encoding tool. Compatible with over 90 different written languages or scripts, it’s also supported by all the major browsers. Even if you see no need for a localized site in Arabic or Simplified Chinese right now, using UTF-8 will give you the flexibility to create one in the future and it also incorporates all the additional characters from extended Latin alphabets (such as the German \u00c4, \u00d6, \u00dc and \u00df).<\/p>\n Bear in mind that some scripts and languages will take up more space than others to convey the same information and this may affect your page design.<\/p>\n The use of colours can enhance a site’s visual appeal and help convey a theme or emotion, but some colours have different connotations in different cultures. White, for example, can signify marriage in the west but is associated with death and mourning in much of the east.<\/p>\n Some cultures (such as Japan and China) can be defined as ‘high context’ cultures. These cultures have a tendency to draw information from context and situation. ‘Low context’ cultures (including Germany, Scandinavia and North America) tend to look for explicitly worded and expressed information. In terms of website design, this means that sites with a more visual and immersive feel may be better received in high context cultures and sites with concise, clear layouts and text will appeal more to low context cultures. As an example, take a look at Nokia’s clearly structured and information-heavy German site<\/a>, with prices and products listed on the front page, and compare it to the more visually oriented Chinese version<\/a>.<\/p>\n <\/p>\n <\/p>\n There’s little point having a beautifully designed series of websites which are accessible to a range of different cultures if nobody can find them. SEO keywords can vary tremendously from location to location so don’t just translate your keywords directly. A little research may reveal that colloquialisms, alternative terms or even misspellings are more commonly used in your new target market. Research keywords not only on the local versions of search giants like Google but also on any major local competitors such as Baidu<\/a> (the leading search engine in China).<\/p>\n Christian Arno is the founder and Managing Director of global translations company Lingo24<\/a>. Launched in 2001, Lingo24 employs some 4,000 professional freelance translators covering a hundred different language combinations. Follow Christian on Twitter: @Lingo24<\/a>.\n<\/div>\n Christian has written for a number of other blogs on this same subject, so if are very interested in this, check out his other articles:<\/p>\n The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website […]<\/p>\n","protected":false},"author":248443,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":251869,"url":"https:\/\/css-tricks.com\/html-apis-design-good-one\/","url_meta":{"origin":6824,"position":0},"title":"HTML APIs: What They Are And How To Design A Good One","date":"February 25, 2017","format":false,"excerpt":"Lea Verou writes about the design of HTML APIs and how we might write better documentation for web designers. An HTML API is term for a JavaScript library that is configured and controlled through HTML rather than through JavaScript. For example might tell a library that this element is in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":263100,"url":"https:\/\/css-tricks.com\/localisation-translation-web\/","url_meta":{"origin":6824,"position":1},"title":"Localisation and Translation on the Web","date":"November 29, 2017","format":false,"excerpt":"The other day Chris wrote about how the CodePen team added lang='en' to the html element in all pens for accessibility reasons and I thought it was pretty interesting but I suddenly wanted to learn more about that attribute because I\u2019ve never designed a website in any other language besides\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":238706,"url":"https:\/\/css-tricks.com\/regulating-english-retext-mapbox-standard\/","url_meta":{"origin":6824,"position":2},"title":"Obviously Just Use This Crazy Sexy Simple and Easy Content Tester","date":"March 5, 2016","format":false,"excerpt":"Actually, don't use most of those words. Mapbox has open-sourced the content testing tool they use to automatically review all of their documentation, retext-mapbox-standard. Think of it as a pedantic robot that makes sure we write simple English, use consistent terminology, and avoid insensitive language. This \"auto-nitpicker\" uses rules for\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332,"url":"https:\/\/css-tricks.com\/links-of-interest-9\/","url_meta":{"origin":6824,"position":3},"title":"Links of Interest","date":"November 25, 2007","format":false,"excerpt":"If you've ever had to deal much with your `.htaccess` files, you know it's like learning a whole new cryptic language onto itself. It's high time someone made it easy. This online generator takes you through the options in plain English (or any of of 10 languages). Then it's just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":244083,"url":"https:\/\/css-tricks.com\/css-writing-mode\/","url_meta":{"origin":6824,"position":4},"title":"CSS Writing Mode","date":"August 1, 2016","format":false,"excerpt":"Ahmad Shadeed with a bonafide CSS trick: I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6540,"url":"https:\/\/css-tricks.com\/photography-and-css\/","url_meta":{"origin":6824,"position":5},"title":"Photography and CSS","date":"June 16, 2010","format":false,"excerpt":"It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by \"photographer\", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cameracss.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6824"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248443"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6824"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6824\/revisions"}],"predecessor-version":[{"id":6838,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6824\/revisions\/6838"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=6824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Use horizontal navigation bars<\/h3>\n
Use Unicode UTF-8<\/h3>\n
Use appropriate colours<\/h3>\n
Tailor your design to the market<\/h3>\n
Nokia’s Chinese site<\/h4>\n
Nokia’s German site<\/h4>\n
Localize your SEO<\/h3>\n
About the author<\/h3>\n
Note from the editor<\/h3>\n
\n