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, 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.
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 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)
From our sponsor
Netlify Compose: Web + AI | Virtual Event
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.
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:
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)
From our sponsor
Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder
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.
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. 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?
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
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
