Perfectionnez vos bonnes pratiques: conception de sites multilingues Squarespace

Nous avons récemment présenté quelques exemples admirables de sites Squarespace multilingues. Qu'est-ce qui nous a poussés à choisir ces pages en particulier ? Qu'est-ce qui les distingue ?

N'ayons pas peur des mots : ces sites sont jolis.

Nous l'avons déjà dit et nous le répétons : Les modèles Squarespace sont esthétiquement attrayants. Le site Web principal de Squarespace a remporté un prix Webby (qui est fondamentalement l'une des plus grandes réalisations possibles pour une entreprise en ligne) en 2017, et ils n'ont fait que renforcer leur image de marque depuis.

Et il est logique que, puisque le site principal de Squarespace est lui-même si élégant, les options de création de site de la plateforme pour les utilisateurs soient tout aussi élégantes. En bref, Squarespace suit ses propres règles, Squarespace suit ses propres règles.

En tant que propriétaire d'un site Squarespace, vous êtes peut-être intéressé par l'internationalisation de votre site - et, en 2019 et au-delà, c'est un pari assez sûr, que vous lanciez un site personnel, une boutique de commerce électronique(70 % des vendeurs de commerce électronique confirment que la vente au-delà des frontières a été rentable pour eux), ou un site pour votre entreprise.

Une fois que vous avez décidé de vous lancer à l'international, l'un des premiers éléments du contenu de votre site que vous devrez prendre en compte est sa langue.

Squarespace facilite grandement la création de votre site dans votre propre langue. Vous installez le modèle (très élégant) de votre choix, puis vous pouvez jouer avec de nombreux paramètres de conception - des polices aux couleurs, en passant par l'espacement et les options de grille - qui sont tous accessibles de manière intuitive via votre tableau de bord de conception.

Squarespace multilingue

L'une des fonctions de simplification qui fait défaut à Squarespace est une solution native pour créer un site multilingue. site multilingue Squarespace.

Ils fournissent certes des instructions pour dupliquer manuellement vos pages et les traduire vous-même, mais si cette solution peut fonctionner pour un site de petite taille, tel qu'un portfolio, elle ne conviendra pas à un site plus important. Elle n'est pas non plus viable pour SEO multilingue, car les pages dupliquées ne sont pas appréciées par les moteurs de recherche.

Pour en savoir plus surbonnes pratiques SEO multilingue , cliquezbonnes pratiques :

L'utilisation d'une solution intégrée, comme Weglotpour créer un site multilingue sur Squarespace est une solution beaucoup plus rapide et économe en énergie.

Conception multilingue de Squarespace

Cependant, une fois votre site traduit, vous remarquerez probablement quelques différences entre le rendu des versions traduites sur votre écran et celui de votre version originale.

C'est tout à fait normal : les langues ne se ressemblent pas. Le mot anglais "shell", qui ne compte que cinq lettres, se traduit en français par "coquillage", soit le double du nombre de lettres.

Dans la plupart des environnements de conception web simplifiés (donc, si vous construisez un site à partir de zéro, par exemple), la traduction de votre page peut perturber l'alignement de vos paragraphes et la façon dont vos blocs de texte interagissent les uns avec les autres. La compatibilité deWeglotavec tous les modèles Squarespace permet généralement d'éviter ce problème ; les modèles Squarespace sont conçus par des professionnels pour être très adaptables.

Cela ne signifie pas pour autant qu'il n'existe pas quelques principes directeurs à suivre pour a) choisir le bon modèle pour votre site Squarespace multilingue et b) le personnaliser.

Nous visiterons l'interface de conception de Squarespace, en gardant à l'esprit le multilinguisme.

1. C'est l'heure du modèle multilingue Squarespace.

Comme vous l'avez peut-être déjà découvert, si vous vous êtes aventuré dans le monde de Squarespace, vos paramètres de conception sont regroupés dans des modèles. Les modèles Squarespace sont notoirement minimalistes, riches en images et bien proportionnés pour les écrans mobiles et de bureau.

Voici quelques-uns des modèles actuellement utilisés par les clients de Weglot et qui ont fait leurs preuves pour rendre votre site Squarespace multilingue :

Points forts : lignes épurées et contrastes

Forte est ce que l'on pourrait appeler une manifestation numérique du concept du White Cube: il est conçu pour ressembler à une galerie d'art contemporain. Il vous permet même de placer plusieurs images dans un diaporama d'arrière-plan automatisé sur votre page d'accueil.

Avec un préréglage qui fait passer votre logo du noir au blanc (et inversement) en fonction de la luminosité de l'image d'arrière-plan affichée, Forte est visuellement adaptable à plus d'un titre.

Jetez un coup d'œil au portfolio en ligne de l'architecte pragois Stepan Havlik, conçu à l'aide de Forte ; ses sites en anglais et en tchèque sont tout aussi précis et informatifs l'un que l'autre.

Impact : le nom dit tout

La caractéristique principale d'Impact est probablement la taille de son espace de titre principal. Le nom de votre entreprise ou le mot-clé n°1 est véritablement la vedette de la page d'accueil d'Impact.

Découvrez comment Valentina Mayer, avocate basée à Rome et à Berlin, a dynamisé sa marque personnelle, tout en conservant une interface magnifiquement traduite pour ses clients italophones et anglophones :

Brine : la puissance au parallaxe

Ajouter un peu de mouvement à votre page (surtout lorsque vous n'avez pas à le programmer vous-même) est un moyen facile d'attirer l'attention du lecteur. C'est précisément ce qui distingue la famille de modèles Brine de ses homologues minimalistes sur Squarespace ; sur Brine, vos images de bannière en plein écran défilent juste un peu plus lentement que le reste du contenu de votre page.

Il est largement reconnu dans le monde de la conception de sites web qu'il s'agit de l'une des astuces les plus simples pour donner à votre site une impression de 3D et immerger l'utilisateur encore plus profondément dans votre univers.

Quels sont les autres avantages de Brine ? Il est prêt pour le multilinguisme.

(En fait, l'une des démonstrations de site multilingue de Squarespace a été réalisée avec Nueva, un modèle de la famille Brine - nous en parlerons un peu plus tard, mais vous pouvez y jeter un coup d'œil ici).

La graphiste française Emmanuelle Ciamous a choisi Brine pour donner vie à ses dessins délicats sur le site de sa galerie personnelle, et l'effet est tout à fait époustouflant.

2. Utilisez des blocs de texte au-dessus de vos images, plutôt que des images contenant du texte.

Si vous êtes un fervent utilisateur de Photoshop, d'Illustrator ou de Canva, vous avez peut-être l'habitude de créer des images d'arrière-plan ou d'autres graphiques contenant du texte. C'est quelque chose que beaucoup de concepteurs aiment faire lorsqu'ils veulent utiliser des polices personnalisées , par exemple, qui pourraient ne pas être disponibles sur les constructeurs de sites.

Mais ce n'est pas une bonne idée si vous prévoyez de rendre le contenu de votre site Squarespace multilingue.

Si des applications telles que Weglot peuvent traduire les métadonnées de vos images (noms, légendes et mots-clés qui les décrivent et leur permettent d'apparaître dans des moteurs de recherche tels que Google Images), letexte d'une image statique (généralement au format JPEG, PNG ou GIF) ne peut pas être traduit.

(Il est également bon de noter que le tableau de bord de Weglot vous permet de télécharger des images différentes pour chacune de vos langues ; ainsi, si vous vouliez recréer votre image avec un texte statique pour chaque langue, vous auriez un endroit pour lier chacune d'entre elles à la langue appropriée).

Mais pour être honnête, le photoshopping du texte de votre image en plusieurs langues - surtout si vous en avez plusieurs - peutrapidement devenir un processus long et fastidieux.

Au lieu de concevoir votre propre image de bannière Squarespace avec du texte déjà présent, comme ceci...

...télécharger l'image toute seule :

...utiliser l'éditeur d'images de Squarespace pour lui donner les effets souhaités (flou, altération de la luminosité, toute la gamme est disponible) :

...ajouter l'image en tant qu'image bannière (c'est ce qui est montré dans la capture d'écran ci-dessous) ou en tant qu'image d'arrière-plan d'un bloc, puis ajouter un bloc de texte directement au-dessus de l'image.

Cela garantit que votre texte est détectable et qu'aucune lettre n'est oubliée lors de la création de votre site multilingue.

Conseil de pro pour les images : même si ce n'est pas toujours le cas si vous avez l'habitude de concevoir des sites web à partir de zéro (où bonnes pratiques stipulent bonnes pratiques que les images doivent être « optimisées pour l'écran » en termes de taille, donc pas nécessairement en très haute résolution), sur Squarespace, plus les images sont grandes, mieux c'est.

La plupart des modèles Squarespace sont centrés sur une grande bannière (pensez à Brine, Bedford ou Hyde), qui occupe parfois toute la page dans le style d'une image de fond (plutôt dans la veine de Keene, Polaris ou Marta).

Vouspouvez prévisualiser vos pages pour tablettes et mobiles en cliquant sur la flèche vers le bas en haut de votre page et en changeant de format d'affichage dans ce menu :

3. Adaptez votre typographie.

La typographie est évidemment l'une des principales considérations d'un concepteur de sites web, quel que soit le contexte linguistique. Si quelqu'un va lire votre site, vous voudrez rendre l'expérience aussi agréable que possible pour lui.

Lorsqu'il s'agit de choisir une typographie multilingue, vous n'avez généralement pas à vous inquiéter outre mesure , sauf si vous traduisez votre site Squarespace dans des langues qui utilisent des alphabets ou des scripts différents. Si c'est le cas, vous devrez accorder plus d'attention à cette partie.

Squarespace est extrêmement simplifié, et la plupart des modèles Squarespace sont plus esthétiques lorsque vous ne changez pas trop de polices. La plupart des designers vous diront qu'il ne faut pas utiliser trop de polices (le n° 9 de cette liste de bonnes pratiques typographiques de Canva explique pourquoi).

C'est une bonne nouvelle pour les concepteurs de sites Squarespace multilingues. Même si , en théorie, vous pouvez assigner une police différente pour chaque langue si nécessaire en utilisant un CSS personnalisé, il est beaucoup plus facile pour les yeux - et pour vos concepteurs - de garder les choses simples et d'utiliser des polices qui s'afficheront universellement dans toutes vos langues. Cela permettra également à votre marque de rester cohérente d'une langue à l'autre, ce qui peut s'avérer très important si vous essayez d'attirer un public international.

Vous pouvez commencer par consulter les polices disponibles sur Google Fonts et/ou Adobe Fonts (la première est gratuite pour Adobe, mais vous devez généralement disposer d'un compte pour télécharger les polices que vous souhaitez utiliser à des fins personnelles).

Bien que ces bases de polices contiennent beaucoup plus de styles que ce qui est réellement disponible sur Squarespace, c'est le meilleur moyen de savoir quelles familles de polices prennent en charge plusieurs alphabets - il n'y a aucun moyen de le faire sur Squarespace.

Sur Google Fonts, par exemple, vous pouvez voir quelles polices prennent en charge quels scripts en sélectionnant le script de votre choix dans le menu "langue".

(Le nom de ce menu est un peu trompeur ; vous remarquerez peut-être que les options ne sont pas des noms de languesmais plutôt des scripts dans lesquels les langues peuvent être écrites en ligne. Quelques langues partagent le nom de leur écriture - la langue arabe, par exemple, utilise ce que l'on appelle conventionnellement l'écriture arabe - mais ce n'est pas le cas de beaucoup d'autres ; l'anglais, le français, l'allemand et de nombreuses autres langues utilisent l'écriture latine, même si toutes ne sont pas nécessairement dérivées du latin).

Une fois que vous avez trouvé une police qui prend en charge les deux (ou tous les) scripts dont vous avez besoin, vérifiez qu'elle est disponible dans Squarespace. Vous pouvez trouver la liste complète des polices de Squarespace ici.

4. Personnalisez le bouton de changement de langue de Squarespace.

Décidez si vous voulez utiliser des icônes de drapeau ou non.

Cette décision peut parfois s'avérer difficile à prendre. Du point de vue de la conception traditionnelle, associer un drapeau à une langue dans un menu de choix de langue semble super intuitif : c'est un repère visuel, un moyen de reconnaître votre propre langue, même si vous êtes totalement perdu dans la langue d'origine de la page d'accueil du site.

Toutefois, n'oubliez pas que les drapeaux représentent techniquement des pays, et non des langues. Non seulement la plupart des langues sont parlées dans plus d'un pays, mais de nombreux pays ont plus d'une langue officielle.

Le fait que le drapeau de l'Inde représente l'hindi, par exemple, n'a guère de sens pratique : même si l'hindi est techniquement la langue la plus parlée en Inde, ce n'est que l'une des 16 langues officielles du pays ! Pour attirer un public indien, il faudrait non seulement traduire votre site Squarespace dans plus d'une de ces langues régionales, mais aussi éviter de donner à l'une d'entre elles une préférence symbolique par rapport à une autre.

Incluez-le dans votre menu de navigation principal.

Même si le bouton standard de changement de langue de Weglot est assez neutre, vous souhaiterez peut-être rendre la marque de votre site aussi cohérente que possible, et la meilleure façon de vous assurer que votre bouton de langue fait partie de cette stratégie est de l'inclure dans votre menu de navigation principal .

Il sera ainsi toujours visible sur toutes les pages de votre site, dans la même position, et ressemblera aux autres boutons de navigation en termes de couleur et de style de police.

Vous pouvez le faire en allant dans la section "Pages" de votre éditeur de site Squarespace. Sous "Navigation principale", vous verrez un bouton "+" qui vous permet d'ajouter un bouton à votre barre de navigation principale ; cliquez dessus, et vous verrez une petite fenêtre apparaître, comme dans la capture d'écran ci-dessous :

Vous pouvez intituler le lien comme le nom de la langue vers laquelle il mènera et, dans le champ de contenu "Lien", saisir "Weglot" suivi du code linguistique à deux lettres de la langue en question.

Retour aux sources : Quatre points essentiels pour un succès multilingue sur Squarespace

Maintenant que nous avons abordé certaines des fonctionnalités de conception multilingues de Squarespace et que nous avons passé en revue quelques exemples, récapitulons ce que vous devez garder à l'esprit lorsque vous faites entrer votre site Squarespace dans la sphère multilingue :

• Choisissez votre modèle judicieusement. Il s'agit de la décision la plus fondamentale que prend tout utilisateur de Squarespace : le choix de votre modèle définit le reste de votre flux de travail. Assurez-vous d'en choisir un qui sera aussi bien adapté à la traduction.

• Séparez votre texte de vos images. Évitez de télécharger des images contenant déjà du texte si vous souhaitez que vos utilisateurs puissent le lire ; téléchargez plutôt des images sans texte en tant que bannières ou éléments multimédias et utilisez les multiples options de blocs de texte de Squarespace pour taper par-dessus ou autour de ces images.

• La typographie est essentielle. Utilisez des polices disponibles sur Squarespace, dans toutes les écritures dont vous avez besoin - cela garantira une image de marque cohérente sur l'ensemble de votre site, pour tous vos visiteurs.

• Donnez un coup de pouce à votre bouton. Un bouton de changement de langue personnalisé sera plus fluide sur votre site Squarespace multilingue et ne paraîtra pas déplacé - un autre petit détail qui donnera à vos utilisateurs de la langue cible l'impression d'être pris en considération au même titre que ceux de la langue d'origine.

Comme pour tout autre CMS, Weglot fonctionne très bien sur Squarespace. Essayez-le avec un essai gratuit dès aujourd'hui.

Découvrez comment installer Weglot sur votre site Squarespace.