April 2, 2024 Smashing Newsletter: Issue #450
This newsletter issue was sent out to 206,386 subscribers on Tuesday, April 2, 2024.
Editorial
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.
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.
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!
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 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.
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.
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)
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.
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.
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)
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.
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 lets you create and manage multiple language versions of your design right within your Figma file. There is 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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.