Diseño web multilingüe: 9 consejos para crear una web en varios idiomas

En un mundo cada vez más conectado, los sitios web multilingües son cada vez más comunes. ¿Pero cómo puedes crearlos? Es un asunto un poco más complejo de lo que puedas creer, sobre todo si te paras a pensar en los cambios que tendrás que hacer en el diseño de tu sitio web.

El aspecto fundamental es sencillo: con Weglot, puedes añadir diferentes idiomas a tu web en menos de 5 minutos. Pero luego tienes que pensar dónde vas a colocar el selector de idioma, cómo ajustar los cambios en el diseño cuando un usuario cambia del inglés a un idioma que se lee de derecha a izquierda, y utilizar colores, imágenes e iconos que sean culturalmente apropiados. 

En esta guía echaremos un vistazo a algunas de las consideraciones relacionadas con el diseño más importantes para ayudarte a planificar un sitio web multilingüe que siga las mejores prácticas.

1. Utiliza plantillas internacionales para mantener la coherencia de tu marca

Cuando alguien entra en tu web multilingüe, quieres que tenga una experiencia de usuario uniforme, independientemente de la versión lingüística de tu sitio web en la que entre. Esto significa que los visitantes indios que visiten tu sitio en inglés deben percibir la misma marca y el mismo diseño que en la versión hindi.

No puedes impedir que los visitantes bilingües o multilingües vean versiones diferentes de tu web multilingüe, pero puedes asegurarte de que vean la misma marca, diseño y elementos de diseño web cuando cambien de idioma por defecto.

Si utilizas un sistema de gestión de contenidos, como WordPress, crear un sitio web multilingüe coherente con Weglot es fácil. Weglot se integra perfectamente con el tema de tu creador de sitios web y traduce automáticamente tu contenido. También se integra con otros elementos importantes de tu sitio web, como los plugins de comercio electrónico, lo que significa que no hay ningún motivo para tener temas o diseños diferentes para los distintos idiomas que añadas a tu sitio web multilingüe. 

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

... y luego vas a la web japonesa, observarás que tanto el diseño como la identidad de la marca son coherentes en ambos idiomas.

Contar con un diseño que se pueda reconocer al instante no solo refuerza la imagen de tu marca, sino que te ayudará con las futuras actualizaciones de tu sitio web multilingüe y reducirá los quebraderos de cabeza cuando los distintos idiomas requieran cambios en la interfaz de usuario o en la experiencia de usuario.

2. Haz que el selector de idioma sea realmente fácil de encontrar

Coloca el selector para cambiar de idioma en un lugar destacado de tu página de inicio y de todas las otras páginas de tu web. Muchos sitios web multilingües tienen el selector de idioma en la cabecera o en el pie de página.

Sea cual sea la opción que elijas para tu sitio multilingüe, asegúrate de que sea realmente fácil de encontrar.

También querrás asegurarte de que las opciones para cambiar de idioma sean totalmente claras. Lo ideal es utilizar el nombre del idioma en el idioma en cuestión, por ejemplo, utiliza “Deutsch” en lugar de “alemán” y “日本語” en lugar de “japonés”.

Asana, por ejemplo, utiliza un selector de idioma con un menú despegable que muestra los nombres de los distintos idiomas disponibles:

Lo que quieres es que las personas que visiten tu sitio web multilingüe se sientan bienvenidas, independientemente del idioma que hablen. Colocar el selector de idioma en un lugar fácil de encontrar te ayudará a conseguirlo.

3. Deja que los visitantes elijan su idioma preferido

Podrías pensar que dejar que los usuarios elijan su idioma preferido es obvio, pero muchos sitios multilingües hacen que sea realmente difícil elegir un idioma. En lugar de eso, obligan a los usuarios a cambiar de región.

Las grandes marcas son las que más utilizan esta mala práctica. A menudo encontrarás muchas que te obligan a cambiar la región en su web multilingüe (por ejemplo, cambiar de www.adobe.com a www.adobe.com/kr/), cuando solo quieres cambiar el idioma por defecto.

Que alguien hable hindi no significa que quiera cambiar a esa región para navegar por 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 la web en hindi? No les pongas una barrera para comprar en tu sitio web multilingüe: ayúdales a acceder a tu contenido en su idioma preferido.

Uber es un excelente ejemplo de una empresa que realmente permite a los visitantes elegir su idioma preferido, mostrando las opciones de cambio de idioma en el pie de página:

Cuando haces clic en “inglés”, aparece una ventana emergente que te permite elegir tu idioma preferido entre el inglés y el francés:

Nos gusta el modo de cambiar de idioma en Uber porque los visitantes seleccionan su idioma preferido sin tener que cambiar de región.

Si quieres mejorar aún más la experiencia de usuario de tus visitantes, considera la posibilidad de "recordar" su idioma predeterminado para que, la próxima vez que visiten tu sitio web multilingüe, se cargue automáticamente en su idioma nativo.

Detección automática de idiomas

Muchos sitios web multilingües detectan el idioma nativo del navegador web para determinar automáticamente el idioma principal de 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 pueden aterrizar en la versión “equivocada” de tu sitio web multilingüe.

Un visitante puede estar físicamente en España y tu sitio web multilingüe lo detectará automáticamente y mostrará el español, pero puede ser un hablante nativo de inglés que no sepa español.

Por tanto, si vas a autodetectar las ubicaciones, proporciona también un selector de idioma para que los visitantes tengan la opción de elegir diferentes idiomas.

Weglot ofrece la opción de redirigir automáticamente a tus visitantes según el idioma de su navegador. Comprueba Weglot en acción en tu sitio web con la prueba gratuita de 14 días.

Banderas vs. nombres de idiomas

Las banderas se utilizan habitualmente para indicar una lengua, pero hay algunas cuestiones contextuales que deberás tener en cuenta:

• Las banderas representan países, no idiomas.
• Un país puede tener más de un idioma oficial.
• Un idioma puede hablarse en más de un país.
• Los visitantes pueden no reconocer una bandera (por el tamaño del icono) o confundirse con banderas similares.

En definitiva, lo que quieres es ofrecer opciones para cambiar de idioma que sean fáciles de entender para cualquier persona.

4. Considera la expansión del texto

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

Algunas lenguas escritas son más concisas que otras. Las lenguas como el japonés y el chino utilizarán uno o dos caracteres para transmitir una determinada información, mientras que en otras lenguas necesitarías varias palabras.

Las lenguas como el español y el inglés tienen muchas palabras, y a veces necesitan hasta un 30 % más de espacio que otros idiomas.

La guía del W3C sobre el tamaño del texto en la traducción, que recomiendo muchísimo que leas íntegramente, ofrece algunos consejos estupendos.

El W3C hace hincapié en por qué es fundamental que las herramientas de traducción automática tengan elementos de la interfaz de usuario que se adapten, como botones, campos de entrada y texto descriptivo.

Por ejemplo, cuando Flickr se tradujo a diferentes idiomas, los diseñadores tuvieron que tener en cuenta el texto que había debajo de las fotos, que indicaba el número de visitas.

La siguiente tabla muestra las longitudes comparadas de la palabra “vista” en diferentes idiomas en relación con el idioma original inglés:

¡Sí, lo has leído bien, una expansión del 300 % del inglés al italiano!

Lo que hay que tener en cuenta aquí es que el texto normalmente se expandirá o contraerá en anchura, así que asegúrate de que tu sitio web multilingüe está preparado para este cambio. Recuerda también que cuanto más pequeño sea el texto original, más extensa podría ser la traducción. Si ves que el espacio es un problema, prueba con una traducción diferente y menos literal, o cambia el tamaño de la fuente en función del nuevo idioma.

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

5. Ten en cuenta la compatibilidad de las fuentes web y la codificación

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

Así es como debes aplicar una codificación UTF en la cabecera de tus páginas:

Las fuentes web que utilices deberán ser compatibles con todos los idiomas distintos del inglés que haya en tu sitio multilingüe de WordPress, especialmente con los idiomas no latinos. Esto significa que las fuentes que elijas deben contener todos los caracteres y glifos necesarios.

Algunas fuentes pueden ser compatibles con los alfabetos latinos, pero no con las lenguas de derecha a izquierda ni con las lenguas que utilizan el alfabeto cirílico, así que comprueba que los idiomas que necesitas están incluidos antes de decidirte por una fuente.

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

Un solo idioma puede tener cientos de caracteres, lo que puede hacer que los archivos de las fuentes tengan un tamaño enorme: otra cosa a tener en cuenta al elegir las fuentes para tu sitio web multilingüe.

6. Piensa en los idiomas de derecha a izquierda

Diseñar páginas para idiomas de derecha a izquierda puede plantear algunos retos. Como el programador de SteelKiwi, Robert Dodis, explica en Smashing Magazine, diseñar para los idiomas de derecha a izquierda significa “darle la vuelta a la interfaz”.

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

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

¡Observa cómo incluso la barra de desplazamiento cambia de posición!

Es necesario que tengas en cuenta la posibilidad de duplicar el diseño si estás diseñando tanto para idiomas de izquierda a derecha como de derecha a izquierda.

Te recomendamos encarecidamente que leas el artículo de Robert en Smashing Magazine para obtener un resumen detallado de cómo diseñar para RTL. No queremos reinventar la rueda aquí, así que lee su tutorial. Queremos mostrarte cómo Weglot admite idiomas RTL y puede facilitar el proceso de traducción de tu sitio web multilingüe.

El servicio de traducción de Weglot es compatible con los idiomas de derecha a izquierda y, con las reglas CSS, puedes adaptar el diseño de tu sitio multilingüe para que se adapte a ellos. Estos son algunos de los idiomas de derecha a izquierda disponibles:

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

Después de añadir un idioma de derecha a izquierda a tu sitio multilingüe con Weglot, puedes personalizar cómo se muestra aplicando reglas CSS a tu diseño. En el Panel de administración de WordPress, dirígete a Weglot > Diseño del selector de idioma (Opcional), y desplázate hasta Anular CSS. Luego añade las reglas CSS que desees en el área de texto: puede que quieras cambiar la fuente, el tamaño, la altura de la línea y otros elementos para definir el estilo del idioma principal y que se ajuste a tu diseño. 

¡Eso es todo lo que tienes que hacer para añadir y definir el estilo de los idiomas de derecha a izquierda con Weglot! Puedes obtener más información sobre la compatibilidad de Weglot con los idiomas de derecha a izquierda en la documentación .

7. Utiliza imágenes e iconos culturalmente apropiados

Las imágenes, los iconos y otros gráficos son elementos esenciales de cualquier página web. Pero los elementos visuales, por su propia naturaleza, son subjetivos y pueden interpretarse de distintas 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 visitas la página japonesa de la empresa, aparece la imagen de una mujer japonesa:

Los elementos visuales también pueden ofender. Las imágenes que pueden parecer inocentes para el público occidental pueden ser tabú en otro país. Por ejemplo, las imágenes que representan 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 tendrás que tener en cuenta los elementos pequeños, como los iconos, y lo que significan para las personas de determinados lugares que visiten tu sitio web multilingüe. Por ejemplo, un 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 muestra un globo terráqueo, pero no representa un país ni una región concretos, por lo que es más apropiado para utilizarlo en un sitio web multilingüe.

Será necesario que revises las imágenes y otros elementos gráficos, teniendo en cuenta cualquier tipo de sensibilidad regional y cultural.

Evita utilizar imágenes y otros gráficos que tengan texto incrustado, ya que no podrás traducir el texto incrustado con herramientas como Weglot, así que evítalo por completo.

8. Utiliza colores que sean culturalmente apropiados

La forma en que las distintas culturas perciben 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. En las culturas asiáticas, es un color muy importante, que simboliza la buena suerte, la prosperidad, la celebración y una larga vida. Pero, por el contrario, en algunos países africanos, el rojo se asocia con la muerte y la agresividad.

El azul se considera la elección de color más segura y globalmente aceptada para el diseño, ya que tiene muchas asociaciones positivas. Es un color tranquilizante, que se considera relajante y pacífico, 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 los bancos, porque representa la confianza y la autoridad.

Cuando elijas los colores para el diseño de tu sitio web multilingüe, asegúrate de buscar en Google el simbolismo asociado a los colores que piensas 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 utilizar el formato día-mes-año, mientras que en EE.UU. se utiliza el formato mes-día-año.

También puede que necesites traducir las unidades de medida, lo que ayuda con el SEO, dependiendo de tu público objetivo. Mientras que el 90 % del mundo utiliza el sistema métrico decimal, EE.UU., Liberia y Myanmar siguen utilizando el sistema imperial de pesos y medidas.

Cómo elegir el plugin de traducción para WordPress correcto para tu diseño

Hay plugins de traducción para WordPress de todas las formas y colores, y el modo en que funcionan con tu diseño particular puede variar mucho. Una solución que garantiza una integración perfecta con tu sitio web multilingüe es Weglot.

Incluso puedes utilizar el Editor visual de Weglot para traducir tu contenido en la interfaz de usuario de tu sitio web y a través de los subdominios, de modo que puedas ver cómo queda la traducción en el contexto del diseño y la disposición de tu web, de forma similar a Google Translate.

Con Weglot, el diseño y la ubicación de tu selector de idioma son 100 % personalizables. El botón predeterminado se ha diseñado para adaptarse a cualquier web, pero también puedes personalizarlo mediante el uso de CSS para utilizar el formato que desees.

Además, Weglot respeta los principios relativos al diseño descritos en este artículo, entre los que se incluyen:

• Utilizar una plantilla global para que la marca sea coherente.
• Proporcionar opciones de cambio de idioma fáciles de encontrar.
• Permitir a los visitantes elegir su idioma preferido.
• Aplicar una codificación UTF automática.
• Tener compatibilidad con los idiomas de derecha a izquierda.

Echemos un vistazo a la función más importante que ofrece Weglot relacionada con el diseño: la personalización de tu selector de idioma.

Cómo personalizar las opciones de cambio de idioma de tu sitio web con Weglot

Después de instalar el plugin de Weglot en tu sitio web multilingüe de WordPress y configurarlo, tendrás que introducir tu clave API, tu idioma predeterminado y el idioma al que deseas traducir tu contenido, como si se tratara de Google Translate.

Si aún no tienes una cuenta con Weglot, tan solo necesitas crear una para obtener tu clave API.

Una vez guardados los cambios, actualiza la interfaz de usuario de tu sitio web multilingüe y podrás ver un nuevo selector de idioma en la esquina inferior derecha. Cuando hagas clic sobre él, se expandirá para mostrar los idiomas disponibles y podrás elegir la traducción que prefieras. 

Para empezar a personalizar las opciones básicas, dirígete a Weglot > Diseño del selector de idioma (Opcional). En esta pantalla, puedes elegir:

• El uso de una lista desplegable;
• El uso de banderas;
• Los tipos de banderas;
• El uso del nombre de los idiomas;
• El uso solo del código de los idiomas.

En la sección Anular CSS puedes usar reglas CSS para modificar el estilo del selector de idioma en tu sitio web multilingüe. Por ejemplo, puedes:

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

Weglot ofrece algunos ejemplos acerca de cómo personalizar el diseño del selector de idioma en este artículo.

Cuando navegues por la pantalla de configuración de Weglot, encontrarás instrucciones sobre cómo colocar el selector de idioma:

• En el menú. Dirígete a Apariencia -> Menús y arrastra y suelta el enlace Weglot Translate Custom donde quieras.
• <b>Como un widget</b>. Dirígete a Apariencia -> Widgets y arrastra y suelta el widget Weglot Translate donde quieras.
• Con un fragmento de código. Utiliza el fragmento de código de Weglot [ weglot_switcher ] (sin los espacios) para colocar tu selector de idioma donde quieras.
• En el código fuente. Puedes añadir el siguiente código donde quieras en el código fuente de tu página HTML: 

<div id=”weglot_here”></div>

Para ver cómo se puede personalizar el selector de idioma en un sitio web multilingüe (ya sea de WordPress, de Shopify o con cualquier otra tecnología), echa un vistazo al siguiente selector de idioma de la página de Patyka, ubicado en la esquina superior izquierda.

Los idiomas se muestran con sus nombres, y cuando haces clic en el selector y eliges un idioma, se actualiza el contenido de la página con la traducción en el idioma seleccionado.

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 también gestiona actualmente la mayoría de los clientes de Shopify Plus en Francia.

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

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

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

Maestrooo ayuda a entre 8.000 y 12.000 clientes a empezar con Shopify cada año utilizando Weglot para su sitio web multilingüe.

Apuesta por la optimización cultural completa con un diseño localizado

Cada uno de los principios de diseño que hemos explorado en este artículo te ayudará a crear un sitio web multilingüe con un aspecto atractivo y una experiencia de usuario excelente.

Para ofrecer a tus visitantes y clientes una experiencia excepcional en su idioma nativo, también merece la pena que vayas más allá de tu sitio web multilingüe. Considera la posibilidad de traducir tus materiales de marketing y de atención al cliente.

Ten en cuenta también la velocidad y el rendimiento de tu sitio web multilingüe. En algunos países que no tienen la suerte de contar con velocidades de Internet rápidas, la descarga de grandes paquetes de idiomas dificulta el acceso de los visitantes a tu contenido.

Con el plugin de traducción multilingüe adecuado y un diseño del sitio que ofrezca opciones de traducción fáciles de usar, ayudarás a tus clientes con una interfaz de usuario y una experiencia de usuario visualmente atractivas en su idioma preferido. Prueba Weglot gratis con nuestra prueba sin compromiso de 14 días, o haz un tour del producto ¡regístrate gratis!