Diseño de un sitio web multilingüe que funciona en todas partes

Imagina que has escrito el mensaje de bienvenida perfecto para tu sitio web. Es cálido, claro y tiene la longitud justa para encajar perfectamente debajo de tu logo. Luego lo traduces a otro idioma y la misma frase se alarga un tercio, ocupando una segunda línea y empujando tu botón fuera de la pantalla. De repente, el diseño que parecía sencillo en un idioma, se ve roto en otro. Este es el silencioso y fascinante desafío de construir un sitio web que debe saludar a personas en más de un idioma.

Diseñar para múltiples idiomas no es simplemente una cuestión de pasar tus palabras por una herramienta de traducción y esperar lo mejor. Afecta el diseño, la tipografía, la navegación, las imágenes e incluso el orden en que aparecen las cosas en la página. En esta guía, recorreremos lo que realmente se necesita para construir un sitio web multilingüe que se sienta nativo para cada visitante, dondequiera que esté y lo que sea que lea. Aprenderás la diferencia entre dos ideas que suenan similares pero no lo son, las decisiones de diseño que hacen o deshacen la experiencia, y los errores que cometen incluso los equipos grandes y bien financiados.

Dos palabras que vale la pena desglosar primero

La gente usa dos términos aquí, y son fáciles de confundir. El primero es internacionalización, a veces escrito como i18n porque hay dieciocho letras entre la primera y la última. Significa construir tu sitio web de manera que esté listo para soportar múltiples idiomas y regiones, la "plomería", si se quiere. El segundo es localización, o l10n, que es el acto de adaptar realmente el contenido, las imágenes y las convenciones para una audiencia particular.

Piensa en la internacionalización como equipar tu casa con enchufes que aceptan cualquier tipo de clavija, y la localización como elegir los electrodomésticos adecuados para la familia que vivirá allí. Haz bien la "plomería" primero, y agregar cada nuevo idioma después será mucho más sencillo. Si lo omites, cada nuevo idioma se convierte en una dolorosa adaptación. Este trabajo fundamental está estrechamente relacionado con la idea más amplia detrás del diseño web responsivo, donde la flexibilidad se incorpora desde el principio en lugar de ser añadida a posteriori.

Por qué el texto traducido rompe los diseños

La mayor sorpresa para los recién llegados es cuánto cambia la longitud del texto entre idiomas. Una línea corta y contundente en un idioma puede volverse notablemente más larga en otro, y algunos idiomas son más cortos. Si tus botones, menús y títulos están dimensionados para encajar exactamente en un idioma, se tensarán o colapsarán en el momento en que cambies a otro.

Diseña para la versión más larga, no para la más corta

La solución es un cambio de mentalidad: diseñar contenedores que sean flexibles en lugar de cajas que bloqueen. Los botones deben crecer elegantemente con su etiqueta. Los menús deben ajustarse o reorganizarse sin superponerse. Los títulos no deben asumir un número fijo de caracteres. Este es el mismo uso generoso del espacio en blanco y el espacio para respirar que hace que cualquier sitio se sienta tranquilo, solo que se vuelve esencial cuando la longitud del texto es impredecible.

Cuando la propia página cambia de dirección

Algunos de los idiomas más leídos del mundo se escriben de derecha a izquierda en lugar de izquierda a derecha. Soportarlos no es tan simple como traducir las palabras: todo el diseño se refleja. Tu menú se mueve al otro lado, tus iconos se invierten, el orden de lectura se invierte y los elementos que apuntaban en una dirección ahora apuntan en la otra. Una flecha de retroceso, por ejemplo, debe apuntar en la dirección opuesta.

Esto parece desalentador, pero las herramientas web modernas manejan gran parte de esto automáticamente si construyes correctamente desde el principio. La clave es planificarlo con anticipación en lugar de descubrir a mitad de camino que tu diseño cuidadosamente elaborado solo funciona en una dirección. Es un recordatorio vívido de que una buena estructura, como una sólida jerarquía visual, debe sobrevivir a ser reflejada.

Ayudar a la gente a cambiar de idioma

Una vez que tu sitio habla varios idiomas, los visitantes necesitan una forma obvia y digna de elegir el suyo. El selector de idioma es un elemento pequeño con un impacto enorme, y es sorprendentemente fácil equivocarse.

Muestra los idiomas en sus propias palabras

Un error común es listar todos los idiomas en el tuyo propio. Si tu idioma predeterminado es, por ejemplo, el inglés, no etiquetes los otros en inglés; etiqueta cada idioma en su propio script, para que un lector reconozca su idioma al instante. Las banderas son un atajo tentador, pero uno malo, porque una sola bandera rara vez se corresponde con un solo idioma y muchos idiomas se hablan en muchos lugares. El texto sin formato en el script nativo es más claro y respetuoso.

Coloca el selector donde la gente lo espera

Por convención, el selector de idioma se ubica cerca de la parte superior de la página, a menudo en una esquina del encabezado, o en el pie de página para un acceso secundario. Dondequiera que lo coloques, mantenlo consistente en cada página para que un visitante que llegue a una parte profunda de tu sitio aún pueda cambiar de idioma sin tener que buscar. Esta previsibilidad es parte de una buena navegación en general.

Más allá de las palabras: la capa cultural

La traducción se encarga de las palabras, pero un sitio verdaderamente localizado va más allá. Los colores tienen diferentes asociaciones en diferentes lugares. Una imagen que resulta amigable para una audiencia puede resultar extraña o inapropiada para otra. Las fechas, horas, direcciones y formatos de números siguen las convenciones locales. Incluso el tono de tu escritura, cuán formal o informal debe ser, cambia de una cultura a otra.

No necesitas rediseñar todo para cada audiencia, pero debes estar atento a los lugares donde una elección predeterminada descuidada podría chirriar. Elegir imágenes que resuenen localmente es parte del mismo arte que elegir elementos visuales que hacen que un sitio se vea profesional en primer lugar; simplemente agrega una dimensión cultural.

El aspecto técnico, en términos sencillos

No tienes que ser desarrollador para comprender las pocas ideas técnicas que hacen que un sitio multilingüe funcione bien. Lo más importante es indicar a los navegadores y a los motores de búsqueda en qué idioma está cada página y qué versiones alternativas existen. Esto se hace con pequeños fragmentos de código, detrás de escena, que actúan como señales. Si se hace correctamente, garantizan que un lector que busca en su propio idioma vea la versión correcta en lugar de una desfasada.

Esto es enormemente importante para ser encontrado. Cuando las señales son correctas, los motores de búsqueda pueden ofrecer con confianza el idioma adecuado a la persona adecuada, lo cual es una piedra angular de la optimización para motores de búsqueda internacional. Si te equivocas, puedes terminar compitiendo contra tus propias páginas traducidas o mostrando el idioma incorrecto por completo.

Traducción automática: útil, no mágica

La traducción automática ha avanzado mucho y puede ser un punto de partida útil, pero depender únicamente de ella es arriesgado para cualquier cosa que tenga contacto con el cliente. Puede pasar por alto matices, traducir mal modismos y, ocasionalmente, producir algo vergonzoso. Un enfoque sensato es usar la tecnología para acelerar el trabajo y que un humano que conozca el idioma y la cultura revise todo lo que representa tu marca.

No olvides el rendimiento y las páginas

Servir varios idiomas puede añadir peso a tu sitio si no tienes cuidado: más imágenes, más fuentes, más variaciones. Mantener cada versión de idioma ligera protege tus tiempos de carga, lo que es importante para todos, pero especialmente para los visitantes con conexiones más lentas en diferentes partes del mundo. La misma disciplina detrás de una buena velocidad del sitio web se aplica aquí, con la dificultad añadida de tener múltiples versiones que mantener optimizadas.

También vale la pena decidir qué páginas necesitan traducción. No todas las páginas tienen el mismo peso, y puedes optar por traducir tus páginas principales primero y expandirte después. Pensar en tus páginas esenciales te ayuda a priorizar el esfuerzo de traducción donde más importa. Si la escala te parece abrumadora, planificar el despliegue con ayuda experta puede ahorrarte mucho trabajo de retrabajo; no dudes en ponerte en contacto para trazar el plan.

Preguntas frecuentes

Referencias

1. W3C. “Técnicas y mejores prácticas de internacionalización”. w3.org.
2. Nielsen Norman Group. “Diseño para usuarios internacionales.” nngroup.com.
3. Google. “Gestión de sitios multirregionales y multilingües.” developers.google.com.