7 experttips för bättre RTL (höger-till-vänster) webbdesign

Rikta in dig på webbplatsbesökare som talar höger-till-vänster-språk (RTL)?

Då behöver du inte bara översätta din webbplats till dessa språk, utan också anpassa designen så att den passar RTL-formatet. Och det här är förstås en större utmaning än ett vanligt översättningsprojekt från vänster till höger (LTR).

Det beror på att det finns nyanser i korrekt RTL-formatering. Du kan till exempel inte bara markera all text, välja högerjusteringsikonen för att högerjustera texten och sedan nöja dig med det. Vissa element måste också vändas (eller "speglas"), medan andra inte behöver det. Om du gör fel kommer alla som har RTL som modersmål att kunna upptäcka felet omedelbart. Inte det bästa sättet att göra ett gott intryck.

Dessutom vill du hjälpa sökmotorerna att visa dina RTL-webbsidor för personer som talar RTL-språk, så att du får organisk trafik (och konverteringar) av hög kvalitet.

Läs vidare och ta del av sju experttips som hjälper dig att optimera din webbplats för en RTL-språkspråkig målgrupp på effektivast möjliga sätt.

Vad är RTL-webbdesign?

RTL är en förkortning av "right-to-left" och avser språk där manuset skrivs från höger sida av sidan mot vänster. RTL-språk inkluderar:

• Urdu
• Hebreiska
• Persiska
• Arabiska

Vanliga webbdesignmetoder är i stor utsträckning anpassade till LTR-språk. Så om du utformar en webbplats med innehåll på RTL-språk måste du använda RTL-webbdesign - med andra ord webbdesignmetoder som hjälper till att ge en trevlig visningsupplevelse för innehåll på RTL-språk.

Du kan t.ex. behöva spegla rubriker, knappar och andra sidelement så att de visas från höger till vänster. "Spegling" kan innebära:

• Justera texten från höger till vänster i stället för från vänster till höger.
• Horisontell vändning av ett element, t.ex. att visa en framåtpil som "←" i stället för det konventionella LTR-utseendet "→".

(Mer om spegling senare!)

Vilka är fördelarna med att ha en RTL-webbplats?

När du har en RTL-webbplats tillgodoser du behoven hos webbplatsbesökare som kommunicerar på RTL-språk. Det här är inte ett litet segment av globala webbplatsbesökare, och det ökar bara med tiden.

Ta bara Förenade Arabemiraten (UAE), till exempel, där onlineplattformshandlare som undersöktes av Statista rapporterade att de upplevde en genomsnittlig ökning på 26% i e-handelsaktivitet 2020. Eftersom arabiska är det officiella språket i Förenade Arabemiraten och ett RTL-språk, bör du visa din webbplats i RTL-format om du vill ha en del av marknaden i Förenade Arabemiraten.

Genom att utforma din webbplats med RTL-stöd i åtanke kan du:

• Öka kundernas goodwill gentemot ditt varumärke: Alla kan erbjuda sina produkter och tjänster till RTL-språkiga användare, men det är inte alla som kan få en sådan publik att gilla dem. Genom att integrera RTL-design på din webbplats och översätta och lokalisera webbplatsinnehållet hjälper du RTL-språkanvändare att förstå dina erbjudanden och fördelarna med dem. Med tiden kan de börja lita på ditt varumärke och betrakta dig som ett välrenommerat varumärke som är värt att använda.
• Upplev fler konverteringar: När din målgrupp som talar RTL-språk kan förstå vad du säljer, gillar och litar på ditt varumärke och har en smidig användarupplevelse på din RTL-webbplats, är det mer sannolikt att de köper dina produkter och tjänster.
• Förbättra din rankning i sökmotorer: Sökmotorer strävar efter att visa innehåll som bäst uppfyller sökarnas behov. De kan anse att en webbplats med innehåll som presenteras på RTL-språk är mer relevant för RTL-språkanvändare än en annan webbplats vars innehåll är på ett LTR-språk, och därmed ranka webbplatsen med RTL-innehåll högre.

7 tips för bättre RTL-webbdesign

För att kunna genomföra RTL-webbutveckling och -design behöver du känna till några experttips för att göra det rätt. Vi delar inte med oss av ett eller två, utan sju av dem här!

Kombinera sedan dessa tips med Weglot. Vår lösning för översättning av webbplatser tar inte bara hand om översättningssidan utan hjälper dig också att få bästa möjliga resultat när du implementerar RTL-webbdesign för din webbplats.

1. Förstå spegling och när det är nödvändigt att använda det

Som tidigare nämnts är spegling en viktig del av konverteringen av en LTR-webbplats till RTL-format. Det innebär att sidelement, som ord, rubriker, ikoner och knappar, vänds horisontellt så att de kan läsas från höger till vänster.

Element som du kommer att vilja spegla inkluderar:

• Ikoner som pekar i en viss riktning eller visar rörelse, t.ex. bakåtknappar eller pilar, diagram och grafer.
• Navigeringsknappar och logotyper visas vanligtvis längst upp till vänster på LTR-webbplatser. De måste flyttas till det övre högra hörnet för RTL-webbdesignändamål. (Logotyperna i sig ska dock inte vändas horisontellt).
• Formulärrubriker, som vanligtvis visas längst upp till vänster i formulärfälten och som måste justeras till längst upp till höger i stället.
• Kalenderkolumner som visar veckans första dag längst till höger och veckans sista dag längst till vänster.
• Tabellkolumner.

Det är dock inte alla LTR-språkelement som måste speglas till RTL. Exempel på element som inte behöver speglas är följande:

• Ikoner som inte har någon specifik riktning, t.ex. en "Download"-knapp eller en papperskorgsikon.
• Ikoner med text på främmande språk, t.ex. romerska alfabet och skiljetecken (dessa bör lokaliseras i stället).
• Kontroll av video- och ljudspelare.
• Datum presenteras i det internationella standardformatet "YYYY-MM-DD".
• LTR-språkord som avsiktligt har inkluderats i RTL-text, t.ex. "Google" eller "Kleenex".
• Siffror (och ordningen på deras siffror).

2. Ta hänsyn till de kulturella aspekterna av RTL-webbdesign

Det krävs mer än att bara vända på ikoner och text för att få en korrekt RTL-webbdesign. Vissa begrepp som förekommer i västerländska kulturer går inte att översätta till kulturen i samhällen som använder RTL-språk. Om din webbplats text eller grafik innehåller sådana begrepp eller bilder, försök att ersätta dem med mer kulturellt lämpliga alternativ.

Om du till exempel gör din webbplats tillgänglig på arabiska, som främst används i länder med muslimsk majoritet, kan det verka malplacerat att visa bilder av en spargris. Det beror på att grisar ses som orena djur inom islam. Så istället för att visa en bild på en spargris för att kommunicera idén om att förvara pengar i en behållare, kan du till exempel ersätta bilden med en mer kulturellt neutral bild på en burk med mynt.

Tänk också på att arabiska inte skrivs eller visas på samma sätt i alla arabländer. Siffror är ett bra exempel på detta: vissa länder använder västarabiska siffror (som är siffrorna 0 till 9 som vanligtvis används i västvärlden). Samtidigt använder andra östarabiska siffror. Så när du utformar din RTL-webbplats ska du se till att lokalisera ditt innehåll så att det matchar kulturen i det specifika mållandet, och inte bara enligt RTL-språket i allmänhet!

3. Använd lämpliga teckensnitt

Alla teckensnitt är inte RTL-språkkompatibla och kan visa vertikala vita rektanglar som kallas "tofu" om de inte kan återge ett visst RTL-språktecken. För att förhindra en sådan situation, använd flerspråkiga typsnitt som är utformade för att stödja flera språk (inklusive RTL-språk). Google Noto är ett sådant vanligt flerspråkigt typsnitt.

Alternativt kan du ställa in din webbplats så att språk visas i olika teckensnitt. Du kan visa engelskspråkigt innehåll i ett typsnitt och RTL-språkigt innehåll i ett annat typsnitt som är särskilt anpassat för det skrivsystemet.

Tänk också på att andra språk kanske inte fetstilar eller kursiverar text på samma sätt som engelska. De får inte heller använda förkortningar. När du har valt ett lämpligt teckensnitt för ditt RTL-innehåll bör du kontrollera att innehållet visas och formateras på rätt sätt. Du bör också testa läsbarheten för RTL-texten på webbplatsen och justera teckenstorlekarna och radhöjden efter behov.

4. Implementera Hreflang-taggar

Hreflang-taggar är HTML-kodsnuttar som talar om för sökmotorer vilken språkversion av en webbsida som ska visas för användare med vissa språk- och regioninställningar. Du bör implementera dem på din webbplats om du har separata språkversioner av dina webbsidor för olika geografiska målgrupper. Sedan måste du kontrollera dina hreflang-taggar för att se om de också är korrekt implementerade.

Om du t.ex. har en webbsida med URL:en "http://www.example.com/us/" för engelsktalande från USA, bör den sidan innehålla denna hreflang-tagg:

<link rel=“alternate” hreflang=“en-us” href=“http://www.example.com/us/” />

Och om du har en arabisk version av samma webbsida med URL:en "http://www.example.com/ar/" för arabisktalande från Egypten, bör den sidan innehålla den här hreflang-taggen:

<link rel=“alternate” hreflang=“ar-eg” href=“http://www.example.com/eg/” />

Hreflang-taggar kan vara tråkiga att implementera manuellt, men Weglot lägger automatiskt till hreflang-taggar på dina webbsidor om du använder den för att översätta ditt webbplatsinnehåll.

5. Kontrollera din länkformatering!

Eftersom arabisk skrift har prickar under vissa bokstäver kan understrykning av hyperlänkar - som du normalt gör för engelskspråkiga hyperlänkar - minska synligheten för dessa prickar. Detta påverkar i sin tur din texts läsbarhet, så du bör skilja hyperlänkar från vanlig text på ett annat sätt.

Du kan t.ex. skriva anpassade CSS-regler (Cascading Style Sheets) för att visa en halvgenomskinlig boxskugga under hyperlänkad text. Du kan också använda CSS för att webbläsaren ska hoppa över understrykningen av arabiska alfabet som innehåller prickar under sina centrala delar.

6. Överväg att automatisera översättningsprocessen för webbplatsen

När du konverterar din LTR-webbplats till RTL-format måste du förmodligen också översätta webbplatsens innehåll (LTR). Att översätta innehållet manuellt är ett alternativ, men det kan vara ganska tidskrävande.

Det snabbare och mer effektiva tillvägagångssättet är att automatisera webbplatsöversättningsprocessen med en lösning som Weglot. När du har lagt till Weglot på din webbplats startar vårt automatiska arbetsflöde för att identifiera allt webbplatsinnehåll. Med hjälp av maskininlärningsteknik översätter det sedan omedelbart sådant innehåll till dina angivna RTL-språk.

Weglot upptäcker automatiskt - och översätter - allt nytt innehåll som du lägger till på din webbplats, vilket är användbart för att skapa översatta versioner av dina webbsidor direkt. För konsekvent översättning från LTR till RTL kan du också ställa in ordlista-regler i Weglot, så att du alltid översätter vissa ord på ett visst sätt och aldrig översätter andra.

7. Testa din webbplats noggrant innan du lanserar den

Precis som med alla andra webbplatsändringar ska du göra ett grundligt test av din RTL-webbplats innan du gör den tillgänglig för allmänheten. Det kan du göra:

• Låt modersmålstalare och lokaliseringsexperter granska innehållet på din RTL-webbplats för att se om det är läsbart och grammatiskt korrekt.
• Kontrollera hur din webbplats återges i Chrome, Firefox och andra populära webbläsare.
• Testa tillgängligheten på din webbplats på stationära och mobila enheter (detta inkluderar både iOS- och Android-enheter).

Om dina tester visar på några problem, åtgärda dem innan du gör din RTL-webbplats live!

Hur kan Weglot hjälpa till med RTL-webbdesign?

Som tidigare nämnts erbjuder Weglot en bekväm lösning för att få snabba och högkvalitativa RTL-översättningar av text. Men vi kan hjälpa till med mer än att översätta webbplatsinnehåll till RTL-språk i stor skala!

Med Weglot kommer du också att kunna göra det:

• Lägg till anpassade CSS-regler för att anpassa visningen av RTL-webbplatsens innehåll efter ditt varumärkes behov.
• Beställ professionella översättningar i Weglot Dashboard för viktiga delar av webbplatsinnehållet.
• Implementera automatiskt hreflang-taggar för att hjälpa sökmotorer att visa rätt språkversioner av dina webbsidor till sökare.
• Ersätt bilder, videor och andra medier på lämpligt sätt med Weglotinbyggda funktion för medieöversättning.
• Hantera alla dina text- och medieöversättningar i en central Weglot Dashboard istället för att logga in på flera plattformar för samma ändamål.

Börja översätta och lokalisera Rtl-webbdesign och -utveckling med Weglot

Om du planerar att rikta dig till webbplatsbesökare i länder som främst talar RTL-språk är det ett måste att lägga till RTL-stöd på din webbplats. Översättning och lokalisering av innehåll är en stor del av processen, men det är inte allt som krävs för att lyckas med RTL-webbdesign. Det handlar också om att spegla de nödvändiga sidelementen, visa lokaliserat innehåll i lämpliga teckensnitt, implementering av hreflang-taggar och mycket mer.

Weglot är därför ett värdefullt verktyg för utveckling och design av RTL-webbplatser. Det innehåller de funktioner du behöver för att få högkvalitativa RTL-översättningar av webbplatsens innehåll, översätta dina medier och implementera webbplatsens hreflang-taggar för varje målgrupp. Du kommer också att kunna lägga till anpassade CSS-regler för att finjustera utseendet på din RTL-webbplats till perfektion.

Det bästa sättet att se Weglot i aktion är att prova det på din webbplats i 14 dagar - och du kan göra det gratis genom att skapa ett konto här.