SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Tips For Making Your Website Multilingual Friendly

August 30, 2010 by GrindSmart Media 14 Comments

Many people overlook making their websites multilingual friendly thinking that the majority of their traffic or visitors understand the English language. One thing to note is that nearly two billion people worldwide now have access to the internet, which is almost one third of the world’s population.

Therefore, the expansion of your website worldwide depends greatly upon multilingual support.

Implementing multilingual support may sound as easy as just translating your pages, however in most cases, it is not. Most designers always design according to left to right languages. Therefore, right to left languages may not appear properly within the design. We discuss tips to that help make your website and design multilingual friendly.

Use Unicode

Use Unicode

By using Unicode you are making your website multilingual ready for the future as it supports over a hundred thousand characters of different types. It is also supported by most, if not, all web browsers and platforms. Therefore, switching to Unicode will only benefit you in the long run.

Flexible Design

Flexible Design

When designing for multilingual support, your design needs to be built around the languages in the sense that it should be easily compatible with left to right and right to left languages. The content being translated to different languages usually is not the problem; however, the navigations, sidebars, and the likes are usually the tidbits designers may stumble upon with multilingual support problems.

One key to keeping your navigation flexible for multilingual support is to make it rather simple and very flexible in the sense that if the language is right to left each navigation bit will cope to it and expand properly with a good size and readable font. As indeed, the font size is a major key aspect for many languages especially languages such as Hebrew or Arabic.

Cut Back on Images Containing Text

Images Containing Text

I have seen many multilingual supported websites with a whole set of images or illustrations containing text. When you flip between languages those images still remain in English, this is a sign of poor multilingual support and poor design and coordination skills.

The reason I say this is multilingual support is all about having every single letter and word within that website to be translated to the selected language, and not translated in bits and pieces. Therefore, I emphasize a lot on reducing the use of images containing text as it sometimes becomes redundant and a difficult task to get your illustrations or images with text translated while keeping the same meaning and look and feel to it.

Colors

Colors

Colors may seem harmless, adding flavor to any design you put together. However, when adding multilingual support, you need to assure the colors you pick for your website also reflect what you do without having a negative affect within certain cultures. For example, the color green has different meanings across different countries and cultures. For us, the color green might signify nature and the utilization of natural resources while for many middle-eastern countries it may signify religion.

With that all said, when choosing a color scheme for your website, assure it is broad and generally fits the topic of what you do without delivering any negative message across multiple cultures you may support.

Translating

Translating

Before translating your website into multiple languages, performing some research on each of the languages may help you succeed in reaching the targeted audience. Sometimes (in fact, most of the times) translating word for word may not be the best option for a proper flow in sentences and content. Does your targeted audience enjoy a casual flow, a proper language flow, or something in between? Getting answers for these questions help you translate your website better in the sense that the targeted audience will enjoy reading and browsing your site longer.

Let’s look at the English language as a good example of language flow that we tend to stick to when reading articles and the likes from the internet. When reading a casual article we tend to love the tone and vocabulary that we use in our daily life, and if we see anything different, we tend to skim through the article because the topic may have interested us but the use of the language was not favorable. For example, if this article were written using a sophisticated tone and vocabulary, many would not understand the article fully and would therefore not care to continue reading it.

With that all said, putting some time into research before translating your website is a matter of success or fail for that targeted audience. A good method to adapt to when implementing new languages is to have someone who primarily speaks that language to browse about your website reading the content to provide feedback on the flow and tone. This greatly helps to improve your website’s multilingual support.

Easy Switch Back System

Switch Back System

One of the biggest mistakes made with multilingual support is finding the language select menu.

Some websites hide the language select menu within the account settings or several layers within the website. The problem with this is if a user accidentally changes the language to something they do not understand, it becomes very difficult for them to navigate their way through the website to get to the language select menu. Therefore, instead of hiding the language select menu, it is in your best interest to make it available across the entire website being in the header, footer, or in similar places throughout the website.

This enables your viewers or users to be able to easily flip back to the language they favor without the hassle of guessing where it may be located. Adding flags to the language select menu also help in addition with the text, as the words for languages change between languages, it may not be understandable or clear for that trying to switch back and forth.

Therefore, also adding a graphical image of the flag helps your viewers or users select the exact language they were looking for.

The End of Our Journey

To conclude, providing multilingual support is not a walk in the park! However, it’s definitely worth your time and efforts.

Language and communication are two critical keys to the way our lives are conducted and work in coordination together, and indeed the reason why we are surrounded by neighbors and great icons worldwide. The same applies with websites and the internet, without multilingual support, we really would not have many iconic online services and websites that every internet user may favor over others.

Filed Under: Accessibility, Article, Design, Usability, UX

Comments

  1. designbyarm says

    August 30, 2010 at 7:11 pm

    Since I use unicode on Thai language that story that I wrote cannot read just error language and I think UTF-8 better than unicode

    cheers

    Thank you for share this articles

  2. frequency says

    August 31, 2010 at 4:56 am

    Adding a country flag may not work for certain languages e.g. Arabic, Persian.

    Also, a point you missed – make sure the graphic designer understands that buttons etc may/will take up a lot more screen real estate when displayed in other languages.

  3. Andrew Cooper says

    August 31, 2010 at 11:52 am

    Interesting read and some very helpful tips indeed, particularly regarding flexible design, images containing text, and colours. It would have been even more helpful with some more examples to elaborate on these points though :)

    It would have been nice to see some links to other Websites which go into more detail on multilingual and international Websites too. Really good short and snappy read though!

    What Website folder structure would you recommend for a multilingual Website?

  4. designbyarm says

    September 1, 2010 at 12:03 am

    http://www.eastxwestconsulting.com multilple languages Check this!!

  5. div says

    September 1, 2010 at 12:30 am

    I have worked on multi – lingual websites earlier. But the points mentioned in this post are very very useful. Thanks for the Post.

  6. Irina says

    September 1, 2010 at 3:17 am

    Great article! Thanks for the tips!

  7. Phil says

    September 3, 2010 at 6:20 am

    It’s certainly a very important aspect for multilingual support to cut back on images with text on.

    I once had a client who provided the export of medical equipment worldwide, they were getting quite a bit of traffic from the middle east but time spent on the site was well below average and the client was wondering why. The site focused on imagery but the developer had been quite lazy and placed a lot of the text on the site within the images, even with buttons and instructions throughout the path to purchase. After replacing the text on the images with HTML text it really made a difference to the amount of orders coming from the middle east.

  8. Harris says

    September 12, 2010 at 8:49 am

    thanks for the tips..wonderful

  9. coder says

    September 12, 2010 at 9:48 am

    Thanks for the great tips!

    Any recommendation on which of the following is the better approach when building Multilingual webpgaes:
    1- For every wep page create different files for each language, or
    2- Dynamically load contect based on language selection but using a single web page file.

    How do you go about iplementing #2?

    Thanks.

  10. Brett Widmann says

    September 19, 2010 at 8:34 pm

    Great article, but the points that Frequency made are very valid. Some languages cannot be represented by a flag alone, nor do the flags not take up a considerable amount of real estate.

    I’ve noticed many sites that use dropdown menus instead, which save on real estate, and the language can be represented in not only the viewer’s native language, but also the language being selected. For example: I read English, but want my page to be translated to Hebrew. I can select the option ‘Hebrew’, and see Hebrew text next to the English text as a sort of preview.

  11. Russell says

    May 16, 2011 at 11:53 pm

    Good article.

    For more info on global gateways, John Yunker @ Byte Level is THE MAN. Here is the link to his latest research.

    http://www.bytelevel.com/reports/gateway/amazing.html

    Folder structure, nice question. First time I have ever seen it asked. Database structure? How about graphic management for several dozen multilingual sites?

    Can get pretty complex pretty fast.

    Normally, I wouldn’t just blatantly put this out there like this but several comments in this post specifically ask where you can learn more. Our site globalsitesecrets.com was specifically created to teach web pro’s how to translate websites.

    Mention this post and I will personally help you with specific challenges or answer questions on how to add localization to your services offered.

    Thx. Russell

  12. graham says

    July 20, 2011 at 3:48 pm

    Hi after reading your article i did not realise how colour would react when viewing your website you give a lot of good advise ive noticed a lot of text and popups on many websites which make them look untidy not the sort you would like to stay on after reading your article it gave me food for thought and i am going to re build my site
    regards graham

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022