Why Localization Matters

Website localization is about more than just adding more languages. It's about making a site feel homey and familiar to the people viewing it, regardless of their location or native language. You are not just adapting words, you're also adapting your site's user experience, making it feel local. This update of Framer comes with features dedicated to achieving just that.

A Look at Framer’s Localization Features

The new globe icon you'll find in the toolbar is the gateway to Framer’s localization view. Here, you can add a new Locale. Let's say you want to add Dutch because your primary audience is based in Amsterdam, or perhaps Chinese to cater to a broader, non-Latin character using audience; Framer's Localization features has got you covered.

Additionally, Framer allows you to select a fallback language. This is the language that appears when a specific piece of text or entire page hasn't been translated. When you add your chosen locale, every single piece of text and every image in your project will appear in a table ready for translation. You can tackle this process page by page, or item by item. Framer's filters make it easy to focus on specific parts of your site.

How Localized Translation Works in Framer

With Framer, translating your content is as easy as typing in the alternative text and hitting enter. The system even supports image translations, so you can customize your visuals to suit your localized audience. Translating alt text for formatted text fields, CMS content, or text with links in it is just as clear-cut. Framer gives you ample space to work in the localization overlay, making the process as streamlined as possible.

But what if you don’t speak the language you're localizing your site to? No problem. That’s where Framer's AI translations feature comes in. The AI starts translating your content, making sure to preserve the position of important elements like links, videos, and images. You can even have the AI translate an entire page, allowing you to focus on other aspects of localizations before finalizing the translations.

Utilizing the Canvas View for Localization

Now, to test how your page looks in the translated language, Framer provides the canvas view. You can select your new Locale in the canvas toolbar and start viewing your translation right on your canvas. Here, you can check if your translations fit properly within the design layout and make essential edits. For instance, if a heading extends onto more lines than you'd like, you can easily adjust it.

Furthermore, with the canvas view, you can navigate around your page and see that dates are automatically localized, among other helpful automated changes. Once you are happy with the layout and translations, you're ready to publish your site.

What You Get Once Localization is Published

Once your site is published, Framer handles all the HTML technicalities that come with a localized website, such as hreflang being set up for each Locale added. This ensures that visitors reaching your site from search engines receive the correct version of the site.

But it doesn't stop there, you can also allow users to choose their language by simply inserting a Locale picker from the insert menu. The Locale picker component stays in sync with all the locales in your project, meaning all you need to do is set up the styling.

In line with this improvement, the optimization process has been enhanced. Now, Framer processes the pages for each Locale in parallel, ensuring swift operation no matter how many Locales you have in your project. In other words, you get to view, for instance, the Dutch version of your page swiftly and in its best form.

This upgrade is a big deal in Framer land. The ability to localize pages in-context is a major part of a truly global user experience design. With a tool as dynamic and intuitive as Framer, it's clear that the future of site localization looks bright.