9 tips för att designa en flerspråkig webbplats

I en alltmer uppkopplad värld blir flerspråkiga webbplatser allt vanligare. Men att designa dem? Det är lite mer att tänka på än du kanske tror, särskilt när du tänker på de webbdesignförändringar du behöver göra på din webbplats.

Grunderna är enkla — med Weglot kan du lägga till olika språk på din webbplats på mindre än 5 minuter. Men sedan måste du tänka på var du ska placera din språkbytare, hur du hanterar ändringar i din layout när en användare byter från engelska till ett språk som skrivs från höger till vänster (RTL), och att använda kulturellt lämpliga färger, bilder och ikoner.

I den här guiden tittar vi på några av de viktigaste designövervägandena för att hjälpa dig att planera för en flerspråkig webbplats som följer bästa praxis.

1. Använd globala mallar för konsekvent varumärkesprofilering

När någon landar på din flerspråkiga webbplats vill du att de ska få en konsekvent användarupplevelse, oavsett vilken språkversion av din webbplats de hamnar på. Det betyder att indiska besökare som besöker din engelska webbplats ska se samma varumärkesprofilering och design som på hindi-versionen.

Du kan inte hindra tvåspråkiga eller flerspråkiga besökare från att se olika versioner av din flerspråkiga webbplats, men du kan se till att de ser samma varumärkesprofilering, layout och webbdesignelement när de byter från standardspråket.

Om du använder ett innehållshanteringssystem, som WordPress, med Weglot, är det enkelt att skapa en konsekvent flerspråkig webbplats. Weglot integreras smidigt med ditt webbplatsbyggares tema och översätter ditt innehåll automatiskt. Det integreras också med alla andra viktiga delar av din webbplats funktionalitet, som e-handelsplugins – vilket betyder att det inte finns någon anledning att ha olika teman eller designer för de olika språken du lägger till på din flerspråkiga webbplats.

Till exempel, när du besöker Airbnbs startsida från ett land som Australien…

… och sedan byter till japanska, är designen och varumärkesprofileringen konsekvent på båda språken.

En design som är lätt att känna igen hjälper inte bara till att stärka ditt varumärke, utan underlättar också framtida uppdateringar av din flerspråkiga webbplats och minskar huvudbryet när olika språk skapar behov av förändringar i användargränssnittet eller användarupplevelsen.

2. Gör språkbytaren riktigt lätt att hitta

Placera din rullgardinsmeny för språkbyte på en framträdande plats på din startsida och på alla andra sidor på din webbplats. Du kommer att märka att flerspråkiga webbplatser har språkbytaren i sidhuvudet eller sidfoten på sidan.

Vilket alternativ du än väljer för din flerspråkiga webbplats, se till att det är superenkelt att hitta.

Du vill också se till att dina alternativ för att byta språk är glasklara. Det är bäst att hänvisa till ett nytt språk på dess eget språk. Använd till exempel ”Deutsch” istället för ”German” och ”日本語” istället för ”Japanese”.

Asana använder till exempel en rullgardinsmeny med namnen på de olika tillgängliga språken:

Du vill att besökare på din flerspråkiga webbplats ska känna sig välkomna, oavsett vilket språk de talar. Att placera din språkbytare någonstans som är lätt att hitta kommer att hjälpa till att uppnå det.

3. Låt besökare välja sitt föredragna språk

Man skulle kunna tro att det är en självklarhet att låta användare välja sitt föredragna språk, men många flerspråkiga webbplatser gör det faktiskt jättesvårt att välja språk. Istället tvingar de användare att byta region.

Stora varumärken är de värsta syndarna. Du hittar ofta många som tvingar dig att ändra region på deras flerspråkiga webbplats (det vill säga byta från www.adobe.com till www.adobe.com/us/) när du bara vill ändra standardspråket.

Bara för att någon talar hindi betyder det inte att de vill byta till den regionen för ett företags flerspråkiga webbplats. Tänk om de bor i New York och vill handla från den amerikanska sidan, men vill läsa webbplatsen på hindi? Sätt inte upp hinder för dem att handla från din flerspråkiga webbplats – hjälp dem att få tillgång till ditt innehåll på deras föredragna språk.

Här är ett exempel på ett företag som faktiskt låter besökare välja sitt föredragna språk – Uber visar sina alternativ för språkbyte i sidfoten:

När du klickar på ”English” dyker en ruta upp som låter dig välja ditt föredragna språk mellan engelska och franska:

Det som är bra med Ubers design för språkbyte är att det låter besökare välja sitt föredragna språk utan att tvinga dem att byta region.

Om du vill förbättra användarupplevelsen ytterligare för dina besökare, överväg att ”komma ihåg” deras standardspråk så att nästa gång de besöker din flerspråkiga webbplats laddas den automatiskt på deras modersmål.

Automatisk språkdetektering

Många flerspråkiga webbplatser upptäcker webbläsarens modersmål för att automatiskt ställa in det primära språket för användarna.

Även om detta sparar tid för användarna, är automatiska översättningar med språkdetektering ingen exakt vetenskap. Det är viktigt att tänka på användare som kan hamna på ”fel” version av din flerspråkiga webbplats.

En besökare kan vara fysiskt placerad i Spanien och din flerspråkiga webbplats kommer att upptäcka det och visa spanska, men de kan vara en engelsktalande person som inte kan läsa spanska.

Så om du ska upptäcka platser automatiskt, tillhandahåll också en språkbytare så att besökare har möjlighet att välja olika språk.

Weglot erbjuder möjligheten att automatiskt omdirigera dina besökare baserat på deras webbläsarspråk. Se Weglot i aktion på din webbplats med en 14-dagars gratis provperiod.

Flaggor kontra språknamn

Flaggor används ofta för att indikera ett språk, men det finns vissa kontextuella problem du vill ha i åtanke:

• Flaggor representerar länder, inte språk.
• Ett land kan ha mer än ett officiellt språk.
• Ett språk kan talas i mer än ett land.
• Besökare kanske inte känner igen en flagga (på grund av ikonstorleken) eller så kan de bli förvirrade av liknande flaggor.

I slutändan vill du erbjuda alternativ för språkbyte som är lätta att förstå på vilket språk som helst.

4. Tänk på textutvidgning

När text översätts från ett språk till ett annat, som med Google Translate, kommer längden på originaltexten och den översatta texten att skilja sig åt. Detta kan vara en utmaning när det gäller att lägga upp din design.

Vissa skriftspråk är mer koncisa än andra. Språk som japanska och kinesiska använder en eller två tecken för att förmedla information, medan du i andra språk skulle behöva flera ord.

Språk som spanska och engelska är ordrika och behöver ibland uppåt 30% mer utrymme än andra språk.

W3C:s guide till textstorlek vid översättning, som vi starkt rekommenderar att du läser i sin helhet, erbjuder några bra råd.

W3C lyfter fram varför det är så viktigt att maskinöversättningsverktyg har anpassningsbara delar i användargränssnittet, som knappar, inmatningsfält och beskrivande text.

Till exempel, när Flickr översattes till olika språk, behövde designerna tänka på texten under bilderna som visar hur många visningar de har.

Tabellen nedan visar hur långt ordet ”view” är i olika språk jämfört med det engelska originalet:

Det är en 300% ökning från engelska till italienska!

Det du behöver komma ihåg här är att texten oftast blir längre eller kortare, så se till att din flerspråkiga webbplats är förberedd för det. Tänk också på att ju kortare originaltexten är, desto längre blir översättningen troligen. Om du märker att utrymme är ett problem, testa en annan och mindre bokstavlig översättning, eller ändra teckenstorleken beroende på det nya språket.

Tecken- och radhöjd är också något att tänka på. Det är vanligt att icke-latinska texter har mycket högre tecken än latinska texter. Skrifter som arabiska kommer också att behöva mer vertikalt utrymme mellan raderna jämfört med latinska språk.

5. Tänk på kompatibilitet med webbteckensnitt och kodning

W3C säger att du alltid ska ange kodningen för dina webbsidor. De rekommenderar att du använder UTF-8 för att se till att specialtecken visas korrekt oavsett språk.

Så här gör du UTF-deklarationen i sidhuvudet på dina sidor:

Alla webbteckensnitt du använder måste vara kompatibla med alla icke-engelska språk som din flerspråkiga WordPress-sajt stöder, särskilt för icke-latinska språk. Det betyder att teckensnitten du använder måste innehålla alla nödvändiga tecken och glyfer.

Vissa teckensnitt kanske stöder latinska skrifter men inte RTL (höger-till-vänster) eller kyrilliska, så kolla att de icke-engelska språk du behöver finns med innan du bestämmer dig för att använda några teckensnitt.

Google Fonts, till exempel, låter dig välja språk innan du laddar ner ett teckensnittspaket:

Ett enda språk kan innehålla hundratals tecken, vilket kan göra teckensnittsfilerna enorma – en annan sak att tänka på när du väljer teckensnitt för din flerspråkiga webbplats.

6. Designa för höger-till-vänster-språk

Att designa sidor för höger-till-vänster-språk kan vara en utmaning. Som SteelKiwi-utvecklaren Robert Dodis skriver för Smashing Magazine, innebär design för RTL att man ”vänder på gränssnittet”.

Till exempel, så här ser Facebooks vänster-till-höger-design ut:

Och så här ser Facebooks höger-till-vänster-design ut på arabiska:

Lägg märke till hur till och med rullningslisten byter plats!

Att spegelvända din design är något du behöver tänka på om du designar för både LTR- och RTL-språk.

Vi rekommenderar starkt att du läser Roberts artikel i Smashing Magazine för en detaljerad genomgång av hur man designar för RTL. Vi vill inte uppfinna hjulet på nytt här, så läs hans handledning. Vi vill visa dig hur Weglot stöder RTL-språk och kan göra översättningsprocessen enkel för din flerspråkiga webbplats.

Weglots översättningstjänst stöder RTL-språk och med CSS-regler kan du anpassa layouten på din flerspråkiga webbplats för att passa dem. Här är några av de tillgängliga RTL-språken:

• Arabiska (ar)
• Hebreiska (he)
• Persiska (fa)
• Urdu (ur)

Efter att ha lagt till ett RTL-språk på din flerspråkiga webbplats med Weglot kan du anpassa hur det visas genom att tillämpa CSS-regler på din layout. I WordPress-admin, gå till Weglot > Language button design (Valfritt) och scrolla ner till Override CSS. Lägg till de CSS-regler du vill i textrutan – du kanske vill ändra typsnitt, storlek, radhöjd och mer för att anpassa det primära språket till din design.

Det är allt du behöver göra för att lägga till och styla RTL-språk med Weglot! Du kan läsa mer om hur Weglot stöder RTL-språk i dokumentationen.

7. Använd bilder och ikoner som är kulturellt lämpliga

Bilder, ikoner och annan grafik är viktiga delar av varje webbsida. Men visuella element är till sin natur subjektiva och kan tolkas på olika sätt när de placeras i en annan kulturell kontext.

Till exempel visar den franska versionen av Clarins startsida en kvinna med kaukasiskt utseende:

Men när du besöker företagets japanska hemsida, möts du av en bild på en japansk kvinna:

Bilder kan också uppfattas som stötande. Bilder som verkar oskyldiga för en västerländsk publik kan vara tabu i ett annat land. Till exempel skulle bilder som visar samkönade par eller jämställdhet inte accepteras i länder där homosexualitet fortfarande är olagligt och kvinnors rättigheter inte är helt erkända.

Du behöver också tänka på små detaljer, som ikoner, och vad de betyder för människor från olika platser som besöker din flerspråkiga hemsida. Till exempel skulle en jordglob-ikon för en engelsktalande australisk publik se väldigt annorlunda ut för användare i Afrika:

Den tredje ikonen ovan visar en jordglob men har inget specifikt land eller region, vilket gör den mer passande att använda på en flerspråkig hemsida.

Du behöver granska bilder och andra grafiska element och ta hänsyn till regionala och kulturella skillnader.

Undvik att använda bilder och annan grafik som har inbäddad text. Du kommer inte att kunna översätta inbäddad text med verktyg som Weglot, så undvik det helt enkelt.

8. Använd färger som passar kulturen

Hur olika kulturer ser och tolkar färger skiljer sig enormt åt runt om i världen.

Till exempel, i västerländsk kultur symboliserar rött kärlek, energi, passion och fara. I asiatiska kulturer är det en mycket viktig färg som symboliserar tur, välstånd, firande och ett långt liv. Omvänt, i vissa afrikanska länder associeras rött med död och aggression.

Blått anses vara det säkraste och mest globalt accepterade färgvalet för design, eftersom det har många positiva associationer. Det är en lugnande färg som upplevs som rogivande och fridfull, trots att den också kopplas till sorg och depression. Blått är också den mest populära färgen för banklogotyper eftersom den representerar tillit och auktoritet.

När du väljer färger för din flerspråkiga webbdesign, se till att googla vilken symbolik som är kopplad till de färger du planerar att använda.

9. Datum och andra format

Alla länder använder inte samma datumformat, inte ens inom det engelska språket. Till exempel, i Storbritannien och Europa är det vanligt att skriva datum som dag-månad-år, medan det i USA skrivs månad-dag-år.

Du kan också behöva översätta måttenheter, vilket hjälper med SEO, beroende på din målgrupp. Medan 90% av världen använder metersystemet, använder USA, Liberia och Myanmar fortfarande det brittiska systemet för vikter och mått.

Välja rätt WordPress-översättningsplugin för din design

WordPress översättningsplugins finns i alla former och storlekar, och hur de fungerar med din specifika design varierar stort. En lösning som garanterat integreras smidigt med din flerspråkiga webbplats är Weglot.

Du kan till och med använda Weglots Visual Editor för att översätta ditt innehåll på webbplatsens framsida och över underdomäner, så att du kan se hur det ser ut i samband med din webbplatsdesign och layout, liknande Google Translate.

Med Weglot är designen och placeringen av din språkbytare 100 % anpassningsbar. Standardknappen har designats för att passa vilken webbplats som helst, men du kan också styla den via anpassad CSS för att använda vilket format du vill.

Dessutom stöder Weglot designprinciperna som beskrivs i det här inlägget, inklusive:

• Använda en global mall för konsekvent varumärkesprofil
• Erbjuda lättillgängliga alternativ för språkbyte
• Låta besökare välja sitt föredragna språk
• Automatisk UTF-kodning
• Stöd för RTL-språk

Låt oss ta en titt på den viktigaste designrelaterade funktionen som Weglot erbjuder: att anpassa din språkbytare.

Anpassa din webbplats språkbytesalternativ med Weglot

Efter att ha installerat Weglot-pluginet på din flerspråkiga WordPress-webbplats och ställt in det, kommer du att bli ombedd att ange din API-nyckel, ditt standardspråk och det språk du vill översätta ditt innehåll till, som Google Translate.

Om du inte redan har ett Weglot-konto behöver du skapa ett för att få din API-nyckel.

När du har sparat dina ändringar, uppdatera framsidan av din nya flerspråkiga webbplats så kommer du att se en ny språkbytare i det nedre högra hörnet. När du klickar på den kommer den att expandera för att visa dina tillgängliga språk, vilket gör att du kan visa din föredragna översättning.

För att börja göra grundläggande anpassningar, gå till Weglot > Språkknappens design (Valfritt). På den här skärmen kan du välja:

• Om du ska använda en rullgardinsmeny eller inte
• Om du ska använda flaggor eller inte
• Typer av flaggor
• För att visa språknamn
• För att bara visa språkkoden

Avsnittet Åsidosätt CSS är där du kan tillämpa CSS-regler för att styla hur din språkbytare ser ut på din flerspråkiga webbplats. Till exempel kan du:

• Ta bort pilen på knappen
• Ändra bakgrundsfärgen
• Lägg till en rullningslist
• Ta bort ramen
• Lägg till utfyllnad

Weglot ger några exempel i den här artikeln om hur du kan anpassa språkknappens design.

När du skrollar ner på inställningsskärmen för Weglot hittar du instruktioner om hur du placerar språkbytaren:

• I menyn. Gå till Utseende -> Menyer och dra och släpp den anpassade länken för Weglot Translate där du vill ha den.
• Som en widget. Gå till Utseende -> Widgets och dra och släpp Weglot Translate-widgeten där du vill ha den.
• Med en kortkod. Använd Weglots kortkod [ weglot_switcher ] (utan mellanslag) för att placera din språkbytare där du vill.
• I källkoden. Du kan lägga till följande kod var du vill i källkoden på din HTML-sida:

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

För att visa dig hur språkbytaren kan anpassas på en flerspråkig webbplats (oavsett om det är en WordPress-, Shopify- eller någon annan typ av webbplats), kan du se nedan hur Patyka visar språkbytaren i sidans övre vänstra hörn.

Språken visas med sina namn, och när du klickar på omkopplaren och väljer ett språk uppdateras innehållet på sidan och översätts till det språk du valt.

Fallstudie: Maestrooo använder Weglot

Grundades 2013, Maestrooo är en webbutvecklingsbyrå baserad i Frankrike som har From Future och Patyka bland sina kunder. Maestrooo hanterar nu majoriteten av Shopify Plus-kunder i Frankrike.

Maestrooo letade efter en stabil och pålitlig lösning för flerspråkiga webbplatser som enkelt kunde anpassa sig till deras kunders behov. Efter att ha testat många lösningar och upptäckt problem med SEO eller hreflang-hantering, upptäckte teamet Weglot.

Weglot översätter allt innehåll på Maestrooos kunders webbplatser, oavsett om det är dynamiskt innehåll, innehåll genererat av andra appar eller till och med kassaflödet, utan att påverka layouten på deras flerspråkiga webbplats.

Förutom att designa anpassade webbplatser för kunder, utvecklar Maestrooo också de officiella temana för Shopifys temabutik. Medan andra lösningar för flerspråkiga webbplatser ofta förstör formateringen av Maestrooos teman, erbjuder Weglot en översättningslösning som fungerar varje gång.

Maestrooo hjälper mellan 8 000 och 12 000 kunder att komma igång med Shopify varje år med hjälp av Weglot för deras flerspråkiga webbplats.

Satsa på fullständig kulturell optimering med lokaliserad design

Var och en av designprinciperna vi har gått igenom i det här inlägget kommer att leda dig rätt när du skapar en flerspråkig webbplats som ser bra ut och erbjuder en härlig användarupplevelse.

För att ge dina besökare och kunder en enastående upplevelse på deras modersmål är det också värt att se bortom din flerspråkiga webbplats. Överväg att översätta ditt marknadsföringsmaterial och din kundsupport.

Tänk också på din flerspråkiga webbplats hastighet och prestanda. I vissa länder som inte har turen att ha snabba internetuppkopplingar gör nedladdning av stora språkpaket det svårare för besökare att komma åt ditt innehåll.

Med rätt plugin för översättning av flerspråkiga webbplatser och en webbplatsdesign som erbjuder lättanvända översättningsalternativ, kommer du att hjälpa kunder med ett visuellt tilltalande gränssnitt (UI) och användarupplevelse (UX) på deras föredragna språk. Prova Weglot gratis med vår 14-dagars kostnadsfria provperiod, eller ta en produktvisning utan att behöva registrera dig!