9 tips om een meertalige website te ontwerpen

In een wereld waarin we steeds meer online zijn, worden meertalige websites steeds gebruikelijker. Maar ze ontwerpen? Daar komt meer bij kijken dan je zou denken, vooral als je ook denkt aan het ontwerp van je website en wat je daaraan dient te wijzigen.

De basis is eenvoudig - met Weglot kun je in minder dan 5 minuten verschillende talen aan je site toevoegen. Maar je moet ook nadenken over waar je jouw taalswitcher gaat plaatsen, over hoe je veranderingen in je lay-out aanpast wanneer een gebruiker overschakelt van Engels naar een taal die van rechts naar links gelezen wordt en over het gebruik van cultureel geschikte kleuren, afbeeldingen en pictogrammen.

In deze gids bekijken we een aantal van de belangrijkste elementen die je dient te overwegen bij het ontwerpen en plannen van een meertalige website.

1. Gebruik internationale sjablonen voor consistente branding

Wanneer bezoekers op je meertalige website terechtkomen, wil je dat zij een consistente gebruikerservaring hebben, ongeacht op welke taalversie van je site ze terechtkomen. Dit betekent dat Indiase bezoekers die je Engelse site bezoeken dezelfde branding en vormgeving moeten zien als de opv de versie in het Hindi.

Je kunt niet voorkomen dat tweetalige of meertalige bezoekers verschillende versies van je meertalige site zien, maar je kunt er wel voor zorgen dat ze dezelfde branding, lay-out en webdesignelementen zien wanneer ze schakelen van taal.

Als  je een contentmanagementsysteem gebruikt, zoals WordPress, is het met Weglot eenvoudig om een consistente meertalige website te ontwerpen. Weglot integreert het thema van je websitebuilder en vertaalt je contentautomatisch. Het integreert ook alle andere belangrijke onderdelen van de functies van je site, zoals e-commerceplugins. Zo heb je geen reden is om verschillende thema's of ontwerpen te hebben voor de verschillende talen die je toevoegt aan je meertalige website.

Wanneer je de homepagina van Airbnb bezoekt vanuit een land als Australië ...

... en dan overschakelt naar het Japans, is het ontwerp en de huisstijl consistent in beide talen.

Niet alleen helpt een direct herkenbaar ontwerp bij het versterken van je branding, maar ook bij toekomstige updates van je meertalige website. Daarnaast  vermindert het eventuele problemen wanneer er door verschillende talen nood is aan wijzigingen aan de UI of UX.

2. Zorg ervoor dat de taalswitcher gemakkelijk te vinden is

Plaats het menu voor de taalkeuze op een prominente plaats op je startpagina en op elke andere pagina van je site. Meertalige websites hebben de taalswitcher vaak in de header of footer van de pagina staan.

Welke optie je ook kiest voor je site, zorg ervoor dat de taalswitcher gemakkelijk te vinden is.

Je moet er ook voor zorgen dat de taalopties glashelder zijn. Het is het beste om naar een taal te verwijzen in de moedertaal. Gebruik bijvoorbeeld "Deutsch" in plaats van "Duits" en "日本語" in plaats van "Japans".

Asana gebruikt bijvoorbeeld een vervolgkeuzemenu met de namen van de verschillende beschikbare talen:

Je wilt dat bezoekers van je meertalige site zich welkom voelen, ongeacht welke taal ze spreken. Dit bereik je door een taalswitcher op een zichtbare plaats te zetten.

3. Laat bezoekers hun voorkeurstaal kiezen

Je zou denken dat de keuze van de voorkeurstaal door de gebruikers een no-brainer is, maar veel meertalige sites maken het lastig om een taal te kiezen. In plaats daarvan dwingen ze gebruikers om van regio te wisselen.

Dat is schering en inslag bij vooral de grote merken. Je ziet vaak dat je gedwongen wordt om de regio op hun meertalige site te veranderen (bijv. overschakelen van www.adobe.com naar www.adobe.com/us/) wanneer je alleen de standaardtaal wil veranderen.

Het is niet omdat iemand Hindi spreekt dat hij naar die regio wil overschakelen voor de meertalige website van een bedrijf. Wat als ze in New York wonen en willen kopen op de Amerikaanse site, maar de site in het Hindi willen lezen? Maak het niet lastig om aankopen via je meertalige website te doen. Help je bezoekers om toegang te krijgen tot je content in de taal van hun voorkeur.

Hieronder zie je een voorbeeld van een bedrijf dat bezoekers de taal van hun voorkeur laat kiezen. Uber toont zijn opties om van taal te veranderen in de voettekst:

Als je op 'English; drukt, verschijnt er een venster waarin je je voorkeurstaal kunt kiezen uit Engels en Frans.

Wat gunstig is aan het taalomschakelingsontwerp van Uber is dat bezoekers hun voorkeurstaal kunnen selecteren zonder dat ze gedwongen worden om van regio te wisselen.

Als je de gebruikerservaring voor je bezoekers nog verder wilt verbeteren, kun je overwegen om hun standaardtaal te onthouden, zodat de volgende keer als ze je eertalige website bezoeken, deze automatisch in hun moedertaal wordt geladen.

Automatische detectie van talen

Veel meertalige websites detecteren de moedertaal van de webbrowser om automatisch de primaire taal voor de gebruikers in te stellen.

Hoewel dit gebruikers wat tijd bespaart, is het leveren van automatische vertalingen met behulp van taaldetectie geen exacte wetenschap. Het is belangrijk om rekening te houden met gebruikers die op de 'verkeerde' versie van je website terechtkomen.

Een bezoeker kan zich fysiek in Spanje bevinden, waardoor je website automatischSpaans zal detecteren, maar het kan ook een moedertaalspreker van het Engels zijn die geen Spaans kan lezen.

Dus als je automatisch locaties laat detecteren, zorg dan ook voor een taalswitcher zodat bezoekers verschillende talen kunnen selecteren.

Weglot biedt de optie om je bezoekers automatisch door te sturen op basis van de taal van hun browser. Zie Weglot in actie op uw website met een 14-daagse gratis proefversie.

Vlaggen vs. taalnamen

Vlaggen worden vaak gebruikt om een taal aan te geven, maar er zijn enkele contextuele aspecten waar je rekening mee dient te houden:

• Vlaggen staan voor landen, niet voor talen.
• Een land kan meer dan één officiële taal hebben.
• Een taal kan in meer dan één land gesproken worden.
• Bezoekers herkennen een vlag misschien niet (vanwege de grootte van het pictogram) of raken in de war door vlaggen die op elkaar lijken

Uiteindelijk wilt je taalswitchers bieden die gemakkelijk te begrijpen zijn in elke taal.

4. Houd rekening met tekstuitbreiding

Wanneer tekst wordt vertaald van de ene taal naar de andere, zoals met Google Translate, zullen de lengte van de originele tekst en de vertaling verschillen. Dit kan een uitdaging zijn bij het maken van een ontwerp voor je website.

Sommige geschreven talen zijn beknopter dan andere. Talen zoals Japans en Chinees gebruiken één of twee karakters om informatie over te brengen, terwijl je in andere talen misschien meerdere woorden nodig hebt.

Talen als Spaans en Engels hebben veel woorden nodig en nemen soms wel 30% meer ruimte in dan andere talen.

De W3C gids voor tekstgrootte in vertalingen, die we ten zeerste aanbevelen om volledig te lezen, biedt een aantal goede adviezen.

Het W3C benadrukt waarom het cruciaal is dat automatische vertaaltools over adaptieve UI-elementen beschikken, zoals knoppen, invoervelden en beschrijvende tekst.

Toen Flickr bijvoorbeeld in verschillende talen werd vertaald, moesten ontwerpers rekening houden met de tekst onder foto's die het aantal weergaven aangeven.

De onderstaande tabel toont een vergelijking van de lengte van het woord 'weergave' in verschillende talen in verhouding tot het oorspronkelijke Engels:

Dat is een uitbreiding van 300% van het Engels naar het Italiaans!

Je moet dus onthouden dat tekst normaal gesproken in de breedte uitzet of inkrimpt, dus zorg ervoor dat je meertalige website daar rekening mee houdt. Bedenk ook dat hoe korter de brontekst, hoe langer de vertaling waarschijnlijk zal zijn. Als je merkt dat ruimte een probleem is, probeer dan een andere en minder letterlijke vertaling of pas de lettergrootte aan op basis van de nieuwe taal.

Karakter en lijnhoogte zijn een andere overweging. Het is gebruikelijk dat niet-Latijnse tekst veel langere tekens heeft dan Latijnse tekst. Scripts zoals Arabisch hebben ook meer verticale ruimte tussen de regels nodig dan Latijnse talen.

5. De compatibiliteit en codering van weblettertypes

Het W3C zegt dat je altijd de codering van je webpagina's moet opgeven. UTF-8 wordt aanbevolen om ervoor te zorgen dat speciale tekens goed worden weergegeven, ongeacht de taal.

Zo kan de UTF-declaratie in de kop van je pagina's: eruitzien:

De lettertypes die je gebruikt moeten compatibel zijn met alle niet-Engelse talen die je meertalige WordPress-site ondersteunt, vooral met niet-Latijnse talen. Dit betekent dat de lettertypes die je gebruikt alle benodigde tekens en tekens moeten bevatten.

Sommige lettertypes ondersteunen Latijnse scripts, maar geen talen die van rechts naar links worden gelezen of Cyrillisch, dus controleer goed of de niet-Engelse talen die je nodig hebt, worden ondersteund voordat je lettertypes gaat gebruiken.

Met Google Fonts kun je talen selecteren voordat je een lettertypepakket downloadt:

Eén taal kan honderden tekens bevatten, waardoor lettertypebestanden enorm groot kunnen worden. Dat is nog iets om rekening mee te houden bij het kiezen van lettertypes voor je website in meerdere talen.

6. Ontwerp voor talen die van rechts naar links worden gelezen

Het ontwerpen van pagina's voor talen die van rechts naar links worden gelezen, kan uitdagingen met zich meebrengen. Zoals SteelKiwi-ontwikkelaar Robert Dodis schrijft voor Smashing Magazine, betekent ontwerpen voor deze talen dat we 'de interface omdraaien'.

Zo ziet bijvoorbeeld het links-naar-rechtsontwerp van Facebook eruit:

En zo ziet het ontwerp van Facebook eruit in het Arabisch:

Zelfs de schuifbalk verandert van plaats!

Het spiegelen van je ontwerp is iets dat je dient te overwegen als je ontwerpt voor talen die je zowel van links naar rechts als van rechts naar links leest.

We raden je ten zeerste aan om Roberts artikel in Smashing Magazine te lezen voor een gedetailleerd overzicht van hoe je ontwerpt voor RTL. We willen het wiel hier niet opnieuw uitvinden, dus lees zijn tutorial. We willen je laten zien hoe Weglot RTL-talen ondersteunt en het vertaalproces voor jouw meertalige website eenvoudig kan maken.

De vertaalservice van Weglot ondersteunt talen die van rechts naar links gelezen worden en met CSS-regels kun je de lay-out van je site hierop aanpassen. Dit zijn enkele van de beschikbare talen due van rechts naar links gelezen worden:

• Arabisch (ar)
• Hebreeuws (he)
• Perzisch (fa)
• Urdu (ur)

Nadat je in Weglot een taal hebt toegevoegd die van links naar rechts wordt gelezen, kun je de weergave aanpassen door CSS-regels toe te passen op je lay-out. Ga in de WordPress-admin naar Weglot > Ontwerp taalknop (Optioneel) en scrol naar beneden naar Override CSS. Voeg alle CSS-regels toe die je wilt in de tekstzone. Ke wilt misschien het lettertype, de grootte, de regelhoogte en meer wijzigen om de primaire taal aan te passen zodat deze bij jouw ontwerp past.

Dat is alles wat je hoeft te doen om talen die van rechts naar links worden gelezen toe te voegen en aan te passen met Weglot! J kunt meer lezen over de wijze waarop Weglot deze talen ondersteunt in de documentatie.

7. Gebruik afbeeldingen en pictogrammen die cultureel geschikt zijn

Afbeeldingen, pictogrammen en andere grafische elementen zijn essentiële elementen van elke webpagina. Maar beelden zijn van nature subjectief en kunnen op verschillende manieren worden geïnterpreteerd als ze in een andere culturele context worden geplaatst.

Op de Franse versie van de homepagina van Clarins staat bijvoorbeeld een Kaukasische vrouw:

Maar als u de Japanse homepagina van het bedrijf bezoekt, zie je een afbeelding van een Japanse vrouw:

Beelden kunnen ook beledigend zijn. Beelden die voor een westers publiek onschuldig lijken, kunnen in een ander land taboe zijn. Zo worden afbeeldingen van homoparen of gendergelijkheid niet geaccepteerd in landen waar homoseksualiteit nog steeds illegaal is en vrouwenrechten nog niet volledig worden erkend.

Je dient ook rekening te houden met kleinere elementen, zoals pictogrammen, en wat ze betekenen voor mensen vanuit diverse locaties die je meertalige website bezoeken. Een pictogram van een wereldbol voor een Engelstalig Australisch publiek zou er bijvoorbeeld heel anders uitzien voor gebruikers in Afrika:

Het derde pictogram hierboven geeft een wereldbol aan, maar bevat geen specifiek land of regio, waardoor het meer geschikt is voor gebruik op een meertalige website.

Je dient daarom afbeeldingen en andere grafische elementen te bekijken en daarbij rekening te houden met regionale en culturele gevoeligheden.

Vermijd het gebruik van afbeeldingen en andere grafische elementen met ingesloten tekst. Je kunt ingesloten tekst niet vertalen met hulpmiddelen zoals Weglot, dus vermijd het deze.

8. Gebruik cultureel passende kleuren

De manier waarop verschillende culturen kleur zien en interpreteren verschilt enorm over de hele wereld.

In de westerse cultuur symboliseert rood bijvoorbeeld liefde, energie, passie en gevaar. In Aziatische culturen is het een zeer belangrijke kleur, die geluk, voorspoed, feest en een lang leven symboliseert. Omgekeerd wordt rood in sommige Afrikaanse landen geassocieerd met dood en agressie.

Blauw wordt beschouwd als de veiligste en wereldwijd meest geaccepteerde kleurkeuze voor ontwerpen omdat het veel positieve associaties heeft. Het is een kalmerende kleur die wordt beschouwd als rustgevend en vredig, ondanks het feit dat het ook wordt geassocieerd met verdriet en depressie. Blauw is ook de populairste kleur voor banklogo's omdat het staat voor vertrouwen en autoriteit.

Wanneer je kleuren kiest voor het ontwerp van je meertalige website, zorg er dan voor dat je de symboliek raadpleegt die hoort bij de kleuren die je wilt gebruiken.

9. Datums en andere formaten

Niet elk land gebruikt dezelfde datumnotatie, zelfs niet in de verschillende Engelstalige landen. In het Verenigd Koninkrijk en Europa is het bijvoorbeeld gebruikelijk om de datum te schrijven als datum-maand-jaar, terwijl het in de VS wordt geschreven als maand-datum-jaar.

Je moet misschien ook maateenheden vertalen, wat helpt met SEO, afhankelijk van je doelgroep. Terwijl 90% van de wereld het metrieke stelsel gebruikt, gebruiken de VS, Liberia en Myanmar nog steeds het imperiale stelsel van maten en gewichten.

De juiste WordPress-vertaalplug-in voor je ontwerp

WordPress-vertaalplug-ins zijn er in alle soorten en maten. En hoe ze werken met je specifieke ontwerp varieert sterk. Met Weglot ben je verzekerd van een oplossing met een gegarandeerd naadloze integratie met je meertalige website.

Je kunt zelfs Weglots Visuele editor gebruiken om je content te vertalen aan de front-end van je site en de diverse subdomeinen, zodat je kunt zien hoe het eruit ziet in de context van het ontwerp en de lay-out van je site, vergelijkbaar met Google Translate.

Met Weglot zijn het ontwerp en de locatie van je taalswitcher 100% aanpasbaar. De standaardknop is zo ontworpen dat hij op elke site past, maar je kunt hem ook aanpassen via aangepaste CSS om elke indeling te gebruiken die je maar wenst.

Bovendien ondersteunt Weglot de ontwerpprincipes die in deze post worden beschreven, inclusief:

• Een algemeen sjabloon gebruiken voor consistente branding
• Gemakkelijk te vinden opties om van taal te wisselen
• De mogelijkheid om bezoekers hun voorkeurstaal te laten kiezen
• Automatische UTF-codering
• Ondersteuning voor talen die van rechts naar links worden gelezen

Een greep uit de belangrijkste ontwerpgerelateerde functies die Weglot biedt: je taalswitcher aanpassen aan jouw voorkeuren.

Taalswitchers voor je site aanpassen met Weglot

Nadat je Weglot-plug-in hebt geinstalleerd op je meertalige WordPress-website en deze hebt ingesteld, wordt je gevraagd om je API-code, je standaardtaal en de taal waarin  je de content wilt vertalen in te voeren, zoals bij Google Translate.

Als  je nog geen Weglot-account hebt, dien je er een aan te maken om je API-code te ontvangen.

Zodra je je wijzigingen hebt opgeslagen, vernieuw je de front-end van je nieuwe meertalige website en zie je een nieuwe taalswitcher in de rechterbenedenhoek. Als je daarop drukt, worden de beschikbare talen weergegeven, zodat je taal van je voorkeur wordt weergeven.

Om te beginnen met het maken van basisaanpassingen, gaa je naar Weglot > Ontwerp taalknop (Optioneel). Op dit scherm kun je kiezen:

• Wel of geen dropdown gebruiken
• Wel of geen vlaggen gebruiken
• Soorten vlaggen
• De taalnamen weergeven
• Alleen de taalcodes weergeven

In het gedeelte Override CSS kun je CSS-regels toepassen om de taalswitcher op je meertalige website aan te passen. Je kunt zo bijvoorbeeld:

• De pijl op de knop verwijderen
• De achtergrondkleur wijzigen
• Een schuifbalk toevoegen
• De rand verwijderen
• Vulling toevoegen

Weglot geeft een aantal voorbeelden in dit artikel over het aanpassen van het ontwerp van taalknoppen.

Wanneer je naar beneden scrolt in het configuratiescherm van Weglot, vind je daar instructies voor het plaatsen van de taalswitcher:

• In menu. Ga naar Uiterlijk -> Menu's en sleep de link Weglot Translate Custom naar de gewenste plek.
• Als een widget. Ga naar Uiterlijk -> Widgets en sleep de widget Weglot Translate naar de gewenste plek.
• Met een shortcode. Gebruik de Weglot shortcode [ weglot_switcher ] (zonder de spaties) om uw taalswitcher te plaatsen waar u wilt.
• In de broncode. Je kunt de volgende code waar je maar wilt toevoegen aan de broncode van je HTML-pagina:

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

Om te tonen hoe de taalswitcher kan worden aangepast op een meertalige website (of het nu een WordPress, een Shopify of een ander type website is), zie je hieronder hoe Patyka de taalswitcher weergeeft in de linkerbovenhoek van de pagina.

De talen worden weergegeven met hun naam en wanneer u op de schakelaar klikt en een taal selecteert, wordt de inhoud op de pagina bijgewerkt en vertaald naar de door u gekozen taal.

Casestudy: Maestrooo gebruikt Weglot

Maestrooo is een in Frankrijk gevestigd webontwikkelingsbureau  dat in 2013 werd opgericht en dat onder andere From Future en Patyka tot zijn klanten mag rekenen. Maestrooo verzorgt nu het merendeel van de Shopify Plus-klanten in Frankrijk.

Maestrooo was op zoek naar een solide en betrouwbare meertalige website-oplossing die zich gemakkelijk kon aanpassen aan de eisen van hun klanten. Na het testen van veel oplossingen en de moeilijkheden die zijn ondervonden met SEO of hreflang-management, ontdekte het team Weglot.

Weglot vertaalt alle content van Maestrooo's klantensites, of het nu gaat om dynamische content, content gegenereerd door andere apps of zelfs het betalingsproces, zonder impact op de lay-out van hun meertalige websites.

Naast het ontwerp van aangepaste websites voor hun klanten, ontwikkelt Maestrooo ook de officiële thema's voor Shopify's Theme-store. Terwijl andere meertalige websiteoplossingen vaak de opmaak van Maestrooo's thema's breken, biedt Weglot een vertaaloplossing die telkens goed werkt.

Maestrooo helpt elk jaar tussen de 8.000 en 12.000 klanten om aan de slag te gaan met Shopify door Weglot te gebruiken voor hun meertalige website.

Kies voor volledige culturele optimalisatie met een gelokaliseerd ontwerp

De ontwerpprincipes die we in deze post hebben besproken, zetten je op het juiste spoor om een meertalige website te maken die er niet alleen geweldig uitziet, maar ook een prettige gebruikerservaring biedt.

Om bezoekers en klanten van je website een uitstekende ervaring in hun moedertaal te bieden, is het ook de moeite waard om verder te kijken dan je meertalige website. Overweeg bijvoorbeeld om je marketingmateriaal en klantenondersteuning te vertalen.

Houd ook rekening met de snelheid en prestaties van je internationale website. In sommige landen die niet het geluk van snelle internetsnelheden kennen, maakt het downloaden van grote taalpakketten het moeilijker voor bezoekers om toegang te krijgen tot je content.

Met de juiste plugin voor het vertalen van websites in meerdere talen en een site-ontwerp dat gemakkelijk te gebruiken vertaalopties biedt, help je klanten met een visueel aantrekkelijke UI en UX in de taal van hun voorkeur. Probeer Weglot gratis uit met onze 14-dagen gratis proefversie, of neem een product tour en meld je gratis aan!