En un mundo cada vez más conectado, los sitios web multilingües son cada vez más habituales. Pero, ¿diseñarlos? Es un poco más complicado de lo que pueda parecer, sobre todo si se detiene a pensar en los cambios de diseño web que tendrá que hacer en su sitio.

Los principios básicos son sencillos: con Weglot puede añadir diferentes idiomas a su sitio de comercio electrónico en menos de 5 minutos. No obstante, luego también tiene que pensar en dónde colocar el selector de idiomas, en cómo acomodar los cambios en el diseño cuando un usuario cambia del inglés a un idioma RTL y en utilizar colores, imágenes e iconos culturalmente apropiados.

En esta guía examinaremos algunas de las consideraciones de diseño más importantes para ayudarle a planificar un sitio web multilingüe con las mejores prácticas.

1. Utilizar plantillas globales para una imagen de marca coherente

Cuando alguien llega a su sitio multilingüe, usted desea que tenga una experiencia de usuario coherente, independientemente de la versión lingüística del sitio. Esto significa que los visitantes indios que visiten su sitio en inglés deben ver la misma marca y diseño que en la versión hindi.

No puede evitar que los visitantes bilingües o multilingües vean diferentes versiones de su sitio multilingüe, pero puede asegurarse de que vean la misma marca, la misma disposición y los mismos elementos de diseño web cuando cambien a un idioma diferente del predeterminado.

Si utiliza un sistema de gestión de contenidos, como WordPress, con Weglot es fácil crear un sitio web multilingüe coherente. Weglot se integrará perfectamente con el tema de su creador de sitios weby traducirá automáticamente su contenido. También se integrará con todas las demás partes importantes de la funcionalidad de su sitio, como los plugins de comercio electrónico, lo que significa que no hay razón para tener diferentes temas o diseños para los diferentes idiomas que añada a su sitio web multilingüe.

Por ejemplo, cuando visita la página de inicio de Airbnb desde un país como Australia…

… y luego cambia al japonés, el diseño y la marca son coherentes en ambos idiomas.

Contar con un diseño reconocible al instante no sólo contribuye a reforzar su imagen de marca, sino que le ayudará con las futuras actualizaciones de su sitio web multilingüe y reducirá los quebraderos de cabeza cuando los distintos idiomas hagan necesarios cambios en la interfaz de usuario o la experiencia del usuario.

2. Haga que el conmutador de idiomas sea realmente fácil de encontrar

Coloque el menú desplegable de cambio de idioma en un lugar destacado en su página de inicio y en todas las demás páginas del sitio. Se dará cuenta de que los sitios web multilingües tienen el selector de idiomas en el encabezado o en el pie de la página.

Sea cual sea la opción que elija para su sitio web multilingüe, asegúrese de que sea realmente fácil de encontrar.

También deberá asegurarse de que las opciones de cambio de idioma estén claras. Lo mejor es referirse a un nuevo idioma en su lengua materna. Por ejemplo, utilice «Deutsch» en lugar de «Alemán» y «日本語» en lugar de «Japonés».

Asana, por ejemplo, utiliza un menú desplegable con los nombres de los diferentes idiomas disponibles:

Usted quiere que los visitantes de su sitio web multilingüe se sientan bienvenidos, independientemente del idioma que hablen. Colocar el conmutador de idiomas en un lugar fácil de encontrar le ayudará a conseguirlo.

3. Deje que los visitantes elijan su idioma preferido

Puede pensar que dejar que los usuarios elijan su idioma preferido es una obviedad, pero muchos sitios multilingües dificultan realmente la elección de un idioma. En su lugar, obligan a los usuarios a cambiar de región.

Las grandes marcas son las peores infractoras. A menudo encontrarás muchas que te obligan a cambiar la región de su sitio multilingüe (por ejemplo, pasar de www.adobe.com a www.adobe.com/us/) cuando lo único que quieres es cambiar el idioma por defecto.

Que alguien hable hindi no significa que quiera cambiar a esa región el sitio web multilingüe de una empresa. ¿Qué pasa si viven en Nueva York y quieren comprar en el sitio de EE. UU. pero quieren leer el sitio web en hindi? No ponga impedimentos para que compren en su sitio web multilingüe: ayúdeles a acceder a su contenido en su idioma preferido.

He aquí un ejemplo de empresa que realmente permite a los visitantes elegir su idioma preferido: Uber muestra sus opciones de cambio de idioma en el pie de página:

Al hacer clic en "Inglés", aparece un modal que te permite elegir tu idioma preferido entre el inglés y el francés:

Lo bueno del diseño de cambio de idioma de Uber es que permite a los visitantes seleccionar su idioma preferido sin obligarlos a cambiar de región.

Si desea mejorar aún más la experiencia de usuario de sus visitantes, considere la posibilidad de «recordar» su idioma por defecto a fin de que la próxima vez que visiten su sitio web multilingüe este se cargue automáticamente en su idioma nativo.

Autodetección de idiomas

Muchos sitios web multilingües detectarán el idioma nativo del navegador web para establecer automáticamente el idioma principal para los usuarios.

Aunque esto ahorra algo de tiempo a los usuarios, ofrecer traducciones automáticas mediante la detección de idiomas no es una ciencia exacta. Es importante tener en cuenta a los usuarios que puedan llegar a la versión «incorrecta» de su sitio web multilingüe.

Un visitante podría estar ubicado físicamente en España, su sitio web multilingüe lo detectará automáticamente y pasará a mostrarlo en español; sin embargo, dicho visitante podría ser un hablante nativo de inglés que no sepa leer en español.

Por lo tanto, aunque vaya a detectar ubicaciones automáticamente, proporcione asimismo un selector de idiomas para que los visitantes tengan la opción de elegir entre diferentes idiomas.

Banderas frente a nombres de lenguas

Las banderas se utilizan a menudo para indicar un idioma, pero hay algunas cuestiones contextuales que conviene tener en cuenta:

• Las banderas representan países, no idiomas.
• Un país puede tener más de una lengua oficial.
• Una lengua puede hablarse en más de un país.
• Es posible que los visitantes no reconozcan una bandera (debido al tamaño del icono) o que se confundan con banderas similares.

En última instancia, lo que se quiere es ofrecer opciones de cambio de idioma que sean fáciles de entender en cualquier idioma.

4. Contabilización de la ampliación del texto

Cuando se traduce un texto de un idioma a otro, como ocurre con Google Translate, la longitud del texto original y la traducción resultante serán diferentes. Esto puede suponer un reto a la hora de disponer su diseño.

Por escrito, algunos idiomas son más concisos que otros. Idiomas como el japonés y el chino usan uno o dos caracteres para transmitir información, mientras que en otros idiomas se necesitan varias palabras.

Idiomas como el español y el inglés son más extensos, necesitando a veces un 30 % más de espacio que otros idiomas.

La guía del W3C sobre el tamaño del texto en la traducción, cuya lectura completa recomiendo encarecidamente, ofrece excelentes consejos.

El W3C destaca por qué es fundamental que las herramientas de traducción automática tengan elementos de interfaz de usuario adaptables, como botones, campos de entrada y texto descriptivo.

Por ejemplo, cuando se tradujo Flickr a diferentes idiomas, los diseñadores debieron tener en cuenta el texto que aparece debajo de las fotos y que indica el número de visitas.

La siguiente tabla muestra las longitudes comparativas de la palabra «vista» en diferentes idiomas en relación con el inglés original:

¡Del inglés al italiano supone una ampliación del 300 %!

Lo que hay recordar aquí es que, por lo general, el texto se expandirá o contraerá en anchura, así que asegúrese de que su sitio web multilingüe lo tenga en cuenta. También hay que tener en cuenta que cuanto más pequeño sea el texto de origen, más larga será la traducción. Si el espacio es un problema, pruebe con una traducción diferente y menos literal, o cambie el tamaño de la letra en función del nuevo idioma.

La altura de los caracteres y de las líneas es otra de las cosas a tener en consideración. Es habitual que los textos no latinos tengan caracteres mucho más altos que los latinos. Las escrituras como el árabe también necesitarán más espacio vertical entre líneas en comparación con las lenguas latinas.

5. Compatibilidad y codificación de fuentes web

El W3C dice que siempre hay que especificar la codificación de las páginas web. Recomienda utilizar UTF-8 para garantizar que los caracteres especiales se muestren correctamente independientemente del idioma.

Aquí se explica cómo hacer la declaración UTF en el encabezado de sus páginas:

Las fuentes web que utilice deberán ser compatibles con todos los idiomas no ingleses que admita su sitio multilingüe WordPress, especialmente con los idiomas no latinos. Esto significa que las fuentes que utilice deben contener todos los caracteres y glifos necesarios.

Algunas fuentes pueden ser compatibles con los alfabetos latinos pero no con el RTL o el cirílico; así pues, antes de comprometerse a usar cualquier fuente, compruebe que los idiomas diferentes del suyo que necesita están incluidos.

Google Fonts, por ejemplo, permite seleccionar idiomas antes de descargar un paquete de fuentes:

Un solo idioma puede comprender cientos de caracteres, lo que puede hacer que los archivos de fuentes tengan un tamaño enorme (otro aspecto a tener en cuenta a la hora de elegir las fuentes para su sitio web multilingüe).

6. Diseño para lenguajes de derecha a izquierda

Diseñar páginas para idiomas de derecha a izquierda puede plantear problemas. Como escribe Robert Dodis, desarrollador de SteelKiwi, en Smashing Magazine, diseñar para RTL significa "darle la vuelta a la interfaz".

Por ejemplo, el diseño de izquierda a derecha de Facebook es así:

Y así es como se ve el diseño de derecha a izquierda de Facebook en árabe:

Observe cómo incluso la barra de desplazamiento cambia de posición.

El reflejo de su diseño es algo que debe tener en cuenta si está diseñando para los lenguajes LTR y RTL.

Recomiendo encarecidamente leer el artículo de Robert en Smashing Magazine para obtener un resumen detallado de cómo diseñar para RTL. No quiero reinventar la rueda aquí, así que ve a leer su tutorial. Quiero mostrarle cómo Weglot soporta idiomas RTL y puede hacer que el proceso de traducción fácil para su sitio web multi-idioma.

El servicio de traducción de Weglot es compatible con los idiomas RTL y con las reglas CSS puede adaptar el diseño de su sitio multilingüe para ajustarlo. Estos son algunos de los idiomas RTL disponibles:

• Árabe (ar)
• Hebreo (he)
• Persa (fa)
• Urdu (ur)

Después de añadir un idioma RTL a su sitio multilingüe con Weglot, puede personalizar cómo se muestra aplicando reglas CSS a su diseño. En la administración de WordPress, vaya a Weglot > Diseño del botón Idioma (Opcional) y desplácese hacia abajo hasta Anular CSS. Añada las reglas CSS que desee en el área de texto: puede cambiar la fuente, el tamaño, la altura de línea, etc., para adaptar el idioma principal a su diseño.

¡Eso es todo lo que tienes que hacer para añadir y dar estilo a los idiomas RTL con Weglot! Puedes leer más sobre cómo Weglot soporta idiomas RTL en la documentación.

7. Utilizar imágenes e iconos culturalmente apropiados

Las imágenes, los iconos y otros gráficos son elementos esenciales de cualquier página web. No obstante, debido a su propia naturaleza, los elementos visuales son subjetivos y pueden interpretarse de diferentes maneras cuando se ponen en otro contexto cultural.

Por ejemplo, la versión francesa de la página de inicio de Clarins muestra a una mujer caucásica:

Pero cuando se visita la página japonesa de la empresa, aparece la imagen de una mujer japonesa:

Las imágenes también pueden ofender. Imágenes que pueden parecer inocentes al público occidental pueden ser tabú en otro país. Por ejemplo, las imágenes que muestran a parejas homosexuales o la igualdad de género no serían aceptadas en países donde la homosexualidad sigue siendo ilegal y los derechos de la mujer aún no están plenamente reconocidos.

También deberá tener en cuenta pequeños elementos, como los iconos, y lo que significan para las personas de determinados lugares que visitan su sitio web multilingüe. Por ejemplo, el icono de un globo terráqueo para un público australiano de habla inglesa tendría un aspecto muy diferente para los usuarios de África:

El tercer icono de arriba indica un globo terráqueo, pero no presenta un país o región específicos, lo que lo hace más apropiado para su uso en un sitio web multilingüe.

Tendrá que revisar las imágenes, así como otros elementos gráficos, teniendo en cuenta las sensibilidades regionales y culturales.

Evite utilizar imágenes y otros gráficos con texto incrustado. No podrá traducir el texto incrustado con herramientas como Weglot, así que evítelo completamente.

8. Utilizar colores culturalmente apropiados

La forma en que las distintas culturas ven e interpretan el color varía enormemente en todo el mundo.

Por ejemplo, en la cultura occidental, el rojo simboliza el amor, la energía, la pasión y el peligro. Por su parte, en las culturas asiáticas es un color muy importante que simboliza la buena suerte, la prosperidad, la celebración y una larga vida. Por el contrario, en algunos países africanos, el rojo está asociado con la muerte y la agresión.

El azul se considera la opción de color más segura y globalmente aceptada para el diseño, ya que tiene muchas asociaciones positivas. Es un color relajante que se considera reconfortante y tranquilizador, a pesar de que también se asocia con la tristeza y la depresión. El azul es también el color más popular para los logotipos de bancos, ya que representa la confianza y la autoridad.

Cuando elija los colores para el diseño de su sitio web multilingüe, asegúrese de buscar en Google el simbolismo asociado a los colores que piensa utilizar.

9. Fechas y otros formatos

No todos los países utilizan el mismo formato de fecha, ni siquiera en inglés. Por ejemplo, en el Reino Unido y Europa es habitual que el formato de la fecha sea día-mes-año, mientras que en Estados Unidos es mes-día-año.

Es posible que también tenga que traducir unidades de medida, lo que ayuda al SEO, dependiendo de su público objetivo. Mientras que el 90 % del mundo usa el sistema métrico, los Estados Unidos, Liberia y Birmania siguen utilizando el sistema imperial de pesos y medidas.

Elegir el plugin de traducción de WordPress adecuado para su diseño

Los plugins de traducción de WordPress vienen en todas las formas y tamaños, y la forma en que funcionan con su diseño particular varía ampliamente. Una solución que garantiza una integración perfecta con su sitio web multilingüe es Weglot.

Incluso puede utilizar el editor visual de Weglot para traducir su contenido en el front-end de su sitio y a través de subdominios para que pueda ver cómo se ve en el contexto del diseño de su sitio y el diseño, similar a Google Translate.

Con Weglot, el diseño y la ubicación del selector de idiomas son 100 % personalizables. El botón predeterminado ha sido diseñado para adaptarse a cualquier sitio, pero también puede modificarlo mediante un CSS personalizado para utilizar el formato que desee.

Además, Weglot es compatible con los principios de diseño expuestos en este post, entre ellos:

• El uso de una plantilla global para una imagen de marca coherente
• Opciones de cambio de idioma fáciles de encontrar
• Posibilidad de que los visitantes elijan su idioma preferido
• Codificación automática UTF
• Soporte de idiomas RTL

Echemos un vistazo a la característica más importante relacionada con el diseño que ofrece Weglot: personalizar el selector de idiomas.

Personalice las opciones de cambio de idioma de su sitio web con Weglot

Después de instalar el plugin de Weglot en su sitio web multilingüe de WordPress y realizar la configuración, se le pedirá que introduzca su clave API, su idioma predeterminado y el idioma al que desea traducir su contenido, como Google Translate.

Si aún no dispone de una cuenta Weglot, deberá crear una para obtener su clave API.

Una vez guardados los cambios, actualice el front-end de su nuevo sitio web multilingüe y verá un nuevo selector de idiomas en la esquina inferior derecha. Cuando haga clic en él, se expandirá para mostrar los idiomas disponibles, lo que le permitirá visualizar su traducción preferida.

Para empezar a hacer personalizaciones básicas, vaya a Weglot > Diseño del botón de idioma (Opcional). En esta pantalla, puede elegir:

• Usar o no un menú desplegable
• Usar o no banderas
• Tipos de banderas
• Mostrar el nombre de los idiomas
• Mostrar únicamente el código de los idiomas

La sección Anular CSS es donde puede aplicar reglas CSS para dar estilo a la apariencia del conmutador de idiomas en su sitio web multilingüe. Por ejemplo, usted podría:

• Eliminar la flecha del botón
• Cambiar el color del fondo
• Añadir una barra de desplazamiento
• Eliminar el borde
• Añadir relleno

Weglot ofrece algunos ejemplos en este artículo sobre cómo personalizar el diseño de los botones de idioma.

Al desplazarse hacia abajo en la pantalla de configuración de Weglot, encontrará instrucciones sobre cómo colocar el selector de idiomas:

• En el menú. Vaya a Apariencia -> Menús y arrastre y suelte el enlace Weglot Translate Custom donde desee.
• Como widget. Vaya a Apariencia -> Widgets y arrastre y suelte el widget Weglot Translate donde desee.
• Con un shortcode. Utilice el shortcode de Weglot [ weglot_switcher ] (sin los espacios) para colocar su conmutador de idiomas donde desee.
• In the source code. You can add the code <div id=”weglot_here”></div> wherever you want in the source code of your HTML page.

Para mostrarte cómo se puede personalizar el conmutador de idiomas en un sitio web multilingüe (ya sea WordPress, Shopify o cualquier otro tipo de sitio web), puedes ver a continuación cómo Patyka muestra el conmutador de idiomas en la esquina superior izquierda de la página.

Los idiomas se muestran con sus nombres, y cuando hace clic en el selector y selecciona un idioma, actualiza el contenido de la página traduciéndolo al idioma elegido.

Estudio de caso: Maestrooo usa Weglot

Fundada en 2013, Maestrooo es una agencia de desarrollo web con sede en Francia que cuenta con From Future y Patyka entre sus clientes. Maestrooo gestiona actualmente la mayoría de los clientes de Shopify Plus en Francia.

Maestrooo buscaba una solución web multilingüe sólida y fiable que pudiera adaptarse fácilmente a las necesidades de sus clientes. Después de probar muchas soluciones y descubrir que tenían problemas con el SEO o la gestión del hreflang, el equipo descubrió Weglot.

Weglot traduce todo el contenido de los sitios web de los clientes de Maestrooo, ya sea contenido dinámico, contenido generado por otras aplicaciones o incluso el proceso de pago, sin afectar al diseño de su sitio web multilingüe.

Además de diseñar sitios web personalizados para los clientes, Maestrooo también desarrolla los temas oficiales para la tienda temática de Shopify. Mientras que otras soluciones de sitios web multilingües suelen romper el formato de los temas de Maestrooo, Weglot ofrece una solución de traducción que funciona siempre.

Cada año, Maestrooo ayuda a entre 8000 y 12 000 clientes a iniciarse en Shopify, utilizando Weglot para su sitio web multilingüe.

Optimización cultural completa con un diseño localizado

Cada uno de los principios de diseño que hemos explorado en este artículo le pondrá en el buen camino para crear un sitio web multilingüe que tenga un aspecto estupendo y ofrezca una experiencia de usuario agradable.

Para proporcionar a los visitantes y clientes de su sitio web una experiencia excepcional en su lengua materna, también vale la pena asegurarse de mirar más allá de su sitio web multilingüe. Considere traducir sus materiales de marketing y asistencia al cliente.

Tenga en cuenta, asimismo, la velocidad y el rendimiento de su sitio web multilingüe. En algunos países que no tienen la suerte de contar con un Internet de alta velocidad, la descarga de grandes paquetes de idiomas dificulta el acceso de los visitantes a su contenido.

Con el plugin de traducción de sitios web multilingües adecuado y un diseño del sitio que ofrezca opciones de traducción fáciles de usar, estará ayudando a los clientes con una interfaz de usuario y una experiencia de usuario visualmente atractivas en su idioma preferido.