Share
Het aanbieden van inhoud in verschillende talen kan veel nieuwe lagen van complexiteit aan het webontwerp toevoegen. Het vertalen van artikelen is slechts de eerste hindernis; het structureren van een meertalige website kan behoorlijk moeilijk zijn. Om je te helpen het goed te doen, ga ik wat tips geven en deel een aantal van onze ervaringen bij Tuts + om meertalig te gaan.
De eerste tip is niet echt gerelateerd aan webdesign, maar het is wel belangrijk. Wanneer u inhoud in meerdere talen aanbiedt, kunt u het beste niet vertrouwen op vertaalsoftware. Begrijp me niet verkeerd, tools zoals Google Translate zijn eenvoudig te gebruiken en voortdurend te verbeteren, maar de nauwkeurigheid van de vertaalde tekst varieert (we zijn er zelfs bij Tuts + soms van afgeweken!)
Initiatieven zoals de Google Translate Community verfijnen de manier waarop vertalingen worden gemaaktOm deze reden is het een goed idee om een menselijke vertaler te krijgen. Kies voor een betaalde service zoals Fliplingo of gebruik (afhankelijk van uw project) community-driven vertaalplatforms zoals Native. Mensen hebben een betere kennis van het lokale vocabulaire en de subtiele nuances van taal. Op het moment van schrijven heeft geautomatiseerde software dat punt nog niet bereikt.
Bij Tuts + hebben we onze lezers te danken voor het vertalen van onze tutorials.
Een meertalige website is nutteloos zonder de mogelijkheid om van taal te veranderen. Vaak vindt u meertalige websites met een vervolgkeuzelijst die rechtsboven op de pagina wordt geplaatst (voor links-naar-rechts inhoud is de linkerbovenhoek meer geschikt). U kunt ook switchers vinden in de voettekst (de benadering die IBM.com kiest). Welk patroon u ook kiest, zorg ervoor dat de vervolgkeuzelijst goed zichtbaar is en toegankelijk is.
Bij Tuts + gebruiken we een kiezen element in de metadetails van het bericht, plus een lijst in de zijbalk om ervoor te zorgen dat de basissen worden gedekt:
Als u ervoor kiest om een select element te gebruiken, beveelt de W3C enkele nuttige richtlijnen aan.
Vlaggen worden heel vaak gebruikt om een taal aan te duiden. Ik ben het echter met Gunnar Bittersmann eens, omdat ik geen grote fan ben van het gebruik van vlaggen voor taalwisselaars. Overweeg de volgende redenen:
Bijvoorbeeld:
https://www.duolingo.comDuolingo verdedigen hun gebruik van de Braziliaanse vlag omdat ze Braziliaans Portugees lesgeven. Maar hun variant van het Spaans is dichter bij Latijns-Amerikaans Spaans dan bij Castellano (traditioneel Spaans), dus het gebruik van vlaggen is hier inconsistent en verwarrend.
Het is het beste om naar een taal in de eigen taal te verwijzen, bijvoorbeeld 'Deutsch' in plaats van 'Duits'. Het alfabetisch bestellen van talen helpt ook, zodat gebruikers eenvoudig de juiste versie kunnen vinden. Bekijk de zijbalk van Wikipedia voor inspiratie.
Bepaalde websites leiden gebruikers om naar de startpagina wanneer ze van taal veranderen. Dit kan verwarrend zijn, omdat gebruikers de pagina dan opnieuw moeten vinden. Om uw bezoekers tevreden te houden, zorg er waar mogelijk voor dat ze dezelfde (vertaalde) pagina krijgen als ze van taal veranderen.
Wilt u een standaardtaal instellen voor nieuwe bezoekers? Het is mogelijk om de taal van de gebruiker te detecteren en de pagina automatisch weer te geven in de voorkeurstaal van de gebruiker. Verberg echter niet de andere opties, voor het geval de gebruiker wil overschakelen.
Lees meer over Smashing Magazine: moet u de gebruiker of zijn browser vragen?
Uw inhoud moet leesbaar zijn, zorg er dus voor dat de tekencodering in de kop van de pagina correct is ingesteld:
Van de W3C:
"Een op Unicode gebaseerde codering zoals UTF-8 kan vele talen ondersteunen en is geschikt voor pagina's en formulieren in elke mengeling van die talen."
Overweeg dan de daadwerkelijke lettertypen: uw weblettertype moet compatibel zijn met alle talen die u ondersteunt, vooral voor niet-Latijnse talen. Dit betekent dat het gebruikte lettertype alle tekens en glyphs moet bevatten die u gewoonlijk nodig hebt. Sommige talen bevatten honderden tekens, waardoor de lettertypebestanden zelf erg zwaar zijn. Overweeg daarom de tekengroepen die u in de bestanden opneemt, te verfijnen.
Er zijn verschillende websites die niet-Latijnse tekens op lettertype aanbieden, zoals typebank.co.jp, en een snelle Google-zoekopdracht helpt u meer alternatieven te vinden.
https://www.typebank.co.jpEr zijn ook andere typografische overwegingen. Vergeet niet dat bepaalde talen "meer" zijn en daarom meer ruimte innemen. Een knop 'toevoegen aan winkelwagen' kan in het Nederlands worden vertaald naar 'aan winkelwagen toevoegen'. De Engelse versie bestaat uit 11 tekens, de Nederlandse versie 25, die twee keer zoveel ruimte innemen. Als er weinig ruimte is, kunt u een andere, minder letterlijke vertaling proberen, of de lettergrootte wijzigen op basis van de taal.
Andere niet-Latijnse lettertypen hebben mogelijk een andere regelhoogte of tekengrootte nodig dan uw Latijnse standaard. Chinese karakters zijn bijvoorbeeld visueel complexer dan Latijnse karakters, wat betekent dat ze groot genoeg moeten zijn om duidelijk te onderscheiden. Deze factoren kunnen het uiterlijk van de pagina enorm veranderen, dus houd ze in gedachten.
Dit is iets waarvan u zich misschien niet bewust bent: talen hebben geen richting, maar de script ze zijn geschreven in doet. Azeri (gesproken door de mensen van Azerbeidzjan) kan bijvoorbeeld worden geschreven met behulp van Latijnse of Cyrillische scripts, in welk geval het LTR is geschreven (van links naar rechts). Als alternatief kan het in het Arabisch schrift worden geschreven, in welk geval het RTL is geschreven (van rechts naar links).
De meeste talen gebruiken scripts die van links naar rechts zijn geschreven en gelezen, maar waar dat niet het geval is, is het handig om de lay-out van de hele webpagina te spiegelen. Ja, de hele lay-out. Tekst, afbeeldingen, navigatie, zijbalken, knoppen, vervolgkeuzemenu's, schuifbalken ... moeten allemaal worden gespiegeld.
Tom Maslen legt uit hoe het BBC-team Sass gebruikt om hen te helpen met bidirectionele lay-outs:
Geef voor inhoud de richting van de tekst op via de dir = "rtl" attribuut. Dit kenmerk wordt door alle belangrijke browsers ondersteund. Hier is een HTML-voorbeeld:
Of gebruik CSS:
.inhoud richting: rtl; /* Rechts naar links */
Eén van de dingen die we tegenkwamen bij Tuts + was het inbedden van inline-codefragmenten binnen RTL-tekst (zoals in het Arabisch, Farsi en Hebreeuws vertalingen). De tekst leest RTL, maar de inline-code moet LTR blijven. In dit voorbeeld moet de inline-code altijd lezen html, body width: 100%; :
Na het Engelse origineel kunt u zien wat er gebeurt met de inline-code in het tweede voorbeeld. Voorbeeld 3 probeert dit op te heffen door te specificeren:
.arabische code richting: ltr;
maar zoals je ziet, heeft het weinig tot geen effect. Dit is waar de unicode-bidi eigendom komt binnen. Gecombineerd met de embed waarde, dit helpt ons om de berekende richting van de browser voor ingesloten elementen te overschrijven. Voorbeeld 4 laat zien dat dit heeft gewerkt:
.arabische code richting: ltr; unicode-bidi: embed;
Er zijn verschillende manieren om de URL's van meertalige websites te structureren. Elke optie heeft voor- en nadelen.
Een landcode op hoofdniveau (ccTLD) is gekoppeld aan een specifiek land, zoals .fr voor Frankrijk en .es voor Spanje.
ccTLD's zijn een duidelijk signaal voor zoekmachines dat een website gebruikers in dat land target. De serverlocatie is niet relevant en het is eenvoudig om websites te scheiden. De grootste nadelen zijn de beschikbaarheid van domeinen en de extra kosten.
Bepaalde domeinextensies zijn niet gekoppeld aan een land of regio. De meest populaire is .com, maar er zijn andere vaak gebruikte generieke hoofddomeinen, zoals .net en .org.
Deze gTLD's kunnen worden gebruikt in combinatie met een subdomein, bijvoorbeeld fr.website.com. Het is eenvoudig in te stellen en de meeste zoekmachines begrijpen dit soort geotargeting. Gebruikers zullen de taal van de inhoud echter niet altijd herkennen op basis van de URL.
Subdirectories zijn de tegenpartij van subdomeinen. Ze worden vaak gebruikt om inhoud te structureren (bijvoorbeeld website.com/blog of website.com/tshirts), maar kunnen ook worden gebruikt voor geotargeting. In dit geval gebruiken we website.com/fr om onze URL's te structureren.
Met deze techniek kan alles op dezelfde server worden gehost. De set-up is heel eenvoudig en u kunt Google Search Console gebruiken om de verschillende talen te identificeren. Een nadeel is dat gebruikers de geotargeting alleen niet herkennen van de URL (bijvoorbeeld is webshop.com/de/ in het Duits of niet?)
Ten slotte zijn er URL-parameters, bijvoorbeeld website.com?country=it. URL-parameters worden niet aanbevolen, omdat ze moeilijk door zoekmachines kunnen worden geïnterpreteerd.
Persoonlijk gebruik ik subdirectories in combinatie met een gTLD. Subdomeinen worden meestal gebruikt om inhoud te scheiden die totaal anders is. Omdat meertalige websites in principe vertalingen van dezelfde inhoud zijn (meestal), zijn submappen een voor de hand liggende oplossing.
U kunt de taal in de URL gebruiken, bijvoorbeeld:
Of combineer de taal en locatie:
Om dubbele inhoudsproblemen te voorkomen, is het het beste om een voorkeursversie voor elke taal / locatie te identificeren. We kunnen hiervoor een eenvoudig HTML-linkelement gebruiken rel = "alternate" hreflang = "x". Meerdere hreflang tags moeten op een pagina worden gebruikt; een die zichzelf verwijst en een link naar elk alternatief.
Op een webpagina kan die code er als volgt uitzien:
Deze code vertelt zoekmachines dat example.com Engelse sprekers in het VK target. Er staat ook dat er twee varianten van dezelfde inhoud zijn, namelijk een voor de VS en een voor Australië.
Bij het ontwerpen van meertalige websites zijn er verschillende andere dingen die u moet overwegen, zoals:
Niet elk land gebruikt hetzelfde datumformaat. Soms moet je data van de Gregoriaanse kalender naar bijvoorbeeld de Perzische kalender converteren.
Landen hebben verschillende ethische standpunten. Er is een cultuurspecifieke aard van seksualiteit, humor, symboliek enz. Die gemakkelijk over het hoofd wordt gezien bij het vertalen van een website. Bijvoorbeeld: in bepaalde landen is het perfect acceptabel om een foto van een homopaar te laten zien, terwijl andere landen dit misschien aanstootgevend vinden.
Gebruikt u een captcha op uw website? Zorg ervoor dat het in dezelfde taal is als de pagina-inhoud. Als Britse bezoeker is het onwaarschijnlijk dat je een Russische captcha wilt oplossen.
Omdat ze al niet moeilijk genoeg zijn ... Help uw bezoekers met telefoonnummers op uw website door de landcode in te voeren. U vindt een lijst met alle landcodes op deze pagina.
Er zijn veel meer overwegingen bij het voorbereiden van een website voor volledige internationalisatie, maar deze tips zouden je een goede basis moeten geven om vanuit te werken. Laat ons in de reacties weten welke andere tips je hebt voor meertalig webontwerp en meld je aan voor de nieuwsbrief van het Tuts + Translation Project als je wilt weten wat we van plan zijn!
Accentsconagua