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 use their websites to attract new potential customers worldwide and compete in new markets. It's no secret: translation and localization open doors to enter new regions. Using the terms localization and simple text translation interchangeably is still a common mistake. Adapting your website to 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 sufficient to provide content in English, recent data shows that English is no longer the lingua franca of the web. Since almost 70% of internet users 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). The good news is that by serving 25 languages, your website reaches an incredible 90% of all internet users in their native language. However, by 2020 this number will rise to 48 languages necessary to cover the same number of people. Thus, to translate or not to translate shouldn't even be a question. After pointing out the necessity of translation regarding company growth, it's time to focus on the design-related aspects of localization. Here are eight tips for creating a web design to rule your global website.

#1 Language length and mobile-first approach

The English-only approach during the design stage will cause additional work when you use translated texts. English is shorter (by word length) compared with German, Spanish or Ukrainian. Thus you need to plan up to 30% or 40% of additional space for English-German translation (one of the most common language pairs). 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 a 35% expansion when translating from English to other languages. Designing for more verbose content is not the trickiest part. Remember the navigation of your website. Although the space is limited and character length strict, allow 40% text expansion from English to other languages. Remember the mobile-first approach as one of the best practices during this process - the growth of appropriate traffic type conditions and the importance of mobile-friendly design. In the 4th quarter of 2022, the global share of mobile traffic achieved almost 60%, continuously growing. Adapting your layouts for smaller screens with more lengthy texts can be a real challenge, so starting from it would be better.

#2 Focus on a flexible layout and design for movement

A global strategy for your website includes translation into various languages. While the languages mentioned above are all written LTR (left-to-right), RTL (right-to-left) written ones must also be considered. They flip layouts upside down. The Arabic script is currently the most commonly used RTL writing system. According to the script direction, Twitter's page is an excellent example of layout adoption. The design is kept simple; hence flipping the layout led to slight changes. 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. Ask local customers to take a view of 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 with the necessity of keeping 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 point is crucial for Asian scripts as the font size differs from others.

#4 Do culture research carefully

Culture research is not ready after reading two or three articles. That needs to be more than understanding the symbols, color meanings, etc. The best thing is to create a thoughtful strategy with the local experts' support. You need to understand facts and deeper peculiarities - the national identity, formal and informal language, religion, and many more.

For starting the design, color meaning is one of the essential things that will help your team build the first color palettes and schemes. For example, blue isn't risky to use as it has many positive meanings. In North America and Europe, this 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, the orange, for example, shall be avoided in Ireland. These are just a few examples of different color meanings. We recommend looking at the corresponding article on Shutterstock for more information. Also, remember about the color usage in the different industries. For example, traditionally, in Ukraine, different clinics, laboratories, etc., combine blue/white or green/white.

#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. One of the main ingredients of this task is a remarkable and memorable design. With the images, you can share the company's values and goals. But as we named this paragraph - the picture is worth 1000 words. During product localization, the designers have two main tasks: to share the product's identity with users and to get in region expectations. Keeping the visual consistent with your brand, remember that pictures might have different meanings in various cultures. Minor adaptations and slight changes can enhance your design for local audiences. Let us point out examples: Pictures showing the A-OK gesture shouldn't be used in Brazil as it has a horrible meaning. While the thumbs-up gesture has a positive intent in one culture, it refers to "Up yours!" in another.

The same situation we have with the emojis and their meaning in different countries.

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

Thinking globally in your web design process comes along with thinking of different number formats, prices, currencies, and more. They are the little things in localization. However, it is stated that localized currency symbols and prices influence purchase decisions. Common Sense Advisory researched the topic ("Can't Read, Won't Buy") and found that 65% prefer website on their language, and 40% will not buy in other language.

At Lingohub, we now support three types of currencies (U.S. 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 are 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., 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 is done by something other than 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 want more information on payment methods analyzed by region, check out our infographic about preferred online payment methods and our article about different figures' localization.

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

Your website must work and have an appealing web design in every language. The user experience should be identical and immaculate across all languages. All the hints above contribute to an outstanding user experience in all supported languages. But there's another tip to make your website outstanding that we don't want to hold back from you. When rethinking and redesigning Lingohub's website earlier this year, our team found Benjamin Brandall's article - analyzing 250 SaaS pricing pages. He identified that 81% organize prices from low to high. Humans are creatures of habit, so why not break up with these habits?

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

#8 Use the right tool for design localization

All the advice above will work better if you have a tool supporting automatization. Agree that checking the appropriate usage of each number or decimate points, currencies, and language's fit by length can take a lot of time for managers and team members. That is why Lingohub provides comprehensive tools: Figma plugin + prefill + machine translation/translation memory. This chain can help you fit a new language to the prototype in a few minutes. Push and pull texts from Figma to Lingohub and back, fast pre-translate with a Prefill, and use MT and TM for the best experience. Read details about how it works in the article about Figma design localization.

Wrapping it up

As often in life, the first impression counts. You don't get a second chance to make a first impression on your target audience. Remember that localizing is more than simple text translation but a complex process from strategy creation to new language version release. To be closer to your users and get trust, be aware of all the minor things, and our team will help you from our side. Book a demo call to learn more about Linoghub and how it can help you and your business grow.