29/07/2016

Consejos para construir sitios web en múltiples idiomas

Consejos para construir sitios web en múltiples idiomas

Un sitio web multilingüe es aquel donde el mismo contenido se ofrece en varios idiomas diferentes. Esta característica es indispensable cuando nos dirigimos a una audiencia internacional, lo que puede ocurrir, por ejemplo, si desde nuestro sitio web vendemos productos a distintas partes del mundo.

El sitio web de la Organización Mundial de la Salud se ofrece en varios idiomas.

Presentarnos en varios idiomas es todo un desafío. En primer lugar, la sola traducción del contenido puede ser difícil por los siguientes motivos:

  • Debemos contratar a traductores profesionales, que sean capaces de trasladar nuestro texto a distintos idiomas y culturas interpretando correctamente las sutilezas del vocabulario que utilizamos. Esto puede implicar una importante inversión económica, cuyo costo dependerá en buena medida de los idiomas involucrados (en general, una traducción de español a japonés será más costosa que una traducción de español a portugués).
  • Es probable que no solo debamos traducir el texto, sino también imágenes y videos. Estos tipos de contenido exigen competencias adicionales: para traducir una imagen será necesario un trabajo de edición gráfica, y para traducir un video, como mínimo, deberán contratarse actores de doblaje o redactores de subtítulos.
  • Cuando el contenido sea modificado en idioma original, también deberá modificarse en los demás idiomas.

Por otra parte, existen muchas técnicas para implementar versiones en varios idiomas, y elegir la más adecuada a nuestras necesidades no es una decisión fácil.

El requerimiento técnico más importante es que cada página indique en su código fuente el idioma en que está escrita. Hay tres factores a considerar:

  1. Idioma y dialecto. En HTML, se utiliza el atributo global lang para indicar el idioma (ej.: inglés) y, opcionalmente, el dialecto (ej.: británico) predominante en una página. También puede utilizarse para fragmentos particulares dentro de la página (por ejemplo, una frase citada en idioma inglés dentro de un texto escrito en español). En CSS, podemos aplicar distintos estilos según el idioma usando la pseudoclase :lang.
  2. Dirección del texto. En la mayoría de los idiomas se escribe de izquierda a derecha, pero en otros, como el hebreo y el árabe, se escribe de derecha a izquierda. Si este es el caso, la dirección del texto debe indicarse como rtl (right-to-left) en el atributo dir de HTML. CSS cuenta con una propiedad análoga, llamada direction, que ordena el texto según la dirección elegida.
  3. Codificación de caracteres. La codificación de caracteres es un sistema que permite mostrar en pantalla ciertos símbolos (por ejemplo, «á») a partir de una representación interna en bytes. A cada carácter le corresponde un código particular, que varía según el sistema utilizado. Si no especificamos una codificación de caracteres usando el atributo charset de la etiqueta <meta>, es probable que el contenido sea interpretado de manera errónea y muchos caracteres no puedan mostrarse como deseamos. La opción ideal es la codificación UTF-8, que representa con un mínimo de 8 bits los caracteres de la tabla Unicode. Este estándar contiene los símbolos de casi todos los alfabetos que existen en el mundo, permitiéndonos presentar el texto en prácticamente cualquier idioma.

Tanto los motores de búsqueda como los softwares de conversión de texto a voz (que utilizan, por ejemplo, los usuarios no videntes) emplearán estos datos para interpretar mejor el contenido.

Además de cumplir con estos requisitos, podemos respetar algunas buenas prácticas para garantizar la mejor experiencia posible en cualquier idioma.

Traducción

El widget de Google Traductor es una barra que se agrega al tope de la página y le permite al usuario traducirla automáticamente al idioma que desee. Se trata de la opción más barata y fácil en términos de traducción e implementación técnica. Sin embargo, y aunque tienden a mejorar, las traducciones que brinda este tipo de herramientas son de mala calidad y pueden resultar inentendibles. Nada reemplaza a un traductor profesional. Además, la presencia de la barra altera el diseño de la página.

La traducción debe tener en cuenta no solo el cambio de idioma, sino también la posible adaptación de precios, fechas y unidades de medida.

Selector de idiomas

En todo sitio web multilingüe debe haber una lista con enlaces a las versiones en distintos idiomas. Es habitual que en estas listas los idiomas estén identificados con banderas de países, pero esta opción tiene serios problemas. Pensemos en los siguientes casos:

  • El portugués es un idioma popularmente asociado a Brasil, pero es originario de Portugal. ¿Qué bandera deberíamos mostrar? Lo correcto sería usar la bandera de Portugal, pero la de Brasil es más fácil de reconocer para la mayoría de la gente.
  • Si el sitio está orientado principalmente a Argentina, ¿cómo deberíamos indicar el idioma español: con una bandera argentina o con una bandera española? Lo correcto sería utilizar la bandera de España, pero los usuarios argentinos tenderán a buscar una bandera de su país.
  • Si un sitio web se ofrece en «español de España» y en «español de Latinoamérica», ¿con qué bandera podríamos representar este segundo dialecto?
  • Si un usuario belga que hable francés encuentra este idioma asociado a la bandera de Francia, podrá pensar que los productos del sitio solo se venden en ese país, lo cual probablemente sea mentira.

Inevitablemente, mientras más idiomas ofrezcamos, mayor será la cantidad de opciones en la lista. Y las listas con muchos elementos son más difíciles de recorrer con la mirada. Para no agravar este problema, la lista de idiomas debe estar ordenada alfabéticamente. Muchos eligen ordenar los idiomas según su supuesta relevancia, ubicando en los primeros lugares el inglés y el español. Pero este orden (que es necesariamente subjetivo) puede resultar poco intuitivo para la mayoría de los usuarios, especialmente si buscan idiomas que no son tan comunes.

Lo ideal es que los elementos de la lista consistan únicamente en elementos de texto, y que este texto esté escrito en el idioma y el alfabeto que corresponda. Un usuario argentino no esperará encontrar su idioma como Spanish sino como «Español», y un usuario ruso no esperará encontrar su idioma como «Ruso» sino como Русский.

El selector de idioma debe estar en un lugar especialmente visible dentro de la página, que le permita al usuario encontrarlo con facilidad apenas ingresa.

Redirección

Dados los muchos problemas que puede enfrentar el usuario al buscar su idioma en una lista, lo ideal es evitarle ese esfuerzo redirigiéndolo automáticamente a la versión que corresponda. El idioma nativo del usuario puede inferirse a través del encabezado HTTP Accept-Language y de su ubicación geográfica.

La detección automática no es infalible. En casos como los que siguen, el usuario se verá obligado a seleccionar el idioma manualmente:

  • El usuario se encuentra en Francia, pero no habla francés.
  • El usuario solo habla francés, pero circunstancialmente se encuentra utilizando un dispositivo configurado en alemán.
  • El usuario habla francés y se encuentra en Francia, pero quiere acceder a la versión del sitio en alemán para practicar ese idioma.

Diseño

Es probable que debamos adaptar el layout a distintos idiomas. Por ejemplo, en alemán las palabras suelen ser más largas que en español, obligándonos a redefinir el tamaño de distintos controles de interfaz, como los botones.

Tipografía

Debemos asegurarnos de utilizar tipografías que contengan todos los símbolos necesarios para representar los idiomas en que se ofrecerá nuestro sitio web; y que estos símbolos siempre sean legibles. Es probable que debamos utilizar distintos tamaños de fuente dependiendo del idioma. Por ejemplo, en general el idioma japonés requiere un tamaño de fuente mayor que el español para una buena nitidez. Ver: Consejos para elegir una fuente web.

Posicionamiento en buscadores

Los sitios web multilingües presentan varios desafíos para su posicionamiento en buscadores, como la existencia de contenido duplicado (el mismo contenido en distintos idiomas) y la necesidad de manejar URL segmentadas por idioma. Google ofrece varios consejos al respecto.

Conclusiones

Desarrollar un sitio web multilingüe puede ser un trabajo arduo si el contenido es voluminoso y los idiomas involucrados son muchos o muy exóticos. Sin embargo, este esfuerzo traerá una importante ventaja: la ampliación de nuestro público objetivo, con un consecuente aumento de tráfico y ventas.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce