We took a multi-pronged approach to tackle the bilingual requirement. First, we used a plugin called TranslatePress, which allowed us to have finer control of what text to display based off of the language selection. With this, you can also limit the language selection to just the ones you needed. This allowed us to show authentic, native Spanish on the website and helped users feel more at home. It was not without issues however. There is one interesting feature that is built-in and cannot be changed, which essentially finds similar words and uses previous translations to display on the page. While this is nice, it gave unexpected results. We were able to bypass this by using “language blocks”, which allowed us to select entire sections and manually translate ourselves.

That took care of the native Spanish translated websites. However, we still needed to figure out how to allow the user to select their default language and save it. TranslatePress did not offer this functionality and we had to roll our own custom solution (that we’re quite proud of!). What we did was, if a new user enters the page, display a modal for language selection. Once a user selects their language, that preference is saved using custom JavaScript to their browser’s local storage. When the user revisits the page, it will check to see if that data is already stored to their browser. If it is, lookup the language and display that automatically. If they decide they want to choose a different language, it is allowed through retriggering the modal and saving the new value.

Finally, for the look and feel, we worked very closely with the AVANCE communications team to establish an identity and ensure that we were using the proper branding colors that they already use throughout their organization.