Så fixar du designfel vid lokalisering: Redigera dina översättningar visuellt

Lokalisering av webbplatser är ett bra drag för alla företag och organisationer som riktar sig till en internationell publik. Det gör inte bara din webbplats mer tillgänglig för besökare, utan förbättrar också personaliseringsnivån på din webbplats - något som blir allt viktigare när branscher över hela linjen blir mer och mer konkurrenskraftiga.

När det gäller lokalisering på din egen webbplats spelar översättning naturligtvis en stor roll. Att lokalisera webbplatsen genom att översätta från ett språk till ett annat är visserligen ett nödvändigt steg, men det kan orsaka designproblem.

Dessa problem beror ofta på att språk kan skilja sig åt när det gäller det utrymme som ord upptar i en viss mening. Som ett resultat av detta kan saker som brutna strängar och överlappande text uppstå, vilket är långt ifrån idealiskt när du försöker locka nya internationella kunder med ditt erbjudande.

Lyckligtvis kan sådana designproblem enkelt åtgärdas med hjälp av Weglotintuitiva visuella redigeringsverktyg. I det här inlägget ska vi därför titta närmare på Weglot visual editor hur det kan hjälpa dig att åtgärda oönskade designkonsekvenser som kan uppstå vid översättning av webbplatser.

Vilka är fördelarna med en visual editor?

visual editor kan du se och redigera dina översättningar i en liveförhandsvisning av din webbplats. På så sätt kan du se exakt hur det översatta innehållet kommer att se ut på din webbplats och bedöma om det kommer att påverka webbplatsens design.

När text översätts från ett språk till ett annat är det troligt att den översatta texten har en annan längd än originalet. Enligt W3.org är texter på kinesiska och engelska i allmänhet ganska kompakta, och därför kan översättning från ett av dessa språk till ett annat resultera i ganska stora skillnader när det gäller textlängd.

Faktum är att IBM i sina "Guidelines to Design Global Solutions" konstaterar att för texter som är längre än 70 tecken och som översätts från engelska till andra europeiska språk är den genomsnittliga expansionsgraden 130%.

Detta innebär att den nu översatta versionen av din webbplats kommer att ha 30% mer utrymme på framsidan som upptas av text än originalet. Problem i samband med detta kan inkludera saker som:

• Överlappande text
• Kollapsade strängar
• Asymmetri med webbplatsens övergripande design

För att ge lite mer kontext om hur ett visual editor kan hjälpa till med sådana problem och hur det ser ut, ska vi ta en närmare titt på Weglot visual editor och hur det kan hjälpa dig att förhandsgranska din design på olika språk.

Weglot Visual Editor

För att komma åt den visual editor till din Weglot , sedan till fliken "översättningar" och klickar på fliken "visual editorredigerarevisual editor.

Du kommer då till en förhandsgranskning av din webbplats i realtid. Även om du först befinner dig på startsidan kan du komma åt alla webbadresser på din webbplats genom att klicka dig vidare till de olika sidorna, som om du verkligen befann dig på din webbplats i realtid.

Det är i detta skede som du kan se exakt hur din webbplats ser ut på de olika språk du har lagt till. Använd språkväxlaren för att växla mellan språk och omedelbart upptäcka och åtgärda eventuella designfel. Alla ändringar du gör i översättningen uppdateras i realtid.

Värt att komma ihåg - om du befinner dig i redigeringsstadiet är det troligt att du inte vill trycka på "live" för dina översättningar ännu. Se därför till att du stänger av "Gör offentliga" i listan över översättningar för att säkerställa att din flerspråkiga webbplats inte kan nås av någon annan än ditt team. (Obs: lägg bara till ?weglot i slutet av din URL för att se översättningarna live).

I exemplet nedan har vi lagt till franska och spanska. När du växlar mellan språken kan du omedelbart se skillnaderna i hur mycket utrymme varje språk tar upp i webbplatsens design, i synnerhet i webbplatsens rubrik.

Du har sannolikt lagt ner timmar på att skapa din webbplats på originalspråket och designen spelar en stor roll för hur ditt varumärke/företag uppfattas. Det är just därför som det är viktigt att se hur de nya språken som du har lagt till passar in i designen, så att du kan uppnå samma imponerande effekt som på din ursprungliga webbplats.

Det är intressant att se hur texten i huvudrubriken – i exemplet ovan – är så mycket längre på franska och spanska, och det är uppenbart när man använder Visual Editor webbplatsägaren kanske vill göra justeringar i detta avsnitt.

Den Visual Editor utformad för att hjälpa alla i ditt team – inte bara designteamet. Det är ett utmärkt verktyg för att redigera översättningar i det sammanhang där de faktiskt visas på webbplatsen. Läs mer om redigeringsfunktionerna här.

Så vad händer om det finns designproblem?

När Visual Editor använder den Visual Editor kanske Visual Editor märker att det finns några problem med hur den översatta texten visas i den övergripande designen. Du kan nu förutse dessa potentiella problem och göra justeringar därefter. Det finns några korrigerande åtgärder du kan vidta:

Överväg att omformulera eller sammanfatta innehållet: Om du upptäcker att den översatta versionen av ditt innehåll orsakar designproblem, tveka inte att skala tillbaka och redigera vissa aspekter som inte översätts bra och tar för mycket utrymme. Du kan antingen göra detta inom ditt team eller genom att arbeta med professionella översättare direkt i Weglot .

På engelska skulle till exempel fliken "About Us" översättas till "A propos de nous" på franska, men det finns en god chans att detta inte ryms i det tilldelade utrymmet på din webbplats. En enkel lösning i det här fallet skulle dock vara att manuellt redigera "A propos de nous" till "Equipe" till exempel.

Om du skickar dina översättningar för professionell översättning med Weglot instrumentpanel är det här anteckningsavsnittet ett utmärkt ställe att låta översättarna veta vilka ord du har upptäckt som kan formuleras annorlunda.

Ändra teckenstorleken på din webbplats: Om du upptäcker att texten blir för stor (eller för liten) när du översätter från ett språk till ett annat kan du minska eller öka teckenstorleken i det översatta språket. Detta kan enkelt göras i din Weglot i avsnittet för anpassad CSS, under språkomkopplaren.

Exempelvis skulle nedanstående CSS justera storleken på det tyska teckensnittet till 16px:

html[lang=de] body {

teckenstorlek : 16px;

}

Byta typsnitt på din webbplats: Det finns också tillfällen då det är klokt att ändra det teckensnitt som används när en text översätts till ett annat språk. Detta beror på att vissa teckensnitt inte fungerar bra på vissa språk och kan förvärra designproblem som du kan stöta på. Om du till exempel vill använda teckensnittet Roboto för den franska språkversionen av din webbplats, men Arial för den arabiska versionen (som är mycket mer lämplig för språket), är detta möjligt med en annan CSS-regel.

Nedanstående CSS skulle justera teckensnittet till Arial när webbplatsen är på arabiska:

html[lang=ar] body {

typsnitt-familj : arial;

}

Överväg en global webbdesign: Det kan förstås vara lite sent för det här - men om du är i ett tidigt skede av att skapa en webbplats och vet att du vill lägga till flera språk, kan du överväga att lämna utrymme för manövrering i din webbplatsdesign för att förhindra problem längre fram. Kolla in fler tidiga designtips här.

Visual Editor ett designinriktat verktyg som passar perfekt för Goodpatch

Ett exempel på ett företag som utnyttjade Weglot visual editor till fullo för att korrigera designfel är det tyska designföretaget Goodpatch. De hade redan en engelsk version av sin webbplats, men bestämde sig för att lansera en tysk version för att attrahera den designmedvetna tysktalande marknaden.

En av de största farhågorna inför projektet var hur det skulle påverka deras webbdesign. Men med Weglot försvann deras reservationer omedelbart.

Vi fick så bra feedback från deras team att vi skapade en fallstudie om deras framgångshistoria. Teamet av UX- och UI-designers på Goodpatch uppskattade verkligen möjligheten att se hur det översatta språket skulle visas på deras webbsidor, på så sätt kunde de se vad som behövde anpassas eller vilken del av designen som kunde förbättras för att fungera med den längre texten.

Teamet på Goodpatch hade undersökt andra översättningslösningar, men det som övertygade dem om Weglotkapacitet återspeglade deras strategi som ett designdrivet företag: iterativt, visuellt och upplevelse-först.

Slutsats:

Som du har sett visual editor enkelt att använda Weglot visual editor , vilket kan lugna eventuella farhågor du har när det gäller lokalisering ur ett designperspektiv. Kompromissa inte med översättningen för designens skull, och kompromissa definitivt inte med designen för översättningens skull. Ibland kan du verkligen få allt 😉

Varför inte prova Weglot 10-dagars gratisversion och se själv hur enkelt det är att visuellt redigera dina översättningar!

‍