Diseño de sitio web multilingüe: 7 patrones y reglas de diseño

Resume este post con: 11 min de lectura

ChatGPT Perplejidad Grok Inteligencia artificial de Google

Un buen diseño de sitio web multilingüe hace tres cosas: coloca un selector de idioma en el mismo lugar visible en cada página (generalmente en la parte superior derecha del encabezado, repetido en el pie de página), etiqueta cada idioma con su propio nombre en lugar de con una bandera y deja espacio para el texto traducido, que puede ser dos o tres veces más largo que el inglés en etiquetas cortas. Todo lo demás, desde la navegación hasta las imágenes de los héroes, debe construirse de manera que sobreviva a palabras más largas, otros guiones y lecturas de derecha a izquierda.

Conclusiones clave

• Coloque el conmutador en el encabezado de cada página y repítalo en el pie de página. Los usuarios lo buscan arriba a la derecha en el escritorio y en el menú del móvil.
• Escribe los nombres de los idiomas en su propio idioma (“Deutsch”, “Español”, “日本語”). La W3C recomienda no usar banderas para los idiomas.
• Sugiere un idioma, no lo fuerces. Google desaconseja redirigir automáticamente a los usuarios en función de lo que usted cree que es su idioma.
• Diseño para la expansión: las directrices de IBM, citadas por el W3C, sitúan el crecimiento medio de cadenas en inglés de hasta 10 caracteres entre un 200% y un 300% en los idiomas europeos.
• Mantenga cada página en un idioma, proporcione a cada idioma su propia URL y mantenga el texto fuera de las imágenes.

Siete patrones de diseño para sitios multilingües

Éstos son los patrones que funcionan en la práctica. La mayoría de los sitios combinan dos o tres de ellos.

1. Conmutador de encabezado, arriba a la derecha

El diseño más común coloca un conmutador compacto al final de la navegación principal. Los compradores y lectores miran allí porque ahí es donde se encuentran los controles de cuenta, carrito y búsqueda. Manténgalo exactamente en el mismo lugar en cada plantilla, incluidas las páginas de pago, de ayuda y publicaciones de blog. La orientación del W3C es que “siempre es mejor agregar enlaces a versiones en idiomas alternativos y hacerlo en cada página”, y que “cuanto más fácil sea descubrir esos enlaces, mejor” (Internacionalización del W3C).

Buenos detalles:

• Muestre el idioma actual como etiqueta del botón (“inglés ▾”), no solo un ícono de globo genérico.
• Abra la lista al hacer clic, no solo al pasar el cursor, por lo que funciona en pantallas táctiles y con un teclado.
• Si tiene más de ocho idiomas, utilice una lista desplazable o un panel de búsqueda en lugar de un menú desplegable largo.

2. Conmutador de pie de página como respaldo

Un segundo conmutador en el pie de página capta a las personas que se desplazan hasta la parte inferior buscándolo, que es también donde muchos sitios los han entrenado para buscar. No cuesta nada y reduce las quejas “no encuentro el menú de idiomas”. El pie de página también es un buen lugar para la lista completa cuando el encabezado solo muestra los idiomas más populares.

3. Entrada al menú móvil

En los teléfonos, el encabezado rara vez tiene espacio para un conmutador. Coloque la opción de idioma en la parte superior del menú desplegable, no enterrada en la parte inferior después de veinte enlaces, y considere un pequeño código de idioma (EN, DE) al lado del ícono del menú para que el idioma actual permanezca visible.

4. Banner de sugerencias en lugar de redirección

Es tentador detectar el idioma del navegador del visitante y enviarlo directamente a la versión correspondiente. Google advierte contra esto: “Evite redirigir automáticamente a los usuarios de una versión de idioma de un sitio a una versión de idioma diferente,” porque las redirecciones basadas en una suposición “podrían impedir que los usuarios (y los motores de búsqueda) vean todas las versiones de su sitio” (Centro de búsqueda de Google). Googlebot generalmente rastrea desde los EE. UU. y no envía ningún mensaje Accept-Language encabezado, por lo que una redirección forzada puede ocultar sus traducciones de la búsqueda.

Una alternativa educada es una pequeña pancarta en la parte superior de la página, en el idioma sugerido: “Diese Seite ist auch auf Deutsch verfügbar. [Wechseln]”. El visitante elige y la elección es recordada.

5. Página de enlace de idiomas

Algunas marcas se abren con un selector de página completa: elige tu idioma (y a veces tu país) antes de ingresar. Se adapta a sitios donde los idiomas difieren mucho en contenido o precios. La desventaja es un clic adicional para todos, así que úselo solo en la URL raíz, nunca como barrera en enlaces profundos. Si usas uno, apunta hreflang x-default en eso; Google dice que x-default “fue diseñado para páginas selectoras de idiomas” (Centro de búsqueda de Google).

6. Selector de país más idioma

Los minoristas que venden en varios mercados a menudo necesitan dos opciones: dónde se encuentra (para moneda, envío y términos legales) y qué idioma lee. Muéstrelos como dos campos claros o como entradas combinadas como “Canadá (Français)”. Aquí las banderas son aceptables porque representan países, no idiomas. El W3C hace la misma distinción: las banderas pueden ser adecuadas “versiones geográficamente adaptadas de una página”, pero “no son apropiadas para vincular a páginas que son simplemente traducciones”.

7. Enlaces lingüísticos dentro del contenido

Para documentación, centros de ayuda y blogs donde no todos los artículos están traducidos, una pequeña línea en la parte superior de cada artículo traducido (“También disponible en: Español, Français”) les dice a los lectores lo que existe y no promete una traducción que no existe.

Diseñando el propio conmutador

Utilice nombres nativos. Un hablante de persa que se enfrente a una página en inglés no debería tener que buscar “Persian” para salir de ella; busca “فارسی”. La W3C recomienda escribir los enlaces “en el idioma de la página a la que apuntan”, y opcionalmente añadir el idioma de la página actual entre corchetes o en una información sobre herramientas: “français (French)”.

Eliminar banderas para los idiomas. “Algunos países tienen más de un idioma y algunos idiomas se hablan en más de un país”, señala el W3C. Una bandera española para contenido en español parece extraña para los lectores de México, Argentina o Colombia; una bandera estadounidense para inglés hace lo mismo para el Reino Unido, Canadá y Australia.

Marque el idioma actual. Póngalo en negrita, agregue una marca de verificación o muéstrelo como la etiqueta del botón. Los usuarios necesitan saber en qué versión están antes de decidir cambiar.

Mantenlo accesible Utilice un real <button> Para abrir el menú y enlaces reales para cada idioma, agregue lang atributos a cada opción (<a lang="de" hreflang="de" href="/de/">Deutsch</a>) para que los lectores de pantalla pronuncien los nombres correctamente y se aseguren de que se puedan operar con el teclado.

Recuerda la elección. Cuando alguien elige un idioma, manténgalo en él mientras navega. Cada enlace interno del sitio alemán debe apuntar a URL alemanas.

Deje espacio para la expansión del texto

El texto traducido rara vez se adapta al espacio diseñado para el inglés. El artículo del W3C sobre el tamaño del texto cita las tasas de expansión promedio de IBM del inglés a los idiomas europeos (W3C):

Cuanto más corta es la cuerda, peor se pone. Esto afecta exactamente a los elementos que los diseñadores crean: botones, pestañas, elementos del menú, etiquetas de formularios e insignias. El propio ejemplo del W3C: la etiqueta de Flickr para “vistas” se convierte en “visualizzazioni” en italiano, tres veces más larga.

Reglas de diseño que lo absorben:

• No hay anchos fijos en los contenedores de texto. Deje que los botones y pestañas crezcan; establezca min-width en lugar de width.
• Permitir que la navegación se envuelva o colapse. Pruebe el menú principal en un idioma de palabras largas, como alemán o finlandés, y tenga un plan (un menú “Más”, espacios más pequeños o un punto de interrupción de hamburguesa que dependa del contenido, no de un ancho de píxel fijo).
• Evite el texto en una línea por diseño. Los titulares que deben caber en una línea en inglés se romperán en otros idiomas. Déjalos envolver y comprueba que el héroe todavía parezca equilibrado.
• Observa también el espacio vertical. El W3C señala que muchas escrituras no latinas necesitan líneas más altas y que los caracteres chinos, japoneses y coreanos pueden ocupar más espacio horizontal cada uno, incluso cuando hay menos.
• No olvides la contracción. Algunos idiomas salen más cortos, lo que puede dejar espacios en blanco incómodos en los diseños adaptados al inglés.

Planifique diferentes guiones y direcciones

Fuentes. Comprueba que tu fuente web cubra cada script que agregues. Cuando no es así, el navegador vuelve a una fuente del sistema en la mitad de la página, que parece rota. Empareje cada script con una fuente diseñada para él y similar en peso y tamaño.

Idiomas de derecha a izquierda. Se necesitan páginas en árabe, hebreo, persa y urdu dir="rtl", un diseño reflejado y una decisión sobre qué íconos se invierten. Nuestro Guía de diseño RTL Cubre las reglas en detalle.

Imágenes con texto. El texto incorporado en las imágenes no se puede traducir con ninguna herramienta, por lo que conviene mantener el texto en HTML sobre la imagen o producir una versión de la imagen por idioma.

Mantenga cada página en un solo idioma

Google determina el idioma de una página a partir de su contenido visible y recomienda “utilizar un solo idioma para el contenido y la navegación en cada página, y evitar traducciones una al lado de la otra” (Centro de búsqueda de Google). Los diseños que muestran inglés y español en dos columnas, o traducen solo el menú dejando el cuerpo en inglés, confunden tanto a los lectores como a los motores de búsqueda.

Dale a cada idioma su propia URL, como por ejemplo /de/ subcarpetas o de. subdominios y vincula las versiones con hreflang. Google recomienda URL separadas en lugar de cambiar el contenido con cookies o la configuración del navegador. Si estás eligiendo una estructura, mira subdirectorios vs subdominios para SEO multilingüe.

Localiza los detalles que lleva el diseño

Los diseños también contienen datos que cambian según el mercado:

• Fechas y números: 03/04 es el 3 de abril en el Reino Unido y el 4 de marzo en Estados Unidos.
• Moneda y precios: muestra claramente el símbolo o código de la moneda; no insinúes que un precio es local cuando no lo es.
• Direcciones y campos telefónicos: los formularios creados para direcciones estadounidenses (estado, código postal) frustran a todos los demás. Haga que los campos sean opcionales o adáptelos por país.
• Contenido legal y de confianza: los avisos de cookies, las políticas de devolución y los datos de contacto deben coincidir con el mercado al que sirve el idioma.

Cómo encaja ConveyThis en tu diseño

ConveyThis agrega un selector de idioma a su sitio que puede diseñar desde el panel: esquinas redondeadas o cuadradas, su propio fondo, colores flotantes y de texto, y CSS personalizado. De forma predeterminada, enumera los idiomas por sus nombres nativos y se puede mostrar sin banderas; si usa banderas para versiones regionales, puede cambiar la bandera se muestra para un idioma, por ejemplo, para usar una bandera del Reino Unido para inglés. Cada idioma se publica en su propia subcarpeta o URL de subdominio y hreflang se agrega automáticamente.

Si desea guiar a los visitantes hacia su idioma, el configuración automática de redirección utiliza el idioma del navegador del visitante en lugar de su dirección IP y está desactivado a menos que lo habilite. Mantenga el conmutador visible de cualquier manera para que las personas puedan cambiar de opinión. Para comprobar cómo el texto traducido se adapta a su diseño, utilice el editor visual para revisar y acortar las cadenas en su lugar y configurar un glosario de términos que deben mantenerse consistentes. El página de características enumera todo lo disponible y nuestro Ejemplos de diseños de sitios web multilingües muestre cómo otros sitios organizan sus conmutadores.

Preguntas frecuentes

¿Dónde debería ir el selector de idioma en un sitio web?

En el encabezado, generalmente arriba a la derecha, en cada página, con una segunda copia en el pie de página. En dispositivos móviles, colóquelo en la parte superior del menú y mantenga visible el idioma actual junto al ícono del menú.

¿Debo usar banderas en un selector de idioma?

No para idiomas. El W3C recomienda no hacerlo porque muchos países tienen varios idiomas y muchos idiomas se hablan en varios países. Las banderas están bien para elegir un país o una tienda regional.

¿Mi sitio debería redirigir a los visitantes a su idioma automáticamente?

Google desaconseja las redirecciones automáticas basadas en una suposición sobre el idioma del usuario, porque pueden impedir que los usuarios y los motores de búsqueda lleguen a otras versiones. Sugiera el idioma con un banner o recuerde la elección del visitante.

¿Cuánto espacio debo dejar para el texto traducido?

Mucho más para cuerdas cortas que largas. La guía de IBM, citada por el W3C, sitúa la expansión promedio entre el 200% y el 300% para cadenas en inglés de hasta 10 caracteres y alrededor del 130% para cadenas de más de 70 caracteres.

¿Debería un sitio web multilingüe utilizar URL separadas para cada idioma?

Sí. Google recomienda URL diferentes para cada versión de idioma en lugar de cambiar el contenido con cookies o configuraciones del navegador y usar hreflang para conectarlas.

Pruébalo en tu propio diseño

La forma más rápida de ver cómo su diseño se adapta a otros idiomas es traducirlo. Puedes crear una cuenta ConveyThis, agregue un idioma y revise las páginas traducidas con el conmutador instalado.