En esta publicación
Si estás creando un sitio web multilingüe, hay algunas prácticas recomendadas de diseño web multilingüe que querrás seguir para asegurarte de que estás creando una gran experiencia para los visitantes en todos los idiomas.
¿Pues cuáles son esas mejores prácticas importantes? Bueno, ¡de eso trata prácticamente toda esta publicación!
A continuación, detallaremos ocho prácticas recomendadas para el diseño de sitios web multilingües que debe tener en cuenta al configurar un sitio web multilingüe.
Estos consejos funcionarán sin importar cómo estés haciendo que tu sitio web sea multilingüe. Sin embargo, si estás usando WordPress, usar el complemento multilingüe TranslatePress te da una ventaja en lo que respecta al diseño porque puedes gestionar todas tus traducciones desde una interfaz visual. ¡Más detalles sobre eso en la publicación!
Sin más preámbulos, profundicemos en nuestros consejos de diseño de sitios web multilingües...
Ocho consejos y mejores prácticas para el diseño de sitios web multilingües
Si quieres triunfar en el desarrollo de tu sitio web multilingüe y garantizar un diseño óptimo, sigue estos ocho consejos y mejores prácticas.
1. Coloque su selector de idioma en un lugar destacado
Si ofreces varios idiomas en tu sitio web, debes añadir un selector de idiomas para que los visitantes puedan elegir sus idiomas preferidos.
Debido a que este selector de idiomas desempeñará un papel tan importante en las experiencias de los usuarios en su sitio, es fundamental que lo coloque en un lugar fácil de encontrar.
Lo último que querrías es que todo el esfuerzo que pusiste en traducir tu contenido se desperdicie porque alguien abandona tu sitio al ni siquiera darse cuenta de que es multilingüe.
Hay dos lugares “principales” para colocar tu selector de idioma:
- Un selector de idiomas flotante, habitualmente en la esquina inferior derecha. Este selector de idiomas estará siempre visible, incluso cuando el usuario se desplace hacia abajo por la página. Este es un enfoque excelente si deseas que tu selector de idiomas sea imposible de pasar por alto.
- Un selector de idioma en el menú eso forma parte de su menú de navegación principal, normalmente en la sección del encabezado de su sitio. Esto también hace que sea muy fácil de encontrar para los visitantes, ya que la mayoría de ellos mirará su menú de navegación principal en algún momento.
Aquí tienes un ejemplo del selector de idioma flotante predeterminado de TranslatePress:
Algunos sitios web también colocan el selector de idioma en el pie de página o en el área de la barra lateral. Sin embargo, estas áreas pueden pasar más desapercibidas (especialmente el pie de página), por lo que suele ser mejor optar por una de las dos primeras opciones.
Si tú Utiliza TranslatePress para traducir tu sitio web de WordPress, TranslatePress añadirá automáticamente, de forma predeterminada, un selector de idioma flotante en la esquina inferior derecha de tu sitio web.
Sin embargo, puedes cambiarlo fácilmente a otra ubicación, como agregarlo como un elemento de menú utilizando la herramienta de administración de menús integrada de WordPress.
Para obtener más información, consulta nuestro tutorial sobre cómo añadir un selector de idiomas en WordPress.
2. No te limites a usar banderas en tu selector de idiomas
Si seguiste el consejo anterior, los visitantes no deberían tener ningún problema hallazgo su selector de idioma. Ahora, hablemos de optimizar el diseño y la experiencia del selector de idioma en sí.
Para que a los visitantes les resulte fácil elegir sus idiomas preferidos en su selector de idiomas, debe asegurarse de incluir el nombre real del idioma en el selector de idiomas.
Aunque está bien incluir banderas en el selector de idiomas si deseas añadir un elemento visual a la selección de idioma, nunca debes usar solo banderas.
Como el el sitio web “Las banderas no son idiomas” nos recuerda, las banderas son símbolos de países, no de idiomas.
Por ejemplo, supongamos que quieres añadir una bandera para el idioma inglés. ¿Qué bandera deberías usar? ¿Deberías usar la bandera de Inglaterra porque de ahí viene el idioma? ¿La bandera británica porque es más reconocible que la bandera inglesa? ¿La bandera de EE. UU. porque EE. UU. tiene más angloparlantes que el Reino Unido?
¿Qué pasa con la bandera para el hindi? ¿Deberías usar la bandera india porque hay más de 400 millones de hispanohablantes de hindi allí? Eso tiene más o menos sentido... pero entonces, ¿qué haces si también quieres ofrecer bengalí para los 80 millones de hablantes de bengalí en la India? No puedes volver a usar la bandera de la India.
Para eliminar cualquier confusión, es mucho mejor simplemente incluir el nombre del idioma en texto plano, normalmente tal como se escribe en ese idioma. Por ejemplo, usarías “Deutsch” y no “German”, ya que “Deutsch” es el término más relevante para un hispanohablante de alemán.
Si realmente quieres la representación visual de una bandera, puedes entonces añadir la bandera junto a el texto.
Las banderas también pueden ayudar a representar la localización. Por ejemplo, si tienes diferentes versiones de tu sitio para hispanohablantes de España y hispanohablantes de México, añadir la bandera puede ayudar a la gente a elegir su versión local.
Si utilizas TranslatePress, es muy fácil incluir tanto el nombre del idioma como la bandera en tu selector de idiomas. O, si prefieres no utilizarlas, también puedes desactivar fácilmente las banderas de los países.
Puedes acceder a esta configuración yendo a Configuración → TranslatePress → Selector de Idioma Encontrarás las opciones de bandera en la pestaña Diseño sección de cada tipo de conmutador.
Para más consejos, tenemos una guía completa sobre la optimización del botón del selector de idiomas.
3. Utilice una plantilla de sitio web multilingüe para un diseño coherente
Para garantizar una experiencia coherente en los diferentes idiomas de su sitio, deberá asegurarse de utilizar la misma plantilla básica de sitio web multilingüe para cada idioma.
Es decir, no quieres que tu sitio web se vea completamente diferente según el idioma que una persona haya elegido.
Eso es bien para localiza tu sitio. Por ejemplo, podrías cambiar imágenes, iconos, colores secundarios, y así sucesivamente según el idioma del usuario (más sobre esto más adelante).
Pero en cuanto al diseño fundamental de su sitio web, no quiere que cambie, ya que esto puede confundir a los visitantes cuando ven algo completamente diferente después de cambiar de idioma.
Si utilizas WordPress, esto es muy fácil de conseguir. Por ejemplo, cuando utilizas TranslatePress para traducir tu sitio de WordPress, este seguirá utilizando el mismo tema de WordPress independientemente del idioma que elijas.
Pero al mismo tiempo, tienes la opción de entrar y ajustar detalles de diseño más pequeños para la localización, como cambiar imágenes.
4. Comprueba tu diseño en diferentes idiomas para detectar problemas
Cuando creaste el diseño de tu sitio web, probablemente te aseguraste de que todo se viera justo a tiempo usando texto en tu idioma original.
Por ejemplo, tal vez pasaste por unas cuantas rondas de edición solo para asegurarte de que el titular de tu página principal ocupara una sola línea en dispositivos de escritorio.
Desafortunadamente, cuando traduces tu sitio web a un nuevo idioma, todo ese cuidadoso trabajo que dedicaste a optimizar el espaciado en tu diseño podría cambiar.
El texto traducido puede ser más largo o más corto que el original, y ambos casos pueden tener efectos incómodos en el espaciado y el diseño de su sitio.
Para tener esto en cuenta, querrás revisar tu diseño en diferentes idiomas y ajustar las cosas si es necesario.
Para la forma más fácil de lograr esto, puedes usar una herramienta de traducción que te brinde una vista previa visual.
Por ejemplo, si tú utiliza TranslatePress para traducir tu sitio, podrás gestionar todas tus traducciones desde una interfaz visual que te ofrece una vista previa en vivo de exactamente cómo se verá tu sitio para los visitantes en diferentes idiomas:
Esto te permite hacer ajustes fácilmente según sea necesario para crear el diseño perfecto sin importar en qué idioma esté navegando una persona.
5. Comprobar la compatibilidad de fuentes y los problemas de codificación
Otro detalle de diseño que querrás verificar dos veces son los posibles problemas con la compatibilidad o codificación de tus fuentes.
Si todos tus idiomas utilizan el alfabeto latino, es poco probable que tengas algún problema. Sin embargo, una vez que pasas de eso, es importante asegurarte de que tu fuente sea compatible con todos los idiomas de tu sitio.
Por ejemplo, no todas las fuentes admiten el alfabeto cirílico, lo que puede ser un problema si estás traduciendo tu contenido a cualquier idioma eslavo (como el ruso).
Puedes encontrar una serie de herramientas útiles que te permiten comprobar la compatibilidad de un archivo de fuente. Aquí tienes algunas buenas opciones:
- Underware.nl – utiliza un mapa para mostrarte la compatibilidad de tu tipografía. Esto no es perfecto porque, como comentamos antes, los países no son idiomas. Pero aun así te da una idea bastante buena de la cobertura de una tipografía de un solo vistazo. Debajo de eso, puedes obtener una visión mucho más detallada de su cobertura.
- Verificador de conjunto de caracteres alfabéticos – una opción más compleja y configurable que te permite verificar idiomas específicos.
Por ejemplo, aquí están los resultados para la popular fuente Roboto (en negrita) de la herramienta Underware.nl:
Algunos mercados de fuentes también te ofrecerán herramientas para previsualizar/descargar fuentes en diferentes idiomas. Por ejemplo, Google Fonts te permite elegir un idioma para ver fuentes que admiten ese idioma (y ver texto de vista previa en ese idioma):
Por último, también debes usar la codificación UTF-8, lo que ayudará a garantizar que los caracteres especiales de un idioma se muestren pase lo que pase.
Si estás usando WordPress, debería usar automáticamente la codificación UTF-8 sin requerir ninguna acción por tu parte. Sin embargo, para sitios web creados a medida, es posible que debas especificar UTF-8 manualmente.
6. Ajustar imágenes e iconos para la localización
La localización de sitios web es una práctica recomendada importante en el diseño de sitios web multilingües para garantizar una experiencia optimizada a los visitantes de diferentes ubicaciones.
Mientras que la traducción consiste en traducir su contenido al nuevo idioma, la localización trata de actualizar otros detalles de diseño para que coincidan.
Por ejemplo, supongamos que tienes una página en la que quieres mostrar un monumento famoso en cada país. Para la versión en inglés/EE. UU. de la página, podrías tener la Estatua de la Libertad.
Sin embargo, si tú tradujo esa página al francés, no tendría mucho sentido conservar esa misma imagen. En su lugar, podrías cambiarla por la Torre Eiffel. Esto crearía una experiencia más “local” para los visitantes franceses.
Más allá de las imágenes, es posible que quieras adaptar otros elementos visuales, como los iconos que utiliza tu sitio.
Básicamente, piensa en todos los elementos visuales de tu sitio y en si podría crear una mejor experiencia si cambiaras esos elementos en función del idioma del usuario.
Si utilizas TranslatePress, así es como puedes traducir imágenes y otros elementos visuales.
7. Ajustar formatos si es necesario (fecha, hora, etc.)
Para otra parte importante de la localización del diseño web, también querrás ajustar el formato de varios contenidos de tu sitio, como fechas, horas y demás.
El ejemplo más común serían los diferentes formatos de fecha, por ejemplo. mes/día/año vs /día/mes/año.
Algunos idiomas también pueden utilizar diferentes formatos de hora, por ejemplo, un reloj de 12 horas frente a un reloj de 24 horas.
Si utilizas alguno de estos formatos en tu diseño, querrás actualizarlos según el idioma del usuario.
8. Ajustar para idiomas de derecha a izquierda si es necesario
Este último consejo de diseño de sitios web multilingües no se aplicará a todos los sitios web. Sin embargo, si deseas ofrecer tu sitio en idiomas de derecha a izquierda además de en idiomas de izquierda a derecha, eso obviamente requerirá algunos ajustes de diseño.
Aquí hay algunos ajustes de diseño comunes que deberá realizar para tener en cuenta los idiomas de derecha a izquierda:
- Alinear el texto a la derecha en lugar de a la izquierda.
- Duplicando algunos iconos cuando sea necesario (solo si el significado del icono cambia según su dirección).
- Actualizando las imágenes para que se lean de derecha a izquierda si es necesario.
- Cambiando los campos del formulario y la alineación.
- Cambiando el diseño de la cabecera (por ejemplo, colocar el logotipo en el lado derecho en lugar del izquierdo, como es habitual en los idiomas de izquierda a derecha).
- Alineando las migas de pan a la derecha en lugar de a la izquierda.
Básicamente, querrás pensar en reflejar muchos de los elementos de tu sitio para cambiarlos de alineación izquierda a alineación derecha.
Crea el diseño de sitio web multilingüe perfecto hoy mismo
Crear un sitio web multilingüe es una excelente manera de ofrecer una mejor experiencia de usuario a los visitantes multilingües y conectar con más visitantes en primer lugar gracias a SEO multilingüe.
Sin embargo, si desea aprovechar al máximo sus esfuerzos de traducción, hay algunas prácticas recomendadas importantes para sitios web multilingües que querrá seguir en lo que respecta al diseño.
La implementación de estas prácticas garantizará que sus visitantes tengan una gran experiencia en su sitio, sin importar en qué idioma estén navegando.
Si has creado tu sitio con WordPress, puedes Utiliza el complemento gratuito TranslatePress para crear un sitio web multilingüe que cumpla con todas estas mejores prácticas. No solo te proporciona todas las herramientas que necesitas para traducir y localizar completamente tu sitio, sino que también utiliza una interfaz visual para que puedas conectar fácilmente el diseño de tu sitio web con tus traducciones.
Si quieres empezar, consulta nuestra guía sobre Cómo hacer un sitio web multilingüe en WordPress.
Si tienes una tienda de WooCommerce, también tenemos una guía sobre cómo crear una tienda WooCommerce multilingüe.
TranslatePress Multilingüe
¿Todavía tienes alguna pregunta sobre el diseño de sitios web multilingües o las mejores prácticas para sitios web multilingües? ¡Háznoslo saber en los comentarios!
Si encontraste útil esta publicación, por favor visita nuestro Canal de YouTube, donde subimos constantemente tutoriales en video cortos y fáciles de seguir. También puedes seguirnos en Facebook y Twitter ser el primero en enterarte cada vez que publicamos.
¡Gracias! Es una descripción informativa a la vez que sencilla. Como parte de Contenteam, los chicos que localizan sitios web, quiero añadir que toda la consideración tenida en cuenta para la traducción y el diseño siempre se compensa. Y sí, el problema con ese indicador de idioma: para mí parece lógico colocarlo arriba en la esquina. Y aseguraros de que funciona, ya que a veces es imposible desplegarlo.