Localization Button Blunder
2 min read
In my last agency role, I had a lot of firsts. One of the most notable was contributing to a large-scale web app with localization requirements. I was tasked with building several front-end templates which involved building the typical elements; buttons, responsive content rows and columns, forms, etc.
I made many mistakes on this project, but one that stands out was how I built the buttons. I built the buttons with a reasonably large max-width to keep the design in-tact across multiple viewport and device widths while also accommodating long strings of text. While it seems like a fairly thoughtful way to approach it, I missed something critical: a few of the supported languages translated the call to action button text to much longer strings of text than I had accounted for in the max-width. Additionally, some of the strings had several consecutive glyphs (which caused the text to break out of the button container).
Assuming button text would never exceed ~200 characters was a costly mistake and one I will never forget. Especially when working with projects that require language localization!