Building a multi-language website involves more than just translating text. A recent project revealed subtle localization bugs that basic code checks missed, especially when handling complex customer journeys and diverse visual content.
Building a website that speaks ten different languages isn't just about translating words; it's a whole new level of complexity, as a team building the Custom Sign Forge B2B site recently found out. While their project, which serves custom commercial signage clients globally using Astro and React, seemed straightforward with its language switcher, the real challenge was keeping everything—from product pages to enquiry forms and search results—consistent across all languages as the site grew.
One of the clever solutions they implemented was ensuring that while the visible text changes when you switch languages, any information you've already entered as a customer remains untouched. This is vital if you start an enquiry in Spanish and return to check it in English; your original message stays intact. They don't force you into a language based on your location either; you pick your preferred language, and the URL remains stable for sharing.
However, some tricky issues slipped through their initial code checks. They discovered untranslated navigation text in the Arabic account menu and even a wrong country flag next to a language option. These aren't simple bugs that counting translated strings would catch. This experience taught them to expand their quality checks significantly. Now, things like the website header, account menus, error messages, upload controls, privacy policy links, and the summary of your enquiry are all rigorously checked for every single language.
For languages like Arabic, the checks go even deeper, ensuring the site correctly handles right-to-left text, icon direction, mixtures of Latin and Arabic script, and proper alignment. They also learned that relying solely on flags to indicate a language isn't enough; displaying the actual language name is much clearer, especially since many languages are spoken across different countries.
Finally, a common problem with images surfaced: applying a standard crop to every picture. Some of their signage photos were wide, others close-ups or portraits. A uniform crop often meant the actual sign—the most important part—was cut out. This highlights the need for a more flexible approach to how images are displayed across different layouts and languages.
One of the clever solutions they implemented was ensuring that while the visible text changes when you switch languages, any information you've already entered as a customer remains untouched. This is vital if you start an enquiry in Spanish and return to check it in English; your original message stays intact. They don't force you into a language based on your location either; you pick your preferred language, and the URL remains stable for sharing.
However, some tricky issues slipped through their initial code checks. They discovered untranslated navigation text in the Arabic account menu and even a wrong country flag next to a language option. These aren't simple bugs that counting translated strings would catch. This experience taught them to expand their quality checks significantly. Now, things like the website header, account menus, error messages, upload controls, privacy policy links, and the summary of your enquiry are all rigorously checked for every single language.
For languages like Arabic, the checks go even deeper, ensuring the site correctly handles right-to-left text, icon direction, mixtures of Latin and Arabic script, and proper alignment. They also learned that relying solely on flags to indicate a language isn't enough; displaying the actual language name is much clearer, especially since many languages are spoken across different countries.
Finally, a common problem with images surfaced: applying a standard crop to every picture. Some of their signage photos were wide, others close-ups or portraits. A uniform crop often meant the actual sign—the most important part—was cut out. This highlights the need for a more flexible approach to how images are displayed across different layouts and languages.
