BLOG

The Central Jersey Diaper Bank – Now in Spanish!

The Central Jersey Diaper Bank has been slammed with hundreds of diaper requests due to COVID-19, and has truly risen to the task. In my previous blog post, I detailed how I updated, upgraded, and overhauled their technology stack to bring them up to the 21st century. Today, I’m happy to announce that we have completed another major step in the project: translating our website into Spanish.

Many of the Diaper Bank’s clientele speak Spanish as a first language, and a sizeable number speak only Spanish (we were able to track that through our new SalesForce configuration). We decided that translating the site into Spanish would allow us to meet our clients where they are and provide services that they can understand easily without the need for translation.

The first difficulty was in architecting the solution. We’re using Squarespace as our webhost, and their translation documentation leaves a little to be desired. Their page, “Create a multilingual site in Squarespace”, links to an example site that basically has two menus, one for English and one for German. Squarespace’s menu system allows for only 2 levels of depth. For example:

• Level 1: Get Involved
• Level 2: Diaper Drive
• Level 2: Delivery Squad

This page and navigation layout works well for us. However, if you were to create top-level pages for English and German, you are only allowed one other level, effectively flattening the navigation structure:

• Level 1: English
• Level 2: Get Involved
• Level 2: Diaper Drive
• Level 2: Delivery Squad

This unfortunately ruled out the suggested method of multilingual sites entirely.

Instead, we decided to create an entirely separate site, cloning the first one.

The English site has both the domain, CentralJerseyDiaperBank.org, as well as web hosting. On the domain, I created A records in the DNS settings for “es”, as well as a CNAME record for “www.es”, which allowed me to route es.CentralJerseyDiaperBank.org (as well as www.es.CentralJerseyDiaperBank.org) to the new, cloned website. At this point, the cloned site was identical to the original site (and in English), aside from the URL.

Next, it was time to set the the new site to be in Spanish mode. This allows the site to announce to web browsers that the page content is in Spanish. Squarespace makes it easy to set the language sites in the settings, but as you will see below, this also sets the language for the editor, not just the public site.

The next step was translating the new site. We thankfully have a number of people that work for the diaper bank, either as employees or volunteers, that speak Spanish in order to interact with our clients. Mariana Stevenson took on the task of being our translator, and we really appreciate it! We used a Google Doc with a big table: English on the left, Spanish on the right. With that completed document in-hand, I started going through page-by-page and translating. Most of the text was copy-and-paste, but there were a few snags I ran into along the way, which I detail below.

The final step for translating the site was allowing users to move from one site to the other. To do that, I simply added an “En Español” link to the English site pointing to the Spanish site, and vice versa.

Issues with Translating on Squarespace

Not Every Configuration Gets Cloned

When you clone a Squarespace site, nearly everything gets cloned, but a few things do not. For example, Google Analytics or Google Search Console settings don’t get carried over. Also among the missing items are the configurations for forms. The form object itself will be on the page, but you need to hook it up to send an email to the desired address before you can save the translated text.

But there is an additional issue here – once I set the site’s language to Spanish, the error messages came up in Spanish, too! It seems like both the forward-presenting site as well as the back-end editor use the same Spanish language setting. I can see how that would make some sense, but it did mean that I had to use Google Translate a bit to figure out what Squarespace wanted from me.

This error is letting me know that “This form requires a storage option…”, which means I need to set where the form data should actually go.

No Accent Marks in URLS

In trying to translating pages, I wanted to translate the page names as well as their URLs. However, I found that Squarespace’s tools do not allow for accent marks in URLs, so some of the letters had to be replaced with similar letters lacking accent marks.

For example, “/Nuestra-Información” had to be modified to “/Nuestra-Informacion” to meet Squarespace’s requirements.

Redirects

Once I created the translated URLs, I realized that it was difficult to move from the English site to the Spanish site quickly. On the Spanish version, I created redirect rules that pointed from the English version to the Spanish version. For example:

• English: CentralJerseyDiaperBank.org/our-supporters
• Spanish: es.CentralJerseyDiaperBank.org/our-supporters redirects to es.centraljerseydiaperbank.org/nuestros-seguidores

This allows me to move from an English site and simply add “es.” to the beginning of the URL and be brought directly to the Spanish version of the same page, even though it’s at a completely different URL. I used the same tools in reverse to move from the Spanish version to the English version.