Share
Att erbjuda innehåll på flera språk kan lägga till många nya lager av komplexitet för webbdesign. Att översätta artiklar är bara den första hindret; strukturering av en flerspråkig webbplats kan vara ganska svårt. För att hjälpa dig att få det rätt ska jag erbjuda några tips och dela några av våra erfarenheter på Tuts + för att gå flerspråkig.
Det första tipset är inte riktigt relaterat till webbdesign, men det är viktigt ändå. När du erbjuder innehåll på flera språk är det bäst att inte förlita sig på översättningsprogram. Förse mig inte, verktyg som Google Translate är lätta att använda och ständigt förbättras, men noggrannheten i den översatta texten varierar (vi har till och med fallit fel på detta vid Tuts + ibland!)
Initiativ som Google Translate Community förfinar hur översättningar görsAv denna anledning är det en bra idé att få en mänsklig översättare. Välj antingen en betald tjänst som Fliplingo eller (beroende på ditt projekt) använda community-driven översättningsplattformar som Native. Människor har en bättre kunskap om lokala ordförråd och de subtila nyanser av språk. Vid skrivningstillfället har automatiserad programvara inte nått den punkten.
På Tuts + har vi våra läsare tack för att du översätter våra handledning.
En flerspråkig webbplats är värdelös utan att kunna ändra språk. Ofta hittar du flerspråkiga webbplatser med hjälp av en rullgardinsmeny, placerad högst upp till höger på sidan (för vänster till höger innehåll i övre vänstra hörnet är mer lämpligt). Du kan också hitta omkopplare i sidfoten (det tillvägagångssätt som IBM.com väljer). Oavsett vilket mönster du går för, se till att rullgardinsmenyn är lätt att se och komma åt.
Vid Tuts + använder vi a Välj element i posten meta detaljer, plus en lista i sidofältet för att se till att baserna är täckta:
Om du väljer att använda ett väljningselement rekommenderar W3C några användbara riktlinjer.
Flaggor används ofta för att ange ett språk. Jag håller emellertid med Gunnar Bittersmann, eftersom jag inte är ett stort fan av att använda flaggor för språkomkopplare. Tänk på följande skäl:
Till exempel:
https://www.duolingo.comDuolingo försvarar deras användning av den brasilianska flaggan eftersom de undervisar brasilianska portugisiska. Men deras variant av spanska är närmare Latinamerikansk spanska än Castellano (traditionell spanska), så användningen av flaggor här är inkonsekvent och förvirrande.
Det är bäst att referera till ett språk på sitt eget språk, till exempel "Deutsch" istället för "German". Om du beställer språk alfabetiskt kommer det också att hjälpa, så att användare enkelt kan hitta rätt version. Ta en titt på Wikipedias sidofält för inspiration.
Vissa webbplatser omdirigerar användarna till hemsidan när de byter språk. Det kan vara förvirrande, eftersom användarna måste hitta sidan igen. För att hålla dina besökare nöjda, så långt som möjligt, se till att de presenteras med samma sida (översatt) när de byter språk.
Vill du ställa in ett standardspråk för första gången besökare? Det är möjligt att upptäcka användarens språk och visa sidan automatiskt på användarens språk. Dölja dock inte de andra alternativen, om användaren vill byta.
Läs mer om Smashing Magazine: Ska du fråga användaren eller deras webbläsare?
Ditt innehåll måste läsas, så se till att teckenkodningen i sidans huvud är korrekt inställd:
Från W3C:
"En Unicode-baserad kodning som UTF-8 kan stödja många språk och kan rymma sidor och formulär i någon blandning av dessa språk."
Tänk sedan på de faktiska teckensnitten: ditt webbfont måste vara kompatibelt med alla språk du stöder, särskilt för icke-latinska baserade språk. Det betyder att det använda tecknet måste innehålla alla tecken och glyfer som du vanligtvis behöver. Vissa språk innehåller hundratals tecken, vilket gör teckensnittsfilerna själva mycket tunga. Överväg därför att raffinera de karaktärsgrupper som ingår i filerna.
Det finns flera webbplatser som erbjuder icke-latinska teckenbaserade teckensnitt, till exempel typebank.co.jp, och en snabb Google-sökning hjälper dig att hitta fler alternativ.
https://www.typebank.co.jpDet finns också andra typografiska överväganden. Glöm inte att vissa språk är mer "ordiga" och därför ta upp mer utrymme. En knapp "lägg i varukorgen" kan vara översatt på nederländska till 'aan winkelwagen add'. Den engelska versionen består av 11 tecken, den nederländska versionen 25, som tar upp dubbelt så mycket utrymme. När det är knappt utrymme kan du prova en annan, mindre bokstavlig översättning, eller ändra teckensnittsstorleken baserat på språket.
Andra icke-latinska teckensnitt kan behöva en annan linjehöjd eller teckenstorlek till din latinska standard. Kinesiska tecken, till exempel, är visuellt mer komplexa än latinska tecken, vilket betyder att de måste vara tillräckligt stora för tydlig skillnad. Dessa faktorer kan väsentligt ändra utseendet på sidan, så ha dem i åtanke.
Här är något du kanske inte är medveten om: Språk har ingen riktning, men manus de är skrivna i gör. Till exempel kan Azeri (talas av Azerbajdzjans befolkning) skrivas med latinska eller kyrilliska skript, i vilket fall det är skrivet LTR (vänster mot höger). Alternativt kan det skrivas i arabiskt manus, i vilket fall det är skrivet RTL (höger till vänster).
De flesta språk använder skript som skrivs och läses från vänster till höger, men där det inte är fallet är det bra att spegla layouten på hela webbsidan. Ja, hela layouten. Text, bilder, navigering, sidor, knappar, rullgardinsmenyer, rullningsfält ... ska alla speglas.
Tom Maslen förklarar hur BBC-laget använder Sass för att hjälpa dem med tvåriktiga layouter:
För innehåll, ange textens riktning via dir = "rtl" attribut. Detta attribut stöds av alla större webbläsare. Här är ett HTML-exempel:
Eller använd CSS:
.innehåll riktning: rtl; /* Höger till vänster */
En gotcha vi stött på vid Tuts + var inbäddning av inline code snippets inom RTL-text (som på arabiska, persiska och hebreiska översättningar). Texten läser RTL, men inline-koden måste förbli LTR. I det här exemplet måste inline-koden alltid läsas html, kropp bredd: 100%; :
Efter det engelska originalet kan du se vad som händer med inline-koden inom det andra exemplet. Exempel 3 försöker åsidosätta det genom att ange:
.arabisk kod riktning: ltr;
men som du kan se har den lite eller ingen effekt. Det är här Unicode-bidi egendom kommer in. Paras med bädda in värde, hjälper det oss att åsidosätta webbläsarens beräknade riktning för inbäddade element. Exempel 4 visar att detta har fungerat:
.arabisk kod riktning: ltr; unicode-bidi: inbädda;
Det finns flera sätt att strukturera webbadresserna på flerspråkiga webbplatser. Varje alternativ har fördelar och nackdelar.
En domännamn på toppnivå (ccTLD) är kopplad till ett visst land, som .fr för Frankrike och .es för Spanien.
ccTLDs är en tydlig signal för sökmotorer som en webbplats riktar in sig mot användare i det landet. Serverplatsen är irrelevant och det är lätt att skilja webbplatser. De största nackdelarna är tillgången på domäner och extra kostnader.
Vissa domännamnstillägg är inte knutna till ett land eller en region. Den mest populära är .com, men det finns andra ofta använda generiska toppdomäner, som .net och .org.
Dessa gTLDs kan användas i kombination med en underdomän, till exempel fr.website.com. Det är lätt att ställa in och de flesta sökmotorer förstår denna typ av geotargeting. Användarna kanske inte alltid känner igen innehållets språk baserat på webbadressen.
Underkataloger är underdomäners motsvarighet. De används ofta för att strukturera innehåll (till exempel website.com/blog eller website.com/tshirts), men kan också användas för geografiska ändamål. I det här fallet använder vi website.com/fr för att strukturera våra webbadresser.
Med den här tekniken kan allt vara värd på samma server. Inställningen är väldigt lätt och du kan använda Google Search Console för att identifiera de olika språken. En nackdel är att användare kanske inte känner igen geotargeting från URL-adressen ensam (t ex är webshop.com/de/ på tyska eller inte?)
Slutligen finns det URL-parametrar, till exempel website.com?country=it. URL-parametrar rekommenderas inte, eftersom de är svåra för sökmotorer att tolka.
Personligen gillar jag att använda underkataloger i kombination med en gTLD. Underdomäner används oftast för att skilja ut innehåll som är helt annorlunda. Eftersom flerspråkiga webbplatser i princip är översättningar av samma innehåll (större delen av tiden), är underkataloger en uppenbar lösning.
Du kan använda språket i webbadressen, till exempel:
Eller kombinera språk och plats:
För att förhindra dubbla innehållsproblem är det bäst att identifiera en föredragen version för varje språk / plats. Vi kan använda ett enkelt HTML-länkelement för detta, nämligen rel = "alternate" hreflang = "x". Flera olika hreflang taggar ska användas på en sida en som refererar till sig själv och en länk till varje alternativ.
På en webbsida kan den här koden se ut så här:
Den här koden berättar för sökmotorer att example.com riktar sig till engelska högtalare i Storbritannien. Det står också att det finns två variationer av samma innehåll, nämligen en för USA och en för Australien.
Vid utformning av flerspråkiga webbplatser finns det flera andra saker att tänka på, till exempel:
Inte alla länder använder samma datumformat. Ibland måste du konvertera datum från den gregorianska kalendern till till exempel den persiska kalendern.
Länder har olika etiska synpunkter. Det finns en kulturspecifik karaktär av sexualitet, humor, symbolism etc. som lätt överskådas när man översätter en webbplats. Till exempel: i vissa länder är det helt acceptabelt att visa ett foto av ett homosexuellt par, medan andra länder kan finna den här offensiven.
Använder du en captcha på din webbplats? Se till att det är på samma språk som sidinnehållet. Som en brittisk besökare är det osannolikt att du vill lösa en rysk captcha.
Eftersom de inte är svåra nog redan ... Hjälp dina besökare med telefonnummer på din webbplats genom att inkludera landskoden. Du kan hitta en lista med alla landskoder på den här sidan.
Det finns många fler överväganden när du förbereder en webbplats för fullständig internationalisering, men dessa pekare borde ha gett dig en bra bas för att arbeta från. Låt oss veta i kommentarerna vilka andra tips du har för flerspråkig webbdesign och anmäla dig till nyhetsbrevet Tuts + Translation Project om du är intresserad av att höra vad vi ska göra!
Accentsconagua