9 Dicas para Criar um Site em Vários Idiomas

Em um mundo cada vez mais conectado, sites em vários idiomas estão se tornando mais comuns. Mas e para criá-los? É um pouco mais complicado do que você imagina, especialmente quando você para para pensar nas mudanças de design que precisará fazer no seu site.

O básico é simples — com a Weglot, você pode adicionar diferentes idiomas ao seu site em menos de 5 minutos. Mas aí você precisa pensar onde vai colocar seu seletor de idioma, como adaptar seu layout quando um usuário muda do inglês para um idioma RTL (da direita para a esquerda) e usar cores, imagens e ícones culturalmente apropriados.

Neste guia, vamos dar uma olhada em algumas das considerações de design mais importantes para ajudar você a planejar um site multilíngue com as melhores práticas.

1. Use Modelos Globais para uma Marca Consistente

Quando alguém acessa seu site em vários idiomas, você quer que essa pessoa tenha uma experiência consistente, não importa qual versão do site ela acesse. Isso significa que visitantes indianos que acessam seu site em inglês devem ver a mesma identidade visual e design que a versão em hindi.

Você não pode impedir que visitantes bilíngues ou multilíngues vejam diferentes versões do seu site em vários idiomas, mas pode garantir que eles vejam a mesma identidade visual, layout e elementos de design quando mudam do idioma padrão.

Se você usa um sistema de gerenciamento de conteúdo, como o WordPress, com o Weglot, criar um site multilíngue consistente é super fácil. O Weglot se integra perfeitamente com o tema do seu construtor de sites e traduz seu conteúdo automaticamente. Ele também se integra com todas as outras partes importantes da funcionalidade do seu site, como plugins de e-commerce – o que significa que não há motivo para ter temas ou designs diferentes para os vários idiomas que você adicionar ao seu site multilíngue.

Por exemplo, quando você visita a página inicial do Airbnb de um país como a Austrália…

… e depois muda para o japonês, o design e a identidade visual são consistentes em ambos os idiomas.

Ter um design instantaneamente reconhecível não só ajuda a reforçar a sua marca, como também facilita futuras atualizações do seu site multilíngue e reduz as dores de cabeça quando diferentes idiomas criam a necessidade de alterações na interface do usuário ou na experiência do usuário.

2. Deixe o Seletor de Idioma Bem Fácil de Encontrar

Coloque seu menu suspenso de troca de idioma em um local de destaque na sua página inicial e em todas as outras páginas do seu site. Você vai perceber que sites multilíngues geralmente têm o seletor de idioma no cabeçalho ou rodapé da página.

Qualquer que seja a opção que você escolher para o seu site em vários idiomas, certifique-se de que seja muito fácil de encontrar.

Você também vai querer ter certeza de que as opções para mudar de idioma são super claras. O ideal é se referir a um novo idioma no seu próprio idioma nativo. Por exemplo, use “Deutsch” em vez de “Alemão” e “日本語” em vez de “Japonês”.

O Asana, por exemplo, usa um menu suspenso com os nomes dos diferentes idiomas disponíveis:

Você quer que os visitantes do seu site multilíngue se sintam bem-vindos, não importa o idioma que falem. Colocar seu seletor de idioma em um lugar fácil de encontrar vai ajudar a conseguir isso.

3. Deixe os Visitantes Escolherem o Idioma Preferido

Você deve pensar que deixar os usuários escolherem o idioma preferido seria algo óbvio, mas muitos sites multilíngues dificultam muito a escolha de um idioma. Em vez disso, eles forçam os usuários a mudar de região.

Grandes marcas são as que mais erram. Você vai encontrar muitas que te forçam a mudar a região do site multilíngue (ou seja, mudar de www.adobe.com para www.adobe.com/us/) quando você só quer mudar o idioma padrão.

Só porque alguém fala hindi, não significa que essa pessoa quer mudar para aquela região no site multilíngue de uma empresa. E se ela mora em Nova York e quer comprar no site dos EUA, mas quer ler o site em hindi? Não crie uma barreira para que eles comprem no seu site multilíngue — ajude-os a acessar seu conteúdo no idioma preferido deles.

Aqui está um exemplo de uma empresa que realmente permite que os visitantes escolham o idioma preferido — o Uber mostra suas opções de troca de idioma no rodapé:

Quando você clica em “English”, uma janela pop-up aparece, permitindo que você escolha seu idioma preferido entre inglês e francês:

O que é ótimo no design de troca de idioma do Uber é que ele permite que os visitantes selecionem o idioma preferido sem forçá-los a mudar de região.

Se você quer melhorar ainda mais a experiência do usuário para seus visitantes, considere “lembrar” o idioma padrão deles para que, da próxima vez que visitarem seu site multilíngue, ele carregue automaticamente no idioma nativo deles.

Detecção Automática de Idiomas

Muitos sites multilíngues detectam o idioma nativo do navegador para definir automaticamente o idioma principal para os usuários.

Embora isso economize algum tempo para os usuários, oferecer traduções automáticas usando detecção de idioma não é uma ciência exata. É importante ter em mente os usuários que podem cair na versão “errada” do seu site multilíngue.

Um visitante pode estar fisicamente localizado na Espanha e seu site multilíngue detectará isso automaticamente e exibirá espanhol, mas ele pode ser um falante nativo de inglês que não consegue ler espanhol.

Então, se você for detectar locais automaticamente, também ofereça um seletor de idioma para que os visitantes tenham a opção de escolher outros idiomas.

O Weglot oferece a opção de redirecionar automaticamente seus visitantes de acordo com o idioma do navegador deles. Veja o Weglot em ação no seu site com um teste grátis de 14 dias.

Bandeiras vs Nomes de Idiomas

Bandeiras são frequentemente usadas para indicar um idioma, mas existem algumas questões contextuais que você vai querer ter em mente:

• Bandeiras representam países, não idiomas.
• Um país pode ter mais de um idioma oficial.
• Um idioma pode ser falado em mais de um país.
• Os visitantes podem não reconhecer uma bandeira (por causa do tamanho do ícone) ou podem ficar confusos com bandeiras semelhantes.

No fim das contas, você quer oferecer opções de troca de idioma que sejam fáceis de entender em qualquer idioma.

4. Considere a Expansão de Texto

Quando um texto é traduzido de um idioma para outro, como acontece com o Google Translate, o comprimento do texto original e da tradução resultante será diferente. Isso pode ser um desafio na hora de montar seu design.

Alguns idiomas escritos são mais concisos que outros. Idiomas como japonês e chinês usam um ou dois caracteres para transmitir uma informação, enquanto em outros idiomas, você precisaria de várias palavras.

Idiomas como espanhol e inglês são prolixos, às vezes precisando de até 30% mais espaço do que outros idiomas.

O guia do W3C sobre tamanho de texto em tradução, que recomendamos muito ler na íntegra, oferece ótimas dicas.

O W3C destaca por que é fundamental que as ferramentas de tradução automática tenham elementos de interface adaptáveis, como botões, campos de entrada e texto descritivo.

Por exemplo, quando o Flickr foi traduzido para diferentes idiomas, os designers tiveram que considerar o texto abaixo das fotos que indica o número de visualizações.

A tabela abaixo mostra os tamanhos comparativos da palavra "view" em diferentes idiomas, em relação ao inglês original:

É uma expansão de 300% do inglês para o italiano!

O que você precisa ter em mente é que o texto geralmente aumenta ou diminui de tamanho, então seu site multilíngue precisa estar preparado para isso. Lembre-se também que, quanto menor o texto original, maior a tradução provavelmente será. Se o espaço for um problema, tente uma tradução diferente e menos literal, ou mude o tamanho da fonte para o novo idioma.

A altura dos caracteres e das linhas é outra coisa importante. É comum que textos que não usam o alfabeto latino tenham caracteres bem mais altos. Escritas como o árabe, por exemplo, também vão precisar de mais espaço vertical entre as linhas do que os idiomas latinos.

5. Pense na Compatibilidade e Codificação das Fontes do Site

O W3C diz que você deve sempre especificar a codificação das suas páginas. Eles recomendam usar UTF-8 para garantir que os caracteres especiais apareçam certinho, não importa o idioma.

Veja como fazer a declaração UTF no cabeçalho das suas páginas:

Qualquer fonte que você usar no seu site precisa ser compatível com todos os idiomas (além do inglês) que o seu site multilíngue WordPress suporta, principalmente para idiomas que não usam o alfabeto latino. Ou seja, as fontes que você escolher devem ter todos os caracteres e símbolos necessários.

Algumas fontes podem funcionar bem com o alfabeto latino, mas não com escritas da direita para a esquerda (RTL) ou cirílico. Então, antes de escolher uma fonte, confira se ela inclui os idiomas que você precisa, além do inglês.

O Google Fonts, por exemplo, te deixa selecionar os idiomas antes de baixar um pacote de fontes:

Um único idioma pode ter centenas de caracteres, o que pode deixar os arquivos de fonte bem grandes. É mais um ponto para você considerar na hora de escolher as fontes para o seu site multilíngue.

6. Crie o Design para Idiomas da Direita para a Esquerda

Criar páginas para idiomas que são lidos da direita para a esquerda pode ser um desafio. Como Robert Dodis, desenvolvedor da SteelKiwi, escreveu para a Smashing Magazine, fazer o design para RTL significa 'inverter a interface'.

Por exemplo, veja como é o design do Facebook, que é lido da esquerda para a direita:

E aqui está como fica o design do Facebook, lido da direita para a esquerda, em árabe:

Repare como até a barra de rolagem muda de lugar!

Espelhar seu design é algo que você precisa pensar se estiver criando para idiomas LTR (da esquerda para a direita) e RTL (da direita para a esquerda).

Recomendamos muito ler o artigo do Robert na Smashing Magazine para entender em detalhes como criar designs para RTL. Não queremos reinventar a roda aqui, então vá ler o tutorial dele. Queremos te mostrar como o Weglot oferece suporte a idiomas RTL e pode facilitar o processo de tradução para o seu site multilíngue.

O serviço de tradução do Weglot oferece suporte a idiomas RTL e, com regras CSS, você pode adaptar o layout do seu site multilíngue para eles. Aqui estão alguns dos idiomas RTL disponíveis:

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

Depois de adicionar um idioma RTL ao seu site multilíngue com o Weglot, você pode personalizar como ele aparece aplicando regras CSS ao seu layout. No painel do WordPress, vá em Weglot > Design do botão de idioma (Opcional) e role a página até Substituir CSS. Adicione as regras CSS que quiser na área de texto — você pode querer mudar a fonte, tamanho, altura da linha e mais para estilizar o idioma principal e adaptá-lo ao seu design.

É só isso que você precisa fazer para adicionar e estilizar idiomas RTL com o Weglot! Você pode ler mais sobre como o Weglot oferece suporte a idiomas RTL na documentação.

7. Use Imagens e Ícones Culturalmente Adequados

Imagens, ícones e outros gráficos são super importantes em qualquer página da web. Mas, por serem visuais, eles são subjetivos e podem ser entendidos de jeitos diferentes em outros contextos culturais.

Por exemplo, a versão francesa da página inicial da Clarins mostra uma mulher caucasiana:

Mas quando você visita a página inicial japonesa da empresa, aparece a imagem de uma mulher japonesa:

As imagens também podem acabar ofendendo. O que parece inocente para o público ocidental pode ser tabu em outro país. Por exemplo, fotos de casais gays ou de igualdade de gênero não seriam bem aceitas em países onde a homossexualidade ainda é ilegal e os direitos das mulheres não são totalmente reconhecidos.

Você também vai precisar pensar em elementos pequenos, como ícones, e o que eles significam para pessoas de lugares diferentes que visitam seu site multilíngue. Por exemplo, um ícone de globo para um público australiano que fala inglês seria bem diferente para usuários na África:

O terceiro ícone acima mostra um globo, mas não tem um país ou região específica, o que o torna mais adequado para usar em um site multilíngue.

Você vai precisar revisar imagens e outros elementos gráficos, considerando as sensibilidades regionais e culturais.

Evite usar imagens e outros gráficos que tenham texto embutido. Você não conseguirá traduzir texto embutido com ferramentas como o Weglot, então é melhor evitar de vez.

8. Use Cores Culturalmente Adequadas

A forma como diferentes culturas veem e interpretam as cores muda bastante ao redor do mundo.

Por exemplo, na cultura ocidental, o vermelho simboliza amor, energia, paixão e perigo. Já nas culturas asiáticas, é uma cor super importante, que simboliza boa sorte, prosperidade, celebração e vida longa. Por outro lado, em alguns países africanos, o vermelho é associado à morte e à agressão.

O azul é considerado a cor mais segura e aceita globalmente para design, já que tem muitas associações positivas. É uma cor que acalma, considerada relaxante e tranquila, mesmo que também seja associada à tristeza e depressão. O azul também é a cor mais popular para logotipos de bancos porque representa confiança e autoridade.

Ao escolher as cores para o design do seu site multilíngue, não deixe de pesquisar no Google o simbolismo associado a qualquer cor que você planeja usar.

9. Datas e Outros Formatos

Nem todo país usa o mesmo formato de data, mesmo entre os que falam inglês. Por exemplo, no Reino Unido e na Europa, é comum formatar a data como dia-mês-ano, enquanto nos EUA é mês-dia-ano.

Você também pode precisar traduzir unidades de medida, o que ajuda com o SEO, dependendo do seu público-alvo. Enquanto 90% do mundo usa o sistema métrico, os EUA, a Libéria e Mianmar ainda usam o sistema imperial de pesos e medidas.

Escolhendo o Plugin de Tradução de WordPress Certo para o Seu Design

Plugins de tradução para WordPress existem de todos os tipos e tamanhos, e a forma como eles funcionam com o seu design específico varia bastante. Uma solução que tem integração garantida e perfeita com o seu site multilíngue é o Weglot.

Você pode até usar o Visual Editor da Weglot para traduzir seu conteúdo na parte visível do seu site (front-end) e em subdomínios, assim você consegue ver como fica no contexto do design e layout do seu site, parecido com o Google Translate.

Com a Weglot, o design e a localização do seu seletor de idioma são 100% personalizáveis. O botão padrão foi feito para se adaptar a qualquer site, mas você também pode estilizá-lo com CSS personalizado para usar o formato que quiser.

Além disso, o Weglot oferece suporte aos princípios de design apresentados neste post, incluindo:

• Usando um template global para uma identidade visual consistente
• Oferecendo opções de troca de idioma fáceis de encontrar
• Permitindo que os visitantes escolham o idioma preferido
• Codificação UTF automática
• Suporte para idiomas RTL

Vamos dar uma olhada no recurso mais importante relacionado ao design que a Weglot oferece: personalizar seu seletor de idioma.

Personalizando as Opções de Troca de Idioma do Seu Site com o Weglot

Depois de instalar o plugin do Weglot no seu site multilíngue WordPress e fazer a configuração, você será solicitado a inserir sua chave de API, seu idioma padrão e o idioma para o qual você quer traduzir seu conteúdo, como no Google Translate.

Se você ainda não tem uma conta Weglot, vai precisar criar uma para conseguir sua chave de API.

Depois de salvar suas alterações, atualize a parte visível (front-end) do seu novo site multilíngue e você verá um novo seletor de idioma no canto inferior direito. Ao clicar nele, ele vai expandir para mostrar os idiomas disponíveis, permitindo que você exiba sua tradução preferida.

Para começar a fazer algumas personalizações básicas, vá em Weglot > Design do botão de idioma (Opcional). Nesta tela, você pode escolher:

• Se deve ou não usar um menu suspenso
• Se deve ou não usar bandeiras
• Tipos de bandeiras
• Para exibir o nome dos idiomas
• Para exibir apenas o código dos idiomas

A seção Substituir CSS é onde você pode aplicar regras de CSS para estilizar a aparência do seu seletor de idioma no seu site multilíngue. Por exemplo, você poderia:

• Remover a seta do botão
• Mudar a cor de fundo
• Adicionar uma barra de rolagem
• Remover a borda
• Adicionar preenchimento

A Weglot traz alguns exemplos neste artigo sobre como personalizar o design do botão de idioma.

Ao rolar a tela de configuração do Weglot para baixo, você vai encontrar instruções sobre como posicionar o seletor de idioma:

• No menu. Vá em Aparência -> Menus e arraste e solte o link personalizado Weglot Translate onde quiser.
• Como um widget. Vá em Aparência -> Widgets e arraste e solte o widget Weglot Translate onde quiser.
• Com um shortcode. Use o shortcode do Weglot [ weglot_switcher ] (sem os espaços) para colocar o seu seletor de idioma onde quiser.
• No código-fonte. Você pode adicionar o seguinte código onde quiser no código-fonte da sua página HTML:

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

Para te mostrar como o seletor de idioma pode ser personalizado em um site multilíngue (seja ele um WordPress, um Shopify ou qualquer outro tipo de site), você pode ver abaixo como a Patyka exibe o seletor de idioma no canto superior esquerdo da página.

As línguas aparecem com seus nomes, e quando você clica para mudar e escolhe uma, o conteúdo da página se atualiza, traduzindo para o idioma que você selecionou.

Estudo de Caso: Maestrooo usa Weglot

Fundada em 2013, a Maestrooo é uma agência de desenvolvimento web na França que tem a From Future e a Patyka entre seus clientes. Hoje, a Maestrooo atende a maioria dos clientes Shopify Plus na França.

A Maestrooo estava procurando por uma solução de site multilíngue sólida e confiável que pudesse se adaptar facilmente às necessidades de seus clientes. Depois de testar várias soluções e perceber que elas tinham problemas com SEO ou gerenciamento de hreflang, a equipe descobriu a Weglot.

A Weglot traduz todo o conteúdo dos sites dos clientes da Maestrooo, seja conteúdo dinâmico, conteúdo gerado por outros aplicativos ou até mesmo o processo de checkout, sem impactar o layout do site multilíngue deles.

Além de criar sites personalizados para clientes, a Maestrooo também desenvolve os temas oficiais para a loja de temas do Shopify. Enquanto outras soluções de sites multilíngues geralmente bagunçam a formatação dos temas da Maestrooo, a Weglot oferece uma solução de tradução que funciona sempre.

A Maestrooo ajuda entre 8.000 e 12.000 clientes a começar a usar o Shopify a cada ano, usando a Weglot para seus sites multilíngues.

Invista na Otimização Cultural Completa com um Design Localizado

Cada um dos princípios de design que vimos neste post vai te colocar no caminho certo para criar um site multilíngue que seja lindo e ofereça uma experiência de usuário incrível.

Para dar aos visitantes e clientes do seu site uma experiência excelente no idioma deles, vale a pena ir além do seu site multilíngue. Pense em traduzir seus materiais de marketing e o suporte ao cliente.

Pense também na velocidade e no desempenho do seu site multilíngue. Em alguns países que não têm a sorte de ter internet rápida, baixar pacotes de idiomas grandes pode dificultar o acesso dos visitantes ao seu conteúdo.

Com o plugin de tradução de site multilíngue certo e um design de site que oferece opções de tradução fáceis de usar, você estará ajudando os clientes com uma interface (UI) e experiência do usuário (UX) visualmente atraentes no idioma que eles preferem. Experimente a Weglot de graça com nosso teste grátis de 14 dias sem compromisso, ou faça um tour pelo produto sem precisar se cadastrar!