9 tips for å designe en flerspråklig nettside

I en stadig mer tilkoblet verden blir flerspråklige nettsider mer og mer vanlig. Men å designe dem? Det er litt mer krevende enn du kanskje tror, spesielt når du tenker på alle endringene i webdesign du må gjøre på nettsiden din.

Grunnprinsippene er enkle — med Weglot kan du legge til forskjellige språk på nettstedet ditt på mindre enn 5 minutter. Men så må du tenke på hvor du skal plassere språkvelgeren din, hvordan du skal tilpasse layouten når en bruker bytter fra engelsk til et RTL-språk (høyre-til-venstre-språk), og hvordan du bruker kulturelt passende farger, bilder og ikoner.

I denne guiden skal vi se på noen av de viktigste tingene å tenke på når det gjelder design, for å hjelpe deg med å planlegge en flerspråklig nettside som følger de beste praksisene.

1. Bruk globale maler for konsekvent merkevarebygging

Når noen lander på din flerspråklige nettside, vil du at de skal få en konsekvent brukeropplevelse, uansett hvilken språkversjon av siden din de kommer til. Dette betyr at indiske besøkende som besøker din engelske side, bør se samme merkevarebygging og design som den hindi-versjonen.

Du kan ikke hindre tospråklige eller flerspråklige besøkende i å se forskjellige versjoner av din flerspråklige nettside, men du kan sørge for at de ser den samme merkevarebyggingen, layouten og webdesignelementene når de bytter fra standardspråket.

Hvis du bruker et innholdsstyringssystem, som WordPress, med Weglot, er det enkelt å lage en konsekvent flerspråklig nettside. Weglot vil sømløst integreres med temaet til din nettsidebygger og automatisk oversette innholdet ditt. Det vil også integreres med alle de andre viktige delene av nettstedets funksjonalitet, som for eksempel nettbutikk-plugins – noe som betyr at det ikke er noen grunn til å ha forskjellige temaer eller design for de ulike språkene du legger til på din flerspråklige nettside.

For eksempel, når du besøker Airbnbs hjemmeside fra et land som Australia…

… og deretter bytter til japansk, er designet og merkevarebyggingen konsekvent på tvers av begge språkene.

Ikke bare bidrar et umiddelbart gjenkjennelig design til å forsterke merkevarebyggingen din, men det vil også hjelpe med fremtidige oppdateringer av det flerspråklige nettstedet ditt og redusere problemer når forskjellige språk skaper behov for endringer i brukergrensesnittet eller brukeropplevelsen.

2. Gjør språkvelgeren veldig enkel å finne

Plasser nedtrekksmenyen for språkbytte på et fremtredende sted på hjemmesiden din og alle andre sider på nettstedet ditt. Du vil se at flerspråklige nettsider ofte har språkvelgeren i toppteksten eller bunnteksten på siden.

Uansett hvilken løsning du velger for nettsiden din på flere språk, sørg for at den er veldig enkel å finne.

Du vil også sørge for at valgene for språkbytte er supertydelige. Det er best å referere til et nytt språk på dets eget språk. For eksempel, bruk «Deutsch» i stedet for «German» og «日本語» i stedet for «Japanese».

Asana, for eksempel, bruker en nedtrekksmeny med navnene på de ulike språkene som er tilgjengelige:

Du vil at besøkende på din flerspråklige nettside skal føle seg velkomne, uansett hvilket språk de snakker. Å plassere språkvelgeren din et sted som er lett å finne, vil bidra til å oppnå dette.

3. La besøkende velge sitt foretrukne språk

Du skulle tro at det å la brukere velge sitt foretrukne språk ville være en selvfølge, men så mange flerspråklige nettsider gjør det faktisk veldig vanskelig å velge språk. I stedet tvinger de brukere til å bytte region.

Store merkevarer er de verste synderne. Du vil ofte finne mange som tvinger deg til å endre regionen på deres flerspråklige nettside (altså bytte fra www.adobe.com til www.adobe.com/us/) når du bare vil endre standardspråket.

Bare fordi noen snakker hindi, betyr det ikke at de vil bytte til den regionen for en bedrifts flerspråklige nettside. Hva om de bor i New York og vil kjøpe fra den amerikanske siden, men vil lese siden på hindi? Ikke lag en barriere for at de skal kjøpe fra din flerspråklige nettside – hjelp dem med å få tilgang til innholdet ditt på deres foretrukne språk.

Her er et eksempel på et selskap som faktisk lar besøkende velge sitt foretrukne språk – Uber viser sine språkbyttealternativer i bunnteksten:

Når du klikker på «English», dukker det opp en modal som lar deg velge ditt foretrukne språk mellom engelsk og fransk:

Det som er bra med Ubers design for språkbytte er at det lar besøkende velge sitt foretrukne språk uten å tvinge dem til å bytte region.

Hvis du vil forbedre brukeropplevelsen ytterligere for dine besøkende, bør du vurdere å «huske» standardspråket deres slik at neste gang de besøker din flerspråklige nettside, vil den automatisk lastes inn på deres morsmål.

Automatisk språkdeteksjon

Mange flerspråklige nettsider vil oppdage nettleserens morsmål for å automatisk angi hovedspråket for brukere.

Selv om dette sparer litt tid for brukere, er det å tilby automatiske oversettelser ved hjelp av språkdeteksjon ikke en eksakt vitenskap. Det er viktig å huske på brukere som kan havne på den «feile» versjonen av din flerspråklige nettside.

En besøkende kan være fysisk lokalisert i Spania, og din flerspråklige nettside vil automatisk oppdage det og vise spansk, men de kan være en engelsktalende som ikke kan lese spansk.

Så hvis du skal automatisk oppdage lokasjoner, bør du også tilby en språkvelger slik at besøkende har muligheten til å velge forskjellige språk.

Weglot tilbyr muligheten til å automatisk omdirigere besøkende basert på nettleserspråket deres. Se Weglot i aksjon på nettsiden din med en 14-dagers gratis prøveperiode.

Flagg vs. språknavn

Flagg brukes ofte for å indikere et språk, men det er noen kontekstuelle problemer du bør huske på:

• Flagg representerer land, ikke språk.
• Et land kan ha mer enn ett offisielt språk.
• Et språk kan snakkes i mer enn ett land.
• Besøkende kjenner kanskje ikke igjen et flagg (på grunn av ikonstørrelsen) eller de kan bli forvirret av lignende flagg.

Til syvende og sist vil du tilby språkbyttealternativer som er enkle å forstå på alle språk.

4. Ta hensyn til tekstutvidelse

Når tekst oversettes fra ett språk til et annet, for eksempel med Google Translate, vil lengden på originalteksten og den resulterende oversettelsen være forskjellig. Dette kan være utfordrende når det gjelder å utforme designet ditt.

Noen skriftspråk er mer konsise enn andre. Språk som japansk og kinesisk vil bruke ett eller to tegn for å formidle informasjon, mens du på andre språk ville trenge flere ord.

Språk som spansk og engelsk er ordrike, og trenger noen ganger opptil 30 % mer plass enn andre språk.

Den W3Cs guide til tekststørrelse i oversettelse, som vi sterkt anbefaler å lese i sin helhet, gir noen gode råd.

W3C fremhever hvorfor det er avgjørende at maskinoversettelsesverktøy har adaptive UI-elementer, som knapper, inndatafelt og beskrivende tekst.

For eksempel, da Flickr ble oversatt til forskjellige språk, måtte designere ta hensyn til teksten under bilder som indikerer antall visninger.

Tabellen under viser hvor mye ordet «view» varierer i lengde på forskjellige språk, sammenlignet med den engelske originalen:

Det er en utvidelse på hele 300 % fra engelsk til italiensk!

Det du må huske på her, er at tekst vanligvis vil utvide seg eller trekke seg sammen i bredden. Sørg derfor for at det flerspråklige nettstedet ditt tar høyde for dette. Husk også at jo kortere kildeteksten er, desto lengre blir sannsynligvis oversettelsen. Hvis du oppdager at plassen blir et problem, kan du prøve en annen og mindre bokstavelig oversettelse, eller endre skriftstørrelsen basert på det nye språket.

Tegn- og linjehøyde er også noe å tenke på. Det er vanlig at ikke-latinsk tekst har mye høyere tegn enn latinsk tekst. Skrifter som arabisk vil også trenge mer vertikal plass mellom linjene sammenlignet med latinske språk.

5. Tenk på kompatibilitet med nettfonter og koding

W3C sier at du alltid bør spesifisere kodingen av nettsidene dine. De anbefaler å bruke UTF-8 for å sikre at spesialtegn vises riktig, uavhengig av språk.

Slik gjør du UTF-deklarasjonen i toppteksten på sidene dine:

Alle nettfonter du bruker, må være kompatible med alle ikke-engelske språk som ditt flerspråklige WordPress-nettsted støtter, spesielt for ikke-latinsk-baserte språk. Dette betyr at fontene du bruker, må inneholde alle nødvendige tegn og glyfer.

Noen fonter støtter kanskje latinske skrifter, men ikke RTL (høyre-til-venstre) eller kyrillisk. Sjekk derfor at de ikke-engelske språkene du trenger er inkludert før du bestemmer deg for å bruke noen fonter.

Google Fonts lar deg for eksempel velge språk før du laster ned en fontpakke:

Et enkelt språk kan bestå av hundrevis av tegn, noe som kan gjøre fontfilene enorme i størrelse – en annen ting å huske på når du velger fonter til ditt flerspråklige nettsted.

6. Design for språk som leses fra høyre til venstre

Å designe sider for språk som leses fra høyre til venstre, kan by på utfordringer. Som SteelKiwi-utvikler Robert Dodis skriver for Smashing Magazine, betyr design for RTL å «snu grensesnittet på hodet».

Her er for eksempel hvordan Facebooks venstre-til-høyre-design ser ut:

Og her er hvordan Facebooks høyre-til-venstre-design ser ut på arabisk:

Legg merke til hvordan selv rullefeltet endrer posisjon!

Å speilvende designet ditt er noe du må vurdere hvis du designer for både LTR- og RTL-språk.

Vi anbefaler på det sterkeste å lese Roberts Smashing Magazine-artikkel for en detaljert gjennomgang av hvordan man designer for RTL. Vi ønsker ikke å finne opp hjulet på nytt her, så les veiledningen hans. Vi vil vise deg hvordan Weglot støtter RTL-språk og kan gjøre oversettelsesprosessen enkel for din flerspråklige nettside.

Weglots oversettelsestjeneste støtter RTL-språk, og med CSS-regler kan du tilpasse utformingen av din flerspråklige side for å passe dem. Her er noen av de tilgjengelige RTL-språkene:

• Arabisk (ar)
• Hebraisk (he)
• Persisk (fa)
• Urdu (ur)

Etter å ha lagt til et RTL-språk på din flerspråklige side med Weglot, kan du tilpasse hvordan det vises ved å bruke CSS-regler på oppsettet ditt. I WordPress-admin går du til Weglot > Language button design (Valgfritt) og ruller ned til Override CSS. Legg til de CSS-reglene du ønsker i tekstområdet – du vil kanskje endre skrifttype, størrelse, linjehøyde og mer for å style hovedspråket slik at det passer designet ditt.

Det er alt du trenger å gjøre for å legge til og style RTL-språk med Weglot! Du kan lese mer om hvordan Weglot støtter RTL-språk i dokumentasjonen.

7. Bruk bilder og ikoner som er kulturelt passende

Bilder, ikoner og annen grafikk er viktige elementer på enhver nettside. Men visuelle elementer er i sin natur subjektive og kan tolkes på forskjellige måter når de plasseres i en annen kulturell kontekst.

For eksempel viser den franske versjonen av Clarins’ hjemmeside en kaukasisk kvinne:

Men når du besøker selskapets japanske hjemmeside, viser den et bilde av en japansk kvinne:

Bilder kan også være støtende. Bilder som virker uskyldige for et vestlig publikum, kan være tabu i et annet land. For eksempel vil bilder som viser homofile par eller likestilling ikke bli akseptert i land der homofili fortsatt er ulovlig og kvinners rettigheter ikke er fullt ut anerkjent.

Du må også tenke på små elementer, som ikoner, og hva de betyr for folk fra ulike steder som besøker nettsiden din på flere språk. For eksempel vil et globusikon for et engelsktalende australsk publikum se veldig annerledes ut for brukere i Afrika:

Det tredje ikonet ovenfor viser en globus, men har ikke et spesifikt land eller en region, noe som gjør det mer passende å bruke på en nettside med flere språk.

Du må gå gjennom bilder og andre grafiske elementer, og ta hensyn til regionale og kulturelle forskjeller.

Unngå å bruke bilder og annen grafikk som har innebygd tekst. Du vil ikke kunne oversette innebygd tekst med verktøy som Weglot, så bare unngå det helt.

8. Bruk farger som passer kulturelt

Måten ulike kulturer ser og tolker farger på, varierer veldig rundt om i verden.

For eksempel, i vestlig kultur symboliserer rødt kjærlighet, energi, lidenskap og fare. I asiatiske kulturer er det en veldig viktig farge, som symboliserer hell, velstand, feiring og et langt liv. I noen afrikanske land er rødt derimot forbundet med død og aggresjon.

Blått regnes som det tryggeste og mest globalt aksepterte fargevalget for design, siden det har mange positive assosiasjoner. Det er en beroligende farge som anses som lindrende og fredelig, selv om den også forbindes med tristhet og depresjon. Blått er også den mest populære fargen for banklogoer fordi den representerer tillit og autoritet.

Når du velger farger til nettsidedesignet ditt på flere språk, bør du søke på Google etter symbolikken knyttet til fargene du planlegger å bruke.

9. Datoer og andre formater

Ikke alle land bruker samme datoformat, selv innenfor det engelske språket. For eksempel, i Storbritannia og Europa er det vanlig å formatere datoen som dag-måned-år, mens i USA formateres den som måned-dag-år.

Du må kanskje også oversette måleenheter, noe som hjelper med SEO, avhengig av målgruppen din. Mens 90 % av verden bruker det metriske systemet, bruker USA, Liberia og Myanmar fortsatt det imperiale systemet for vekt og mål.

Velge riktig WordPress oversettelsesplugin for ditt design

WordPress oversettelsesplugins kommer i alle former og størrelser, og hvordan de fungerer med ditt spesifikke design varierer mye. En løsning som garantert integreres sømløst med din flerspråklige nettside er Weglot.

Du kan til og med bruke Weglots Visual Editor til å oversette innholdet ditt på forsiden av nettstedet ditt og på tvers av underdomener, slik at du kan se hvordan det ser ut i sammenheng med nettstedets design og layout, på samme måte som Google Translate.

Med Weglot er designet og plasseringen av språkvelgeren din 100 % tilpassbar. Standardknappen er designet for å passe til ethvert nettsted, men du kan også style den via egendefinert CSS for å bruke hvilket som helst format du ønsker.

Dessuten støtter Weglot designprinsippene som er beskrevet i dette innlegget, inkludert:

• Bruke en global mal for konsekvent merkevarebygging
• Tilby lett tilgjengelige språkbyttealternativer
• La besøkende velge sitt foretrukne språk
• Automatisk UTF-koding
• Støtte for RTL-språk

La oss ta en titt på den viktigste designrelaterte funksjonen Weglot tilbyr: tilpasning av språkvelgeren din.

Tilpasse nettstedets språkbyttealternativer med Weglot

Etter å ha installert Weglot-pluginen på din flerspråklige WordPress-nettside og satt det opp, blir du bedt om å skrive inn API-nøkkelen din, standardspråket ditt og språket du ønsker å oversette innholdet ditt til, akkurat som Google Translate.

Hvis du ikke allerede har en Weglot-konto, må du opprette en for å få API-nøkkelen din.

Når du har lagret endringene dine, oppdater forsiden av din nye flerspråklige nettside, og du vil se en ny språkvelger nederst til høyre. Når du klikker på den, vil den utvide seg for å vise dine tilgjengelige språk, slik at du kan vise din foretrukne oversettelse.

For å begynne med grunnleggende tilpasninger, gå til Weglot > Design av språkknapp (Valgfritt). På denne skjermen kan du velge:

• Om du skal bruke en nedtrekksmeny eller ikke
• Om du skal bruke flagg eller ikke
• Typer flagg
• For å vise navnet på språkene
• For å bare vise språkkoden

Seksjonen Overstyr CSS er der du kan bruke CSS-regler for å style hvordan språkvelgeren din ser ut på din flerspråklige nettside. For eksempel kan du:

• Fjern pilen på knappen
• Endre bakgrunnsfargen
• Legg til en rullefelt
• Fjern rammen
• Legg til utfylling

Weglot gir noen eksempler i denne artikkelen om hvordan du kan tilpasse designet på språkknappen.

Når du scroller ned på innstillingsskjermen for Weglot, finner du instruksjoner om hvordan du plasserer språkvelgeren:

• I menyen. Gå til Utseende -> Menyer og dra og slipp den egendefinerte Weglot Translate-lenken der du ønsker.
• Som en widget. Gå til Utseende -> Widgets og dra og slipp Weglot Translate-widgeten der du ønsker.
• Med en kortkode. Bruk Weglot-kortkoden [ weglot_switcher ] (uten mellomrom) for å plassere språkvelgeren der du ønsker.
• I kildekoden. Du kan legge til følgende kode hvor som helst du ønsker i kildekoden til HTML-siden din:

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

For å vise deg hvordan språkvelgeren kan tilpasses på en flerspråklig nettside (enten det er en WordPress-, Shopify- eller en hvilken som helst annen type nettside), kan du se nedenfor hvordan Patyka viser språkvelgeren øverst til venstre på siden.

Språkene vises med navnene sine, og når du klikker på bryteren og velger et språk, oppdateres innholdet på siden og oversettes til språket du har valgt.

Casestudie: Maestrooo bruker Weglot

Grunnlagt i 2013, er Maestrooo et nettutviklingsbyrå basert i Frankrike som har From Future og Patyka blant sine kunder. Maestrooo håndterer nå flertallet av Shopify Plus-kunder i Frankrike.

Maestrooo lette etter en solid og pålitelig løsning for flerspråklige nettsider som enkelt kunne tilpasses kundenes behov. Etter å ha testet mange løsninger og funnet ut at de hadde problemer med SEO eller hreflang-håndtering, oppdaget teamet Weglot.

Weglot oversetter alt innholdet på Maestrooos klienters nettsider, enten det er dynamisk innhold, innhold generert av andre apper eller til og med betalingsprosessen, uten å påvirke utformingen av deres flerspråklige nettside.

I tillegg til å designe tilpassede nettsider for kunder, utvikler Maestrooo også de offisielle temaene for Shopifys temabutikk. Mens andre løsninger for flerspråklige nettsider ofte ødelegger formateringen av Maestrooos temaer, leverer Weglot en oversettelsesløsning som fungerer hver gang.

Maestrooo hjelper mellom 8 000 og 12 000 kunder med å komme i gang med Shopify hvert år ved å bruke Weglot for deres flerspråklige nettside.

Gå for full kulturell optimalisering med lokalisert design

Hvert av designprinsippene vi har sett på i dette innlegget, vil hjelpe deg med å lage en flerspråklig nettside som ser fantastisk ut og gir en flott brukeropplevelse.

For å gi besøkende og kunder en enestående opplevelse på deres eget språk, er det også verdt å sørge for at du ser lenger enn bare den flerspråklige nettsiden din. Vurder å oversette markedsføringsmateriell og kundestøtte.

Tenk også på hastigheten og ytelsen til den flerspråklige nettsiden din. I noen land som ikke er heldige nok til å ha rask internetthastighet, kan nedlasting av store språkpakker gjøre det vanskeligere for besøkende å få tilgang til innholdet ditt.

Med riktig oversettelsesplugin for flerspråklige nettsider og et nettsteddesign som tilbyr brukervennlige oversettelsesalternativer, vil du hjelpe kunder med et visuelt tiltalende brukergrensesnitt (UI) og brukeropplevelse (UX) på deres foretrukne språk. Prøv Weglot gratis med vår 14-dagers uforpliktende prøveperiode, eller ta en produktrondtur uten å registrere deg!