8 Tips to rule Web Design for a global Website

In today’s increasingly interconnected world reaching a global audience is easier than ever before. Companies take their websites global to reach new potential customers all around the world and compete in new markets. It’s no secret: Translation and localization open doors to enter these markets. Using the terms localization and simple text translation interchangeably is still a common mistake. Adapting your website for a new language and target audience is no small feat. This blog post goes beyond text translations and focuses on aspects related to web design for global websites.

There’s more than English

While it's still considered to be sufficient to provide content in English, data published recently shows that English is no longer the lingua franca of the web. Considering that almost 70% of all internet user do not speak English or German, adapting your website to local audiences becomes even more important. When talking about the world’s most common languages English (335 million speakers) has been far surpassed by Mandarin (1 billion speakers) as well as by Spanish (400 million speakers).

Good news is that by serving 25 languages your website reaches incredible 90% of all internet users in their native language. However, by 2020 this number will rise up to 48 languages necessary to cover the same amount of people. Thus, to translate or not to translate shouldn’t even be a question.

After pointing out the necessity of translation in terms of company growth it’s time to focus on the design related aspects of localization. Here are 8 tips for creating a web design to rule your global website.

#1 Consider more verbose languages and translations in your web design

Thinking English-only during the design stage can cause some additional work when publishing translations. When it comes to text length and word count English is part of the less verbose languages. A common rule is to plan up to 30% or 40% for text expansion when translating from English to German. Of course, this is one of the more extreme examples but still a pretty common language pair. Going from English to French or Spanish is expected to cause an expansion of approximately 10% to 20%. A rule of thumb estimate for web design is to consider 35% expansion when translating from English to other languages.

Designing for more verbose content is not the trickiest part. Don’t forget about the navigation of your website. Although the space is limited and character length strict allow 40% text expansion going from English to other languages.

The same applies for mobile friendly websites. SEO geeks know about the importance of mobile friendliness nowadays. Nonetheless, the layout needs to be adapted to the small screen and more verbose texts shall be kept in mind from the very beginning. Every language needs to be considered when designing your website’s mobile layout.

#2 Focus on a flexible layout and design for movement

A global strategy for your website includes translation to various languages. While the above mentioned languages are all written LTR (left-to-right), RTL (right-to-left) written ones need to be kept in mind as well. They flip layouts upside down. The Arabic script is currently the most commonly used RTL writing system.

Twitter’s login page is an excellent example for layout adoption according to the used script. The design is kept simple, hence flipping the layout led to slight changes. Notice that using building blocks makes switching your layout from LTR to RTL support easier.

If your company has local offices in multiple countries ask them to contribute to your global web design. They may be willing to review the layout for RTL languages. As just a little of us will be able to speak Arabic fluently, there’s another way to get reviews for your layout and design. Feedback tools encourage users to contribute to your projects. Ask local customers to take a view on your web design improvements. At best, they’ll report immediately if there are unusual line breaks or other layout inconsistencies.

#3 Design for different fonts

Supporting different languages comes along with the necessity of supporting different fonts and considering them in your web design. Font size and font weight may vary across multiple languages, still an immaculate design shall be displayed. Consider different fonts in your web design and check during the design stage if any adaptations to your layout are necessary. This is especially important for Asian scripts as the font size differs from other scripts.

#4 Do culture research carefully

The homework for culture research is not done after reading two or three articles on the topic. That's definitely not enough, as common sayings, color meanings and more differ in countries.

When thinking of colors, blue generally isn’t a risky decision as it has lots of different positive meanings. In North America and Europe the color is associated with trust, security and authority, while it represents immortality in Eastern countries and good health in Ukraine. Yellow however is associated with envy in Germany but with positive feelings like happiness and fortune in Egypt. White symbolizes purity, peace and cleanness in Western cultures but represents death and bad luck in some Asian countries to name just a few. Besides the different color meanings always consider political connotations when selecting colors. Respecting this orange for example shall be avoided Ireland. These are just a few examples of different color meanings. For more information about the spectrum of symbolism and color meanings around the world I recommend to have a look at the corresponding article in Shutterstock’s design tips.

#5 A picture is worth a thousand words

An essential goal of a good web design is to communicate a brand and its values through it. A remarkable and memorable design is a key ingredient of a successful brand. Images help to communicate values and feelings. When localizing your website for different countries stay consistent with you brand but bear in mind that pictures might have different meanings in various cultures. Small adaptions and slight changes can enhance your design for local audiences. Let me point out two examples: Pictures showing the A-OK gesture shouldn’t be used in Brazil as it has an extremely bad meaning. While the thumbs-up gesture has a positive intent in one culture, it refers to “Up yours!” in another one.

#6 It is the little things that produce the big results in web design

Thinking globally in your web design process comes along with thinking of different number formats, prices, currencies and more. They may seem to be the little things in localization. However, it is stated that localized currency symbols and prices influence purchase decisions. Common Sense Advisory conducted research on the topic (“Can’t Read, Won’t Buy”) and found that over 67% of the participants visit English-language sites frequently, but just 25% purchase goods or services regularly. Although content might be localized the inability to use their preferred payment methods or currency of their country prohibits users from purchasing.

At Lingohub, we are now supporting three types of currencies (US Dollars, British Pounds and Euros). That way we already cover the local currency of more than 700 million internet users worldwide.

So what needs to be considered, once the decision to localize currency symbols and prices is made?

• Note that there is a difference in using “.” or “,” within numbers. Punctuation within numbers varies in countries. While 1,000 represents one thousand in the U.S. for example, Europeans might be confused and interpret it as one with three zeroes as decimals. Europeans are used to a different format, hence 1.000 represents one thousand.
• Localizing currencies isn’t done by exchanging the symbol. Do your research carefully and consider that some currency symbols are listed before (like £ and $), and some after the price (like €).
• This might be self explanatory but don’t exchange the currency symbols while keeping prices the same. Currencies have different conversion rates and prices need to be adapted accordingly.

If you’re interested in more information on payment methods analyzed by different regions check out our infographic about preferred online payment methods.

#7 Localized UI/UX is the key to global success

Your website needs to work and have an appealing web design in every language. The user experience should be identical and immaculate across all languages. All the above mentioned hints contribute to an outstanding user experience in all supported languages. But there’s another tip to make your website outstanding, that I don’t want to hold back from you.

#8 Swim against the current

When rethinking and redesigning Lingohub’s website earlier this year I read Benjamin Brandall’s article on analyzing 250 SaaS pricing pages. He identified that 81% organize prices low to high. Human beings are creatures of habit, so why not breaking up with these habits?

Turning prices upside down will throw us off balance, but there’s nothing bad about it. Unusual things are just grabbing our attention. That’s why we restructured our pricing page and ordered plans high to low. Just be brave and try out new things. Breaking users’ habits catches their attention.

Wrapping it up

As often in life the first impression counts. You don’t get a second chance to make a first impression to your target audience. Remember that localizing your website is more than simple text translation. You’ll be rewarded for all the additional work in your design by your locale users. A localized web design enables to explore the world through everyone’s eyes! Your users will appreciate it.