Atualize-se sobre suas práticas recomendadas: Design de site multilíngue do Squarespace

Recentemente, exibimos alguns exemplos admiráveis de sites multilíngues do Squarespace. O que nos fez escolher essas páginas em particular? O que as diferencia?

Não vamos medir palavras: esses sites são bonitos.

Já dissemos isso antes e vamos dizer novamente: Os modelos do Squarespace são esteticamente atraentes. O próprio site principal do Squarespace ganhou um prêmio Webby (que é basicamente uma das maiores conquistas possíveis para uma empresa on-line) em 2017 e, desde então, eles só aumentaram sua marca.

E faz sentido que, como o próprio site principal do Squarespace é tão elegante, as opções de criação de sites da plataforma para os usuários também o sejam. Em poucas palavras, O Squarespace segue suas próprias regras.

Como proprietário de um site do Squarespace, você pode estar interessado em tornar seu site global - e, em 2019 e nos anos seguintes, essa é uma aposta praticamente certa, quer você esteja lançando um site pessoal, uma loja de comércio eletrônico(70% dos fornecedores de comércio eletrônico confirmam que vender além das fronteiras tem sido lucrativo para eles) ou um site para sua empresa.

Depois de decidir mergulhar no mercado internacional, um dos primeiros elementos do conteúdo do seu site que você terá de levar em conta é o idioma.

O Squarespace torna a criação de seu site - em seu próprio idioma - muito fácil. Você instala o modelo (muito elegante, muito aparente) de sua escolha e pode brincar com vários parâmetros de design - de fontes a cores, opções de espaçamento e grade - que podem ser acessados intuitivamente pelo painel de design.

Squarespace multilíngue

Um recurso simplificador que falta ao Squarespace é uma solução nativa para criar um site multilíngue do Squarespace.

Eles fornecem instruções sobre como duplicar manualmente suas páginas e traduzi-las você mesmo e, embora essa solução possa funcionar se você tiver um site menor, como um portfólio, ela não funcionará para um site maior. Também não é uma solução viável para SEO multilíngue, pois as páginas duplicadas não são favorecidas pelos mecanismos de pesquisa.

Saiba mais sobre as práticas recomendadas de SEO multilíngue aqui:

Usando uma solução integrada, como o Weglotpara criar um site multilíngue no Squarespace é uma solução muito mais rápida e que economiza energia.

Design multilíngue do Squarespace

Entretanto, depois de traduzir seu site, você provavelmente notará algumas diferenças entre a forma como as versões traduzidas são exibidas na tela e a forma como a versão original é exibida.

Isso é de se esperar; idiomas diferentes simplesmente têm aparência diferente. A palavra inglesa "shell" (concha), com apenas cinco letras, é traduzida como "coquillage" - literalmente o dobro de letras - em francês.

Na maioria dos ambientes de web design simplificados (portanto, se você estiver criando um site do zero, por exemplo), a tradução da sua página pode bagunçar o alinhamento dos parágrafos e a forma como os blocos de texto interagem entre si. A compatibilidade doWeglotcom todos os modelos do Squarespace geralmente evita que isso seja um problema; os modelos do Squarespace são projetados por profissionais para serem altamente adaptáveis.

Isso não significa, porém, que não existam alguns princípios orientadores que você deva seguir para a) escolher o modelo certo para o seu site multilíngue do Squarespace e b) personalizá-lo.

Faremos um tour pela interface de design do Squarespace, levando em conta o multilinguismo.

1. É hora do modelo multilíngue do Squarespace.

Como você já deve ter descoberto, se você já entrou no mundo do Squarespace, seus parâmetros de design são arredondados em modelos; os modelos do Squarespace são notoriamente minimalistas, com muitas imagens e bem proporcionados para telas de dispositivos móveis e computadores.

Aqui estão alguns dos modelos que estão sendo usados atualmente pelos clientes Weglot e que são testados e verdadeiros para tornar seu site Squarespace multilíngue:

Forte: linhas limpas e contraste

O Forte é o que se pode chamar de manifestação digital do conceito de cubo branco: foi criado para parecer uma galeria de arte contemporânea. Ele permite até mesmo colocar várias imagens em uma apresentação de slides de fundo automatizada em sua página inicial.

Com uma predefinição que muda seu logotipo de preto para branco (e vice-versa), dependendo do brilho da imagem de fundo exibida, o Forte é visualmente adaptável de várias maneiras.

Dê uma olhada no portfólio on-line do arquiteto Stepan Havlik, de Praga, projetado com o Forte; seus sites em inglês e tcheco são igualmente nítidos e informativos.

Impacto: o nome já diz tudo

A característica marcante do Impact é provavelmente o tamanho de seu espaço de título principal. O nome da sua empresa ou a palavra-chave nº 1 é realmente a estrela do show em uma página inicial do Impact.

Veja como a advogada Valentina Mayer, sediada em Roma e Berlim, impulsionou sua marca pessoal e, ao mesmo tempo, manteve uma interface bem traduzida para seus clientes italófonos e anglófonos:

Salmoura: poder para a paralaxe

Adicionar um pouco de movimento à sua página (especialmente quando não é necessário programá-lo você mesmo) é uma maneira fácil de chamar a atenção do leitor. É exatamente isso que diferencia a família de modelos Brine de seus homólogos minimalistas no Squarespace; no Brine, as imagens do banner em tela cheia rolam um pouco mais devagar do que o restante do conteúdo da página.

É amplamente reconhecido no mundo do web design que esse é um dos truques mais fáceis para dar ao seu site uma sensação de 3D e envolver o usuário ainda mais no seu mundo.

O que mais o Brine tem de bom? Ele é compatível com vários idiomas.

(Na verdade, uma das demonstrações de site multilíngue do Squarespace foi feita com o Nueva, um modelo da família Brine - falaremos sobre isso um pouco mais tarde, mas você pode dar uma olhada nele aqui).

A designer gráfica francesa Emmanuelle Ciamous escolheu o Brine para dar vida a seus delicados desenhos no site de sua galeria pessoal, e o efeito é de tirar o fôlego.

2. Use blocos de texto na parte superior das imagens, em vez de imagens com texto.

Se você é um ávido usuário do Photoshop, Illustrator ou Canva, talvez goste de criar imagens de fundo ou outros gráficos com texto. Isso é algo que muitos designers gostam de fazer quando querem usar fontes personalizadas, por exemplo, que talvez não estejam disponíveis nos construtores de sites.

No entanto, essa não é uma ideia muito boa se você estiver planejando tornar o conteúdo do seu site Squarespace multilíngue.

Embora aplicativos como o Weglot possam traduzir os metadados em torno de suas imagens - como nomes, legendas e palavras-chave que as descrevem e permitem que apareçam em mecanismos de pesquisa como o Google Images -o texto de uma imagem estática (geralmente em formato JPEG, PNG ou GIF) não pode ser traduzido.

(Também é bom observar que o painel do Weglot permite que você carregue imagens diferentes para cada um dos idiomas; portanto, se você quiser recriar sua imagem com texto estático para cada idioma, terá um local para vincular cada uma delas ao idioma apropriado).

Mas, para sermos honestos, o photoshop do texto da sua imagem em vários idiomas - especialmente se você tiver vários - poderapidamente se tornar um processo longo e tedioso.

Em vez de pré-projetar sua própria imagem de banner do Squarespace com o texto já inserido, como esta...

...carregar a imagem sozinho:

...use o editor de imagens do Squarespace para dar os efeitos desejados (desfoque, alterações de brilho, eles têm toda a gama de opções):

...adicione a imagem como uma imagem de banner (é o que é mostrado na captura de tela abaixo) ou como a imagem de fundo de um bloco e, em seguida, adicione um bloco de texto diretamente sobre ela.

Isso garantirá que seu texto seja detectável e que nenhuma letra seja deixada para trás quando você criar seu site multilíngue.

Dica de profissional para imagens: Embora isso nem sempre seja o caso se você estiver acostumado a projetar sites do zero (onde as práticas recomendadas geralmente afirmam que as imagens devem ser "otimizadas para tela" em seu tamanho - portanto, não necessariamente em alta resolução), no Squarespace, maior é melhor quando se trata de imagens.

A maioria dos modelos do Squarespace é centralizada em um banner grande (pense em Brine, Bedford ou Hyde), que às vezes ocupa a página inteira no estilo de uma imagem de fundo (mais no estilo de Keene, Polaris ou Marta).

Você também deve se certificar de que a imagem escolhida para o banner principal tenha boa aparência em todos os dispositivos - vocêpode visualizar suas páginas para tablet e celular clicando na seta para baixo na parte superior da página e mudando para um formato de visualização diferente nesse menu:

3. Adapte sua tipografia.

A tipografia é evidentemente uma das principais considerações de um web designer em qualquer contexto linguístico. Se alguém for ler o seu site, você deve tornar a experiência o mais agradável possível para essa pessoa.

Quando se trata de decisões sobre tipografia multilíngue, normalmente não é preciso se preocupar muito , a menos que esteja traduzindo seu site do Squarespace para idiomas que usam alfabetos/escritas diferentes. Se esse for o caso, você deverá prestar mais atenção a essa parte.

O Squarespace é super simplificado, e a maioria dos modelos do Squarespace fica melhor quando você não troca muito as fontes. A maioria dos designers lhe dirá que existe um excesso de fontes (o número 9 desta lista de práticas recomendadas de tipografia do Canva explica o motivo).

Essa é uma boa notícia para os designers de sites multilíngues do Squarespace. Embora , em teoria, você possa atribuir uma fonte diferente para cada idioma, se necessário, usando CSS personalizado, é muito mais fácil para os olhos - e para as suas ferramentas de design - manter as coisas simples e usar fontes que serão renderizadas universalmente em todos os seus idiomas. Isso também manterá a consistência da sua marca entre os idiomas, o que pode ser muito importante se você estiver tentando atrair um público global.

Você pode começar verificando as fontes disponíveis no Google Fonts e/ou no Adobe Fonts (o primeiro é gratuito - para o Adobe, no entanto, geralmente é necessário ter uma conta para fazer download de qualquer fonte que você queira para uso pessoal).

Embora essas bases de fontes contenham muito mais estilos do que os realmente disponíveis no Squarespace, essa é a melhor maneira de descobrir quais famílias de fontes suportam vários alfabetos - não há como fazer isso no Squarespace.

No Google Fonts, por exemplo, você pode ver quais fontes suportam quais scripts selecionando o script desejado no menu "language" (idioma).

(O nome desse menu é um pouco enganador; você pode notar que as opções não são, na verdade, os nomes de idiomasmas sim dos scripts nos quais os idiomas podem ser escritos on-line. Há alguns idiomas que compartilham o nome de sua escrita - o idioma árabe, por exemplo, usa o que se convencionou chamar de escrita árabe -, mas muitos não o fazem; inglês, francês, alemão e muitos outros idiomas usam a escrita latina, embora nem todos sejam necessariamente derivados do latim).

Depois de encontrar uma fonte compatível com ambos (ou todos) os scripts de que você precisa, verifique se ela está disponível no Squarespace - você pode encontrar a lista completa de fontes do Squarespace aqui.

4. Personalize o botão de troca de idioma do Squarespace.

Decida se você deseja usar ícones de bandeira ou não.

Às vezes, essa pode ser uma decisão difícil. Do ponto de vista do design tradicional, associar uma bandeira a um idioma em um menu de escolha de idioma parece super intuitivo: é um marco visual, uma maneira de reconhecer seu próprio idioma, mesmo que você esteja totalmente perdido no idioma original da página inicial do site.

Entretanto, lembre-se de que as bandeiras representam tecnicamente países, não idiomas. Além de a maioria dos idiomas ser falada em mais de um país, muitos países têm mais de um idioma oficial.

Fazer com que a bandeira da Índia represente o hindi, por exemplo, faz pouco sentido prático: embora o hindi seja tecnicamente o idioma mais falado na Índia, ele é apenas um dos 16 idiomas oficiais do país ! Tentar atrair um público indiano, nesse caso, mereceria não apenas traduzir seu site do Squarespace para mais de um desses idiomas regionais, mas também evitar dar preferência simbólica a qualquer um deles em detrimento de outro.

Inclua-o em seu menu de navegação principal.

Embora o botão padrão de troca de idioma Weglot seja bastante neutro, talvez você queira tornar a marca de todo o site o mais coerente possível, e a melhor maneira de garantir que o botão de idioma faça parte dessa estratégia é incluí-lo no menu de navegação principal.

Isso garantirá que ele esteja sempre visível em todas as páginas do seu site na mesma posição, além de se parecer com os outros botões de navegação em termos de cor e estilo de fonte.

Para isso, vá até a seção "Pages" (Páginas) do editor de sites do Squarespace. Em "Main navigation" (Navegação principal), você verá um botão "+" que permite adicionar um botão à sua barra de navegação principal; clique nele e você verá uma pequena janela aparecer, como na captura de tela abaixo:

Você pode intitular o link como o nome do idioma para o qual ele levará e, na caixa de conteúdo "Link", digite "Weglot" seguido do código de duas letras do idioma em questão.

De volta ao básico: Quatro lições principais para o sucesso multilíngue do Squarespace

Agora que abordamos alguns dos recursos de design adaptáveis a vários idiomas do Squarespace e analisamos alguns exemplos, vamos recapitular o que você deve ter em mente ao trazer seu site do Squarespace para a esfera multilíngue:

• Escolha seu modelo com sabedoria. Essa é essencialmente a decisão mais fundamental que qualquer usuário do Squarespace toma: a escolha do modelo define o restante do seu fluxo de trabalho. Certifique-se de escolher um modelo que ficará igualmente bom na tradução.

• Mantenha seu texto separado de suas imagens. Em vez disso, carregue imagens sem texto como banners ou itens de mídia e use as várias opções de blocos de texto do Squarespace para digitar sobre ou ao redor delas.

• A tipologia é fundamental. Use fontes que estejam disponíveis no Squarespace em todos os scripts de que você precisa - isso garantirá a consistência da marca em todo o site, para todos os visitantes.

• Dê um impulso ao seu botão. Um botão personalizado de troca de idioma ficará mais fluido em seu site multilíngue do Squarespace e não parecerá deslocado - outro pequeno detalhe que fará com que os usuários do idioma de destino sintam que estão sendo levados em consideração tanto quanto os do idioma original.

Como em qualquer outro CMS, Weglot funciona muito bem no Squarespace. Experimente-o com uma avaliação gratuita hoje mesmo.

Descubra como instalar Weglot em seu site Squarespace.