Localization Button Blunder

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).

It was challenging to figure out how to keep the original design intact while accounting for variable and wide range of characters. The solution involved using javascript to calculate the number of characters of the button text and conditionally apply a class to change the styling upon reaching a threshold. Thankfully, we only had to perform this calculation no more than three times on the page, so performance did not take much of a hit.

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!