[Call for Entries: The HOW Logo Design Awards]
A single code element kept Florida’s hurricane shelter list from being translated for Floridians who needed it most during Hurricane Irma.
Image courtesy of the National Oceanic and Atmospheric Adminisration | NOAA GOES-16 captured this geocolor image of Irma’s eye at Category 4 strength over the Florida Keys at approximately 9:00 am EDT on September 10, 2017.
During Hurricane Irma, a single HTML code element kept Florida Division of Emergency Management’s list of shelters from getting translated. According to the US Census, 72.8% of Miami-Dade residents don’t speak English at home, so the need for life-saving information in a language they could understand was critical. And for the most part, available.
As Irma came closer, FDEM translated its site, FloridaDisaster.org, into Spanish, French and German. But the shelter list stayed in English: It was coded as an IFRAME.
We’ll explain why automated translation and IFRAME don’t always mix—and provide alternatives—in a moment. But first, let’s talk about the two ways developers can localize a site:
First, there’s the old way. Engineers separate text strings from the rest of the site code, then paste the strings into Excel. A project manager sends this to translators who put the original, source language in one column and the translated, target language in another. Engineers then paste the translation back into their site code. It usually doesn’t fit. Spanish, French, and other romance languages tend to be 30% longer than English. Finnish is 20-30% shorter. So the Murfreesboro web designers get involved. They go back and forth with the translators, trying to find accurate options that don’t completely ruin the optics of the site. Meanwhile, deadlines pass, costs rise, and something always gets left out.
That’s why there’s the new way. Over the last decade, translation management systems (TMSes) have removed localization’s logistical problems. TMSes are turnkey. Once initial integration is complete, the system knows when new copy gets created, automatically extracts it, then deploys translation back onto your site. Translators can see how short or long the new language will be in real time. Turnaround is quicker, the project is cheaper, and you don’t have to do anything.
As perfect as this sounds, there’s one hitch: Most TMSes don’t work well with IFRAME.
An HTML coding element that embeds information on a page, IFRAME is the coding world’s equivalent of picture-in-picture on a tv set: Your television’s turned to Channel 4 but in the corner, it’s showing Channel 3. The video’s surrounded by Channel 4, and you might think all the content comes from Channel 4, but the tv pulls that part from somewhere else. Comparatively, IFRAME content might come from your domain or it might not. Some developers use the element as a quick and dirty way to load images and PDFs.
[Related: The Future of Design Thinking: The Interface Around Us]
Most translation management systems can’t auto-extract copy from an IFRAME. Filip Rachůnek, Senior Software Developer for Memsource, a TMS vendor, explains, “Website connectors to translation platforms like Memsource often import HTML code to create a translation job. The challenge with IFRAME is because it often refers to external content sources, it can be very challenging to import the source content within the IFRAME and even more challenging to export it back to HTML in the target language.”
According to Craig Stern, that’s what happened with FloridaDisaster.org. Stern is the marketing manager at Americas for Systran, the TMS that translated the site. He says the site’s developer “created their list of shelters in an IFRAME that is pulling data from another source outside of their web design.”
So why don’t TMS developers just code a fix? Jose Palomares, chief technology officer for Venga, another TMS provider, explains, “IFRAME is not as much a localization problem as a development/internationalization problem. Getting the content translated is easy, but for the developers to get it to show up, it takes some tweaking as IFRAME defaults to the original language of the original page.” TMS developers have to find a way to extract text for translation and to insert translated copy. Then the site developers have to recode the page to pull from the new language IFRAME instead of the original one. Palomares says, “Even if you take the content on the IFRAME and set it up to be German, the application could still load English.”
In other words, if you insist on using IFRAME, get ready to make this part of your translation process manual again.
“Ask yourself, ‘Why am I using IFRAME here? Is it necessary?,’” suggests Memsource developer Petr Stříbný. Many times, it’s not. After The Atlantic reported FloridaDisaster.org’s gaffe, site developers replaced the IFRAME shelter list with one in table. Now it translates fine.
Stříbný continues, “Consider other coding alternatives for styling [like] CSS and dynamic content [like] JavaScript, and only use IFRAME if it’s absolutely necessary.” And if you’re stuck using IFRAME because the content comes from another domain? Stříbný says, “Do you own it? If not, and you change the formatting for translation, you may encounter larger issues like copyright infringement.”
No matter what element you use, Palomares says to talk to your TMS provider. The better they understand your web design Murfreesboro Tennessee decisions, they quicker they can find a fix for you: “If you have in-house developers, they’ll be able to solve it, but if you are using something out-of-the-box … it can be very frustrating.”
