Localization: Building Websites for a Global Audience
Tips for incorporating a global focus into all phases of web development
The web is taking even the smallest companies global at a rapid pace. Our diverse planet includes dozens of time zones, nearly 200 currencies and countries, and thousands of languages. Localization is more than just translating text into another language; users should have a seamless, customized web experience from wherever they are.
What is localization?
Localization, sometimes referred to as (L10n), and Internationalization (i18n) are two concepts, somewhat overlapping, that ultimately deliver the right content to right users at the right time. Localization is the process of adapting website content for different combinations of geographic and cultural differences, and internationalization is all of the frameworks and processes that enable that to happen. Properly localized sites will deliver the most relevant copy and imagery to visitors to improve experience and build trust with users, help search engines find content, and ultimately drive sales.
But, it’s not practical to cover every part of the globe. Getting to know your audience is the best way of narrowing your localization focus. MINDBODY serves customers and their clients from all across the globe. We analyzed traffic on mindbodyonline.com to identify where the majority of visitors are coming from and took our current and target subscriber markets into consideration. This helped us identify targeted regions — locales — by creating location + language pairs. It’s the cultural differences between these regions that become the differentiators in localization.
Sample locales:
au_en = Australia + English
ca_en = Canada + English
ca_fr = Canada + French
es_es = Spain + Spanish
fr_fr = France + French
uk_en = United Kingdom + English
us_en = United States + English
us_es = United States + Spanish
Setting the Stage for Localization
The technical considerations of localization (the internationalization pieces) impact websites at nearly every point in their lifecycle — from setup all the way to content strategy and development.
Three key aspects are used in localizing websites:
- An international-friendly URL structure
- Language targeting
- Tailored copy and images
Structuring URLs for Localization
While the top search engines provide webmaster tools to specify language by URL, it can be a tedious process for large websites. For easier page crawling, search engines like Google and Bing also look at a number of different URL attributes for cues about language and location. These give site visitors cues that they’re viewing the site most relevant to them, too.
At the domain level, start by separating language sites by geographical region, using one of these three methods:
ccTLDs (country code top-level domains)
https://example.us
https://example.frNote: For gTLDs (generic top-level domains) like .com or commonly used ccTLDs like .ly, search engines will look to other URL attributes to decipher site localization
Subdomain
https://us.example.com
https://fr.example.comSubdirectory
https://example.com/us/
https://example.com/fr/Language Parameter
Adding a language parameter to the end of a URL is a helpful alternative only if a site can’t be separated out by TLD, subdomain, or subdirectory. It’s not necessary (or pretty) to include it if the site has a regionally-targeted URL.
https://example.com?lang=en
https://example.com?lang=frTargeting Language in HTML
The language codes listed above are based on Internet Assigned Numbers Authority (IANA) language subtag directory — the same codes used to declare language in HTML. The lang attribute, which is inherited by all other elements (including anything in <head>), can vary by page.
<html lang=”en-US”>Search engines take clues from lang attributes in site maps and language meta tags in HTML that help associate content with alternate versions in other languages. Without these, your pages could be crawled and marketed as duplicate content, which would negatively affect SEO.
<link rel=”alternate” href=”https://fr.mindbodyonline.com/" hreflang=”fr-fr”/>Unless you’re working primarily with Asian languages, encode your site with UTF-8, which is the same encoding used for URLs. It has wide browser support for displaying characters in different languages.
<meta charset=”utf-8">Tailoring and Displaying Content
Context is key when localizing the web. What may be funny or practical in one language may not make sense in another. High-quality translations are needed to capture the dialect that visitors expect, so it’s still a best practice to rely on human translations over machine. Search engines will pick up on well-localized site content and send more relevant traffic there (sometimes even ignoring the lang attribute). You can also boost SEO by localizing meta tags or linking to local content.
Even page URLs should be translated to help with user comprehension.
https://example.com/price
https://example.fr/prixCopy Length and Format
Space matters, too. In English, we can talk about front end in three letters: GUI. Spell that out in German and you have “grafische Benutzeroberfläche.” That’s a difference of 25 characters taking up space on a screen. Create flexible containers (I love flexbox) or leave extra room on the page to display content in targeted languages. (The general rule is to design for an extra 50% for non-English languages.) Copy length guidelines for translators can help limit the amount of overflow or wrapping on a page.
Whether or not modifiers come before or after the word they’re describing varies by language. For any copy embedded in code, use resource strings instead of concatenating to allow for the most flexible sentence structure.
- English: blue yoga mat
- French: tapis de yoga bleu
Tip: Avoid using obsolete <br/> tags to break content up for a design. Copy may wrap in unexpected ways in some languages. Instead, set a max-width on the content’s container and utilize Unicode characters like the non-breaking space or zero-width non-joiner.
Remembering Accessibility
For better website accessibility, it’s important to remember to translate copy for these key, visually-unseen HTML elements, which will be used by screen readers:
- alt tags on images
- ARIA-label attributes
- title attributes on links and headers
- page <title>
Localizing Copy Beyond Language
We also look beyond language to display regional differences in:
- dates / calendar formats
- time / timezone
- units of measurement
- postal addresses
- phone numbers
- currency
- holidays
Forms often contain several of those items that need a localized experience. Building a date picker? Consider that the first day of the week differs between locales (the US starts the week on Sunday while the UK begins on Monday).
Since it’s hard to keep track of all of these variations, there are several libraries available that can help with form validation options by region:
- Google’s libphonenumber (Java, C++, and Javascript)
- Moment and Moment Timezone (Javascript)
Refining Imagery and Layout
Images, symbols, and even colors are associated with different ideas, feelings, beliefs, and values by region.
A photo of a product surrounded by the palm trees and sunshine outside of our San Luis Obispo, California headquarters doesn’t always resonate as well with visitors from other climates. We’ll swap that image out by locale or opt to use a single, more globally-minded one. Designers should also consider how local culture is represented through color, architecture, clothing, ethnicity, and customs in images and video.
To help with translation, accessibility, SEO (and even the designer’s workload), avoid putting text in images except for screenshots. To keep content areas flexible for different length of copy, we use solid CSS background colors behind HTML copy where we can and reserve background images for the areas surrounding the copy.
When you flip through your phone’s keyboard, you probably see emojis that have less meaning to you than others. Emoji were originally created for mobile device users in Japan and have been expanding out across the world; hundreds of emoji are now part of Unicode. Symbols like emoji may need to be customized by locale. While [checkmark emoji] means OK to parts of the world, many regions of Asia use [O emoji]. A “Q” symbol may work for “Frequently Asked Questions” in English, but not “Domande frequenti” in Italian. There is even a whole site dedicated to best practices for displaying language options on a website. (Hint: it’s not using flag symbols!)
Tip: Check which mobile carrier you’re displaying in-app screenshots for each locale (or keep it simple and leave it out).
Displaying Localized Content
At MINDBODY, our marketing sites are split by language by subdomain. From there, we rely on IP address targeting to properly display localized content.
The nitty-gritty of getting copy and images swapped per locale depends on the site. Starting at the top, the Accept-Language HTTP request was originally intended for users to specify their preferred language. It’s not a good idea to rely on this alone to determine a visitor’s locale, but it can serve as a starting point for displaying content. Allow visitors to change the view. Many users never set their preferred language in their browser, or they could be accessing the site from a device that was borrowed from a friend or rented from a library or cafe.
Popular content management systems from Microsoft, Drupal, and WordPress have platform-specific tools to help make localization easier. Commonly, the setup includes either a resource file of translatable strings and CSS classes for overriding visuals for specific locales or a friendlier visual interface for creating entirely new, localized versions of a page.
The most targeted method to display localized content to unauthenticated visitors is to detect their IP address and swap images and copy accordingly. Using a Geolocation API like the Google Maps Geolocation API or GeoIP will help ensure you have the latest mappings. Some sites opt instead to prompt users to select a language when they arrive, or rely on their browser settings. Whichever you choose, users should also have an easy way to change the display to meet their needs. This helps non-native speakers (including travelers) and instances when there are any issues with IP address detection.
Swapping background images using classes:
.header-image { // Base version
background-image: url(‘/images/pages/home/hero.jpg’);
}.header-image.uk { // UK variant
background-image: url(‘/images/pages/home/hero-uk.jpg’);
}
Even choosing the right font is key to localization. Font files include a unique set of characters that may not cover every language you’re targeting. The CSS :lang pseudo-selector is helpful for swapping fonts out; it looks at the lang attribute that was set either on the html tag or on an individual element.
body {
&:lang(fr) {
font-family: Lato, “Sans Serif;
}
&:lang(zh) {
font-family: cwTeXFangSong;
}
}Tip: Google’s Noto fonts aim to support all languages.
Testing Localization
When implemented properly, internationalization should be close to invisible to site visitors. The best way to verify that the look and feel of a site is working for visitors is to ask them. Colleagues in different regions of the world can be great resources for developing content strategies, but verifying with real users is key to creating a seamless localized experience. Tools for remote user testing make this easier and more affordable than in the past.
Localization Testing Checklist
- Abbreviations
- Address format
- Calendar type (including datepickers)
- Copy direction (right-to-left or left-to-right)
- Concatenated strings (word order issues)
- Currency symbols
- Date formats
- Form validation
- Holidays
- Local links, customer service numbers
- Local regulations (privacy laws, disclaimers, taxation)
- Messaging (are users interpreting it the same way?)
- Missing characters (not supported by font)
- Names and titles
- No inappropriate or offensive words, colors, or images
- Number formats
- Paper sizes
- Payment method preferences
- Phone number format
- Punctuation
- Shortcuts or hotkeys
- Site speed
- Spelling
- Symbols
- Text sorting
- Time formats, timezones, and daylight savings
- Translated audio and video (or transcripts and subtitles)
- Translated meta tags, ARIA-labels, and titles
- Weights and measures
- UI issues (alignment, overlap or truncation due to copy length, color contrast)
- URL structure
Additional Resources
To reach a broader global audience, localization should be considered in all phases of website development — from market research to design to development and testing. Learn more about localization from these sites:
IANA Root Zone Database Comprehensive list of top-level domains, including ccTLDs
CSSJanus CSS mirroring for right-to-left languages
W3C’s Accept-Language stance FAQ on using HTTP headers for localization
International Usability Testing An introduction from the Nielsen Norman Group
Google’s multi-regional site guide
Bing’s Geo-Targeting guide
Information created by third parties that we may link out to or feature on our site is not endorsed by us and remains the responsibility of such third parties. MINDBODY assumes no responsibility for errors or omissions in the content.
