#450: Localization and Internationalization

Issue #450 • Apr 2, 2024 • [View in the browser]( [Smashing Newsletter]( Iyi akşamlar Smashing Friends, How would you go around localizing your product? When we speak of localization, we think about how to adapt UX to local expectations. When speaking about internationalization, we speak about how to adapt our code to work in other markets. [Pseudolocalization for testing]( Pseudolocalization for testing, from the [Localizing Slack case study](. In both cases, we need to account for [significant differences](. French texts, for example, are on average 20% longer than English ones. And Japanese texts tend to be 30–60% shorter. We’ll need to adjust numbers, dates, times, formats, units and addresses — and it’s always a good idea to stress test your UI for translation with [pseudolocalization](. In this newsletter, we dive into fine details of localization — with useful techniques and practices to keep in mind. [Smashing Meets Performance]( Meet [Smashing Meets Performance]( a free community event on May 7. In the Smashing department, we'd love to welcome you to a new Smashing Meets on [Web Performance]( our online meet-up on Tuesday, May 7. [Get your free ticket!](. Sending a lot of hugs, peace and love your way, everyone — and happy reading! [Vitaly]( --------------------------------------------------------------- 1. JavaScript Localization JavaScript is your best friend if you want to get an application fit for a global audience. But how to get started? Should you build your own vanilla JavaScript solution or use an off-the-shelf internationalization library? Mohammad Ashour wrote a comprehensive [guide]( to help decide and kick-start browser JavaScript localization. [The Ultimate Guide to JavaScript Localization]( The guide explains step-by-step how to build vanilla JavaScript localization from scratch, covering everything from loading translations asynchronously to detecting a user’s preferred locales, translating dynamically after page load, and dealing with things like writing direction and number and date formatting. While this solution is just fine for smaller projects, Mohammad also walks you through some popular internationalization libraries in case your project calls for something a bit more complex. Another great resource to refer to is [Frontend I18n]( by Lokalise. It features technical tutorials on how to get started with front-end internationalization using Angular, React, Vue, other JavaScript frameworks, and pure JavaScript. (cm) --------------------------------------------------------------- 2. Multi-Brand Design System What could a multi-brand, multi-theme design system look like? Pavel Kiselev has been tinkering with the idea of a design system for true white-label products for a few years and now shares a [behind-the-scenes look at how he created such a system]( that can adapt to different brands. [Making of true multi-brand design system]( Pavel’s approach works like a forking repository or CodePen project: to get started with a new project, you copy the single master Figma file that includes all the components, styles, and variables. To save designers time and effort when they want to change colors, typography, spacing, radii, elevation, and component styles, Pavel built in automation that makes it possible to quickly adapt the source system for specific needs without a lot of manual work. Clever! (cm) --------------------------------------------------------------- 3. UX Localization Adapting a website or app to an international audience goes far beyond translation. It’s about designing an experience that caters to the target market’s cultural tastes and usage habits and gives users a feeling of comfort, familiarity, and ease of use wherever in the world they may be located. The team at Phrase published a great [introduction to UX localization]( that helps you craft cross-cultural products with international UX in mind. [UX Localization: Adapting the User Experience for International Audiences]( The localization strategy proposed in the article breaks the UX design process down into four key stages. They cover everything from ensuring usability in every market and considering internationalization best practices around different languages and writing systems to identifying non-textual elements for localization (e.g., layout, colors, visuals, information architecture) and localizing the content. A great roadmap to safely guide you through the process of getting your site or app ready for an international audience. (cm) --------------------------------------------------------------- From our sponsor Netlify Compose: Web + AI | Virtual Event [Netlify]( How has AI changed the way you build and deliver digital experiences? Find out how to adopt scalable AI strategies and build teams that know how to use and measure its impact: [Register now]( --------------------------------------------------------------- 4. Design-Stage Localization Localization is often an afterthought, something that teams start to take care of after release. Design-stage localization offers a different approach. It starts the localization process alongside the concepting phase in product development, so that you have fully localized prototypes ahead of time. [( If you want to dive deeper into how to build and implement a unified localization workflow that starts already at the design stage, the folks at Lokalise published a free eBook: [The complete guide to design-stage localization](. It is filled with practical tips, examples, and case studies of design-stage workflows and also includes a video guide and a checklist to help you successfully implement localization. (cm) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. 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 Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Design System Planning and Process]( workflow with Nathan Curtis. April 18–26 - [Typography Masterclass]( design with Elliot Jay Stocks. May 1–15 - [Behavioral Design Workshop]( ux with Susan Weinschenk. May 6–20 - [Scalable CSS Masterclass]( dev with Andy Bell. May 9–23 - [Design Token and UI Component Architecture]( workflow with Nathan Curtis. June 6–14 - [Accessibility for Designers]( ux with Stéphanie Walter. June 3–12 - [Designing For Complex UI Masterclass]( ux with Vitaly Friedman. June 20 – July 2 - [Advanced Modern CSS Masterclass]( dev with Manuel Matuzović. June 24 – July 8 - [Design Patterns For AI Interfaces]( ux with Vitaly Friedman. July 9–23 - [Jump to all workshops →]( --------------------------------------------------------------- 6. IBM Globalization Checklists Nothing beats a good checklist, right? IBM published a [set of five useful checklists]( you can refer to as you plan and implement globalization to ensure you have considered all the important key items in every stage of the process. [IBM Globalization Checklists]( The checklists support you during the globalization planning phase and application design, and they help you ensure your UI anticipates unique requirements from multiple linguistic and cultural environments. Checklists with things to keep in mind for bidirectional support (right-to-left languages) and double-byte character set support (e.g., Japanese and Chinese) are also available. One for the bookmarks. (cm) --------------------------------------------------------------- From our sponsor Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder [SurveyJS]( [SurveyJS]( is a product suite of open-source JavaScript client-side components designed to simplify the creation of a full-cycle form management system fully integrated in your IT infrastructure. The libraries utilize JSON objects for form metadata and results, and seamlessly integrate with any backend system. The JSON form builder component offers a user-friendly drag-and-drop interface, GUI for form branching, and an integrated CSS theme editor for customizing form design. Check out its free [full-featured demo]( to explore its capabilities firsthand. --------------------------------------------------------------- 7. Internationalization 101 It’s not uncommon that teams underestimate the complexity of going international, which often results in delays, overspending, and mistakes. To help you ensure a smooth launch of a product in a new market – and stay sane while doing so – Galina Ryzhenko created the [Internationalisation 101 checklist](. [Internationalisation 101]( Focusing on things product managers can do to take a product global, the checklist is based on industry best practices and Galina’s more than ten years of experience scaling software products globally. It breaks internationalization down into three categories: business and marketing, design and engineering, and account management and support. A great companion on your internationalization journey, jam-packed with precious tips and pointers. (cm) --------------------------------------------------------------- 8. Figma Plugins For Localization Juggling different languages in a design can be challenging when working on localizing a product. Luckily, there’s a Figma plugin to ease the job and streamline your translation workflow. Say hello to [Parrot](. [Parrot]( Parrot lets you create and manage multiple language versions of your design right within your Figma file. No need to switch interfaces for text and translation management, just assign a unique message to design elements and update them directly in Figma. To make the translation process even more convenient, Parrot comes with built-in machine translation. Another handy Figma plugin to help you with localization is [Pseudoloc](. It quickly pseudo-localizes text in Figma to visualize how your UI will work when translated. Formatting options include pad strings to simulate string expansion, optional start and end markers, and two formatting strategies (accented and bidi). (cm) --------------------------------------------------------------- 9. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Success at Scale]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Colorful Blossoms And Rainy Days (April 2024 Wallpapers Edition)]( - [How Developers Can Strengthen Their Mental Health Amidst High-Pressure Projects]( - [The Future Of User Research: Expert Insights And Key Trends]( - [Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](