Imagine that you need to localize an existing interface for a foreign market. It’s probably going to start with relatively straightforward adjustments; perhaps with a collection of text strings for a foreign language, but then quickly diverging into the world of date and time formatting, currency denotation, punctuation, ordering, and even pluralization.
The struggles may continue when it comes to visuals and layout. But then, where do you even start with such a project? That’s what this newsletter is all about: localization and internationalization, so once you have exactly that question in your mind, you’ll find an answer waiting for you there.
Also, don’t forget to drop by Smashing Meets where we’ll be discussing all things accessibility with Christopher Patnoe, Harris Schneiderman, Manuel Matuzović, and yours truly.
Of course, we also announced a few new front-end workshops on front-end testing and ethical design that you might want to consider as well. Or even join us at the in-person SmashingConf SF 2022 that’s going to take place on March 28–31, 2022. Let’s jazz together — we’d love to see you there!
— Vitaly (@smashingmag)
1. Designing With Localization In Mind
Localization is often put off until late in the development cycle or, when a deadline is tight, it may even stay unaddressed until a later release. However, supporting localization doesn’t have to be hard, and if you consider a few basic things right from the very beginning, you can prevent localization from growing into that scary monster in your pile of UX debt that nobody in the team dares to tackle.
A great introduction to localization comes from Jonathan Walker. It provides a localization expert’s perspective and gives practical tips that you can apply to your user interfaces right away to better support localization. Probably the most valuable tip: Get one or more people on your team who have a different cultural background and ask them for feedback frequently to challenge your assumptions. The more diverse your team, the better, of course.
John Saito also collected some easy-to-implement tips that help you build better products for people around the world. And as so often, it’s the little things that make a huge difference, like leaving room for longer translations, for example, staying clear from text in images, or watching out for metaphors when using icons. Another practical guide to localization best practices that is worth looking into comes from Gabriel Fairman. He shares “10 Tips For A Successful Global Launch.” (cm)
2. Think Globally, Act Locally
About 50% of websites are in English although only about 25% of internet users are English speakers. Given these figures, it becomes clear that localization is not only a nice add-on but a significant part of accessibility. At jsday2019 in Verona, Elianne Schütze Ramírez gave a fantastic talk on the topic: “Think Globally, Act Locally With i18n On The Web”.
In her talk, Elianne explores how internationalization gets made on the web and what we should keep in mind or avoid when making the web more accessible to the world. Elianne’s practical tips and handy code snippets will leave you in a place where you’ll feel a lot more comfortable about internationalization. 40 minutes well spent. (cm)
3. Beyond Translation: Localization In UX
Localization goes far beyond translation. It’s also about small nuances in mindset and culture. As Tania Conte points out, an effective product, as for UX design, is not likely to be faithful to its original version when it becomes available to a different country. Instead, the experience needs to be aligned to different cultures, tastes, and styles.
To prevent you from common pitfalls, Tania collected the main UX design actions applied to localization of products and services. In a nutshell: Consider that cultural value can change the way visual content is processed. Be respectful of cultural and religious pecularity. Introduce some variants that leverage the characteristics of a country. Get focused on habits and local traditions around the globe. And, last but not least, research legal aspects that might be involved. A great reminder to overcome assumptions. (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Dynamic CSS Masterclass Dev
with Lea Verou. Nov 29 – Dec 14.
- Maintaining Successful Design Systems Workflow
with Brad Frost. Nov 30 – Dec 14
- Design Management Masterclass UX
with Yury Vetrov. Dec. 1–15
- Jump to all online workshops →
5. Internationalization And Localization Insights From Real-World Projects
How do other teams tackle internationalization and localization? Oliver Lindberg talked to designers and developers from Shopify, Uber, Memrise, Monzo, and Taulia to find out what kind of UX best practices and tools they use to create digital products for international users. A great overview of what you need to consider to get your UI ready for an international market.
To ensure your localization effort is successful, it might also be a good idea to stress-test your design to prevent common localization issues early on. Nick Babich gets you familiar with a very clever approach: pseudo-localization. It helps you see how a UI will look like after translation, but instead of actually translating the product, the textual elements are replaced with an altered version of the original language. “Account Settings”, for example, could become “[!!! Àççôûñţ Šéţţîñĝš !!!]” to account for text that is longer in other languages. The fact that pseudo-localization becomes the default development language in your development cycle, helps your team treat localization as a priority.
Interesting insights into making internationalization work on a large scale come from Hua Zheng, Tech Lead at Airbnb. He discusses how they built Airbnb’s Internationalization Platform that today serves more than 1 million pieces of content in 62 languages and 100+ billion translate requests daily with microseconds latency. (cm)
6. Internationalization Tools And Resources
A font that supports all Unicode characters across all languages, a BiDi checker that highlights RTL-language errors, a repository for handling dates, times, and currencies — it’s always good to have a well-equipped toolkit at hand that helps you master the localization challenge.
Google, for example, shares a useful collection of open-source libraries and APIs that might come in particularly handy when you’re designing for a global audience. Jakub Pomykała also curates a list of internationalization resources for all kinds of frameworks. It includes tools, libraries, localization software, localization programs, translation management systems, and more. Two for the bookmarks! (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
- Localization & Internationalization
- Designing For Mobile and Touch
- Designing Better Complex UIs
- Friendly Little Websites
- Front-End Decisions
- SVG Freebies, Techniques and Tools
- Front-End Guides, UX, Regex and Docker
- Little Front-End Helpers and Resources
- New CSS Techniques
- Microcopy and UX Writing
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.