#328: Localization & Internationalization

With useful internationalization resources for designing and creating digital products for international users. Issue #328 November 23, 2021 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

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.

The Smashing Meets For All
Join us at Smashing Meets, a free live event on front-end accessibility with sessions on building accessible products.

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.

Design for internationalization

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”.

Think globally, act locally with internationalization 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)


From our sponsor

Build, Secure And Speed Up Applications With Cloudflare

Build, Secure And Speed Up Applications With Cloudflare
Sign up here!


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.

Localization in UX: way beyond text translation

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.

Smashing Online Events
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming 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.

Internationalization: Practical Tips to Build for a Global Audience

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)


From our sponsor

Cloudways: Managed Cloud Hosting Platform For Hassle-Free Experience

Cloudways: Managed Cloud Hosting Platform For Hassle-Free Experience
Bid farewell to the factors limiting your website, and reach its full potential with Cloudways. Adding trailblazing features like enhanced SLAs, server management using the RESTful API, SSD-based hosting into the basket, and ditching the traditional cPanel with its advanced control panel, you’re all set to conquer the digital space. Get started with Cloudways today and pace up your websites success.


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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


7. New On Smashing Job Board


8. Recent Smashing Articles


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).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#327: Designing For Mobile and Touch

Tuesday, November 16, 2021

With useful tools for designing better mobile UX, best practices, onboarding UX and mobile UI inspiration. Issue #327 • November 16, 2021 • View in the browser 💨 Smashing Newsletter Dear Smashing

#326: Designing Better Complex UIs

Tuesday, November 9, 2021

With useful techniques for better enterprise tables, modals, sliders, web forms and sounds. Issue #326 • November 9, 2021 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, There are so

#325: Little Friendly Websites

Tuesday, November 2, 2021

With useful helpers for picking a plant, listening to the music from the past and UX misconceptions and laws. Issue #325 • November 2, 2021 • View in the browser 💨 Smashing Newsletter Tere Smashing

#324: Front-End Decisions

Tuesday, October 26, 2021

Useful tools to help you make better front-end decisions when coding, debugging and reviewing code. Issue #324 • October 26, 2021 • View in the browser 💨 Smashing Newsletter Xin chào Smashing Friends,

#323: SVG Freebies, Techniques and Tools

Tuesday, October 19, 2021

With grainy SVG gradients, SVG flags, animated credit cards and SVG generators. Issue #323 • October 19, 2021 • View in the browser 💨 Smashing Newsletter Olá Smashing Friends, I vividly remember the

You Might Also Like

Every viral brand has these 5 things in common ⚡️

Wednesday, May 1, 2024

See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute

inherit(), Polish, Picture-Superiority Effect, Music Notation, Multi-Brand Design System

Wednesday, May 1, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround

164 / What if you could talk to Scarlett Johansson from the movie Her?

Tuesday, April 30, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

Mayer Rus on L.A.’s Great Gallery Migration

Tuesday, April 30, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev

Accessibility Weekly #394: Images as the First Thing in a Button or Link

Monday, April 29, 2024

April 29, 2024 • Issue #394 View this issue online or browse the full issue archive. Featured: Images as the first thing in a button or link "An accessibility problem I encounter regularly is

My product prioritization framework

Sunday, April 28, 2024

Issue 192: How I triage strategy ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.