9 tips for designing a multi language website - Weglot

In an increasingly connected world, multi language websites are becoming more common. But designing them? It's a bit more involved than you might think! 9tipsfordesigningamultilanguagewebsite Inanincreasinglyconnectedworld, multi-languagewebsites arebecomingmorecommon.Butdesigningthem?It’sabitmoreinvolvedthanyoumightthink,especiallywhenyoustoptoconsiderthewebdesignchangesyou’llneedtomaketoyoursite. Thebasicsaresimple—withWeglot,youcanadddifferentlanguagestoyourecommercesiteinlessthan5minutes.Butthenyouhavetothinkaboutwhereyou’regoingtoplaceyourlanguageswitcher,howtoaccommodatechangestoyourlayoutwhenauserswitchesfromEnglishtoanRTLlanguage,andusingculturallyappropriatecolors,images,andicons. Inthisguide,we’lltakealookatsomeofthemostimportantdesignconsiderationstohelpyouplanforyourmultilingualwebsite. 1.Useglobaltemplatesforconsistentbranding Whensomeonelandsonyourmultilingualsite,youwantthemtohaveaconsistentuserexperience,nomatterwhichlanguageversionofyoursitetheylandon.ThismeansthatIndianvisitorswhovisityourEnglishsiteshouldseethesamebrandinganddesignastheHindiversion. Youcan’tstopbilingualormultilingualvisitorsseeingdifferentversionsofyourmultilanguagesite,butyoucanmakesuretheyseethesamebranding,layout,andwebdesignelementswhentheyswitchfromthedefaultlanguage. Ifyouuseacontentmanagementsystem,suchasWordPress,withWeglot,creatingaconsistentmultilanguagewebsiteiseasy.Weglotwillseamlesslyintegratewithyourwebsitebuilder’sthemeandautomaticallytranslateyourcontent.It’llalsointegratewithalltheotherimportantpartsofyoursite’sfunctionality,suchasecommerceplugins–meaningthatthere’snoreasontohavedifferentthemesordesignsforthedifferentlanguagesyouaddtoyourmultilanguagewebsite. Forexample,whenyouvisittheAirbnbhomepagefromacountrylikeAustralia… …andthenswitchtoJapanese,thedesignandbrandingisconsistentacrossbothlanguages. Notonlydoeshavinganinstantlyrecognizabledesignhelpreinforceyourbranding,butitwillhelpwithfutureupdatesofyourmultilingualwebsiteandreduceheadacheswhendifferentlanguagescreatetheneedforUIor UXchanges. 2.Makethelanguageswitcherreallyeasytofind Placeyourlanguageswitchingdrop-downinaprominentlocationonyourhomepageandeveryotherpageofyoursite.You’llfindmultilanguagewebsiteswillhavethelanguageswitcherintheheaderorfooterofthepage. Whateveroptionyoudecidetogowithforyourmultilingualsite,makesureit’sreallyeasytofind. You’llalsowanttomakesureyourlanguageswitchingoptionsarecrystalclear.It’sbesttorefertoanewlanguageinitsnativelanguage.Forexample,use“Deutsch”insteadof“German”and“日本語”insteadof“Japanese.” Asana,forinstance,usesadrop-downmenuwiththenamesofthedifferentlanguagesavailable: Youwanttomakevisitorstoyourmultilanguagewebsitetofeelwelcome,nomatterwhatlanguagetheyspeak.Placingyourlanguagesomewherethatiseasytofindwillhelpachievethat. 3.Letvisitorschoosetheirpreferredlanguage You’dthinklettinguserschoosetheirpreferredlanguagewouldbeano-brainer,butsomanymulti-languagesitesactuallymakeitreallydifficulttochoosealanguage.Instead,theyforceuserstoswitchregions. Bigbrandsaretheworstoffenders.You’lloftenfindmanythatforceyoutochangetheregionoftheirmultilingualsite(i.e.switchfrom www.adobe.com to www.adobe.com/kr/)whenyoujustwanttochangethedefaultlanguage. JustbecausesomeonespeaksHindidoesn’tmeantheywanttoswitchtothatregionforacompany’smultilingualwebsite.WhatiftheyliveinNewYorkandwanttobuyfromtheU.S.site,butwanttoreadthesiteinHindi?Don’tputupabarriertothembuyingfromyourmultilingualwebsite—helpthemaccessyourcontentintheirpreferredlanguage. Here’sanexcellentexampleofacompanythatactuallyletsvisitorschoosetheirpreferredlanguage—Uberdisplaysitslanguageswitchingoptionsinthefooter: Whenyouclick“English,”amodalpopsup,lettingyouchooseyourpreferredlanguage: What’sgreataboutUber’slanguageswitchingdesignisthatitallowsvisitorstoselecttheirpreferredlanguagewithoutforcingthemtoswitchregions. Ifyouwanttofurtherimprovetheuserexperienceforyourvisitors,considering“remembering”theirdefaultlanguagesothenexttimetheyvisityourmultilanguagewebsite,itwillautomaticallyloadintheirnativelanguage. Autodetectinglanguages Manymultilanguagewebsiteswilldetectthenativelanguageofthewebbrowsertoautomaticallysettheprimarylanguageforusers. Whilethisdoessavesometimeforusers,servingautomatictranslationsusinglanguagedetectionisn’tanexactscience.It’simportanttokeepinminduserswhomaylandonthe“wrong”versionofyourmultilingualwebsite. AvisitormightbephysicallylocatedinSpainandyourmultilanguagewebsitewillautodetectthatanddisplaySpanish,buttheycouldbeanativeEnglishspeakerwhocan’treadSpanish. Soifyou’regoingtoauto-detectlocations,alsoprovidealanguageswitchersovisitorshavetheoptiontoselectdifferentlanguages. Flagsvslanguagenames Flagsareoftenusedtoindicatealanguage,butthereare somecontextualissues you’llwanttokeepinmind: Flagsrepresentcountries,notlanguages.Acountrycanhavemorethanoneofficiallanguage.Alanguagecanbespokeninmorethanonecountry.Visitorsmightnotrecognizeaflag(becauseoftheiconsize)ortheymightbeconfusedbysimilarflags. Ultimately,youwanttoprovidelanguageswitchingoptionsthatareeasytounderstandinanylanguage. 4.Accountfortextexpansion Whentextistranslatedfromonelanguagetoanother,likewithGoogleTranslate,thelengthoftheoriginaltextandtheresultingtranslationwillbedifferent.Thiscanbechallengingwhenitcomestolayingoutyourdesign. Somewrittenlanguagesaremoreconcisethanothers.LanguagessuchasJapaneseandChinesewilluseoneortwocharacterstoconveyapieceofinformation,whereasindifferentlanguages,youwouldneedseveralwords. LanguageslikeSpanishandEnglisharewordy,sometimesneedingupwardsof30%morespacethandifferentlanguages. The W3C’sguidetotextsizeintranslation,whichIhighlyrecommendreadinginfull,offerssomegreatadvice. TheW3Chighlightswhyit’scriticalthatmachinetranslationtoolshavehaveadaptiveUIelements,suchasbuttons,inputfields,anddescriptivetext. Forexample,whenFlickrwastranslatedintodifferentlanguages,designershadtoconsiderthetextunderneathphotosthatindicatethenumberofviews. Thetablebelowshowscomparativelengthsoftheword“view”indifferentlanguagesasaratiooftheoriginalEnglish: That’sa300%expansionfromEnglishtoItalian! Thethingtorememberhereisthattextwillnormallyexpandorcontractinwidth,soensureyourmultilingualwebsiteaccountsforthat.Alsokeepinmindthatthesmallerthesourcetext,thelongerthelikelytranslationwillbe.Ifyoufindthatspaceisanissue,tryadifferentandlessliteraltranslation,orchangethefontsizebasedonthenewlanguage. Characterandlineheightisanotherconsideration.It’scommonfornon-LatintexttohavemuchtallercharactersthanLatintext.ScriptslikeArabicwillalsoneedmoreverticalspacebetweenlinescomparedtoLatinlanguages. 5.Considerwebfontcompatibilityandencoding TheW3Csays youshould always specifytheencodingofyourwebpages.ItrecommendsusingUTF-8tomakesurethatspecialcharactersaredisplayedproperlyregardlessofthelanguage. Here’showtomaketheUTFdeclarationintheheaderofyourpages: Anywebfontsyouusewillneedtobecompatiblewithallthenon-EnglishlanguagesthatyourWordPressmultilanguagesitesupports,especiallyfornon-Latinbasedlanguages.Thismeansthefontsyouusemustcontainallthecharactersandglyphsneeded. SomefontsmightsupportLatinscriptsbutnotRTLorCyrillic,socheckthatthenon-Englishlanguagesyouneedareincludedbeforecommittingtousinganyfonts. GoogleFonts,forexample,letsyouselectlanguagesbeforedownloadingafontpackage: Asinglelanguagecancomprisehundredsofcharacters,whichcanmakefontfileshugeinsize—anotherthingtokeepinmindwhenchoosingfontsforyourmultilanguagewebsite. 6.Designforright-to-leftlanguages Designingpagesforright-to-leftlanguagescanthrowupchallenges.As SteelKiwideveloperRobertDodiswritesforSmashingMagazine,designingforTRLmeans“flippingtheinterface.” Forexample,here’swhatFacebook’sleft-to-rightdesignlookslike: Andhere’swhatFacebook’sright-to-leftdesignlookslikeinArabic: Mirroringyourdesignissomethingyouneedtoconsiderifyou’redesigningforbothLTRandRTLlanguages. Ihighlyrecommendreading Robert’sSmashingMagazinearticle foradetailedrundownofhowtodesignforRTL.Idon’twanttoreinventthewheelhere,sogoreadhistutorial.IwanttoshowyouhowWeglotsupportsRTLlanguagesandcanmakethetranslationprocesseasyforyourmultilanguagewebsite. Weglot’stranslationservicesupportsRTLlanguagesandwithCSSrulesyoucanadaptthelayoutofyourmultilanguagesitetoaccommodatethem.HerearesomeoftheavailableRTLlanguages: Arabic(ar)Hebrew(he)Persian(fa)Urdu(ur) AfteraddinganRTLlanguagetoyourmultilingualsitewithWeglot,youcancustomizehowitdisplaysbyapplyingCSSrulestoyourlayout.IntheWordPressadmin,goto Weglot>Languagebuttondesign(Optional) andscrolldownto OverrideCSS.AddanyCSSrulesyouwantinthetextarea—youmightwanttochangethefont,size,lineheightandmoretostyletheprimarylanguagetofityourdesign. That’sallyouhavetodotoaddandstyleRTLlanguageswithWeglot!YoucanreadmoreabouthowWeglotsupportsRTLlanguagesinthe documentation. 7.Useimagesandiconsthatareculturallyappropriate Images,icons,andothergraphicsareessentialelementsofanywebpage.Butvisualsbytheirverynaturearesubjectiveandcanbeinterpretedindifferentwayswhenputintoanotherculturalcontext. Forinstance,theFrenchversionofClarins’homepagefeaturesaCaucasianwoman: Butwhenyouvisitthecompany’sKoreanhomepage,itfeaturesanimageofaKoreanwoman: Visualsalsohavethe potentialtooffend.ImagesthatmightseeminnocenttoWesternaudiencesmightbetabooinanothercountry.Forinstance,imagesdepictinggaycouplesorgenderequalitywouldnotbeacceptedincountrieswherehomosexualityisstillillegalandwomen’srightsarenotyetfullyrecognized. You’llalsoneedtoconsidersmallelements,likeicons,andwhattheysignifyforpeoplefromparticularlocationswhovisityourmultilanguagewebsite.Forinstance,aniconofaglobeforanEnglishspeakingAustralianaudiencewouldlookverydifferentforusersinAfrica: Thethirdiconaboveindicatesaglobebutdoesn’tfeatureaspecificcountryorregion,makingitmoreappropriateforuseonamultilanguagewebsite. You’llneedtoreviewimagesandothergraphicelements,takingintoaccountanyregionalandculturalsensitivities. Avoidusingimagesandothergraphicsthathaveembeddedtext.Youwon’tbeabletotranslateembeddedtextwithtoolslikeWeglot,sojustavoiditaltogether. 8.Useculturallyappropriatecolors Thewaydifferentculturesseeandinterpretcolor variesdramaticallyaroundtheworld. Forinstance,inwesternculture,redsymbolizeslove,energy,passion,anddanger.InAsiancultures,it’saveryimportantcolor,symbolizinggoodluck,prosperity,celebration,andalonglife.Conversely,insomeAfricancountries,redisassociatedwithdeathandaggression. Blueisconsideredthesafestandmostgloballyacceptedcolorchoicefordesignsinceithasmanypositiveassociations.It’sacalmingcolorthat’sconsideredtobesoothingandpeaceful,despitethefactit’salsoassociatedwithsadnessanddepression.Blueisalsothemostpopularcolorforbanklogosbecauseitrepresentstrustandauthority. Whenchoosingcolorsforyourmultilanguage websitedesign,makesuretoGoogle thesymbolismassociatedwithanycolorsyouplantouse. 9.Datesandotherformats Noteverycountryusesthesamedateformat,evenacrosstheEnglishlanguage.Forexample,intheUKandEuropeit’scommontoformatthedateasdate-month-year,whereasintheU.S.it’sformattedmonth-date-year. Youmayalsoneedtotranslateunitsofmeasure,whichhelpswithSEO,dependingonyourtargetaudience.While90%oftheworldusesthemetricsystem,theU.S.,LiberiaandMyanmarstillusetheImperialsystemofweightsandmeasures. ChoosingtherightWordPresstranslationpluginforyourdesign WordPresstranslationpluginscomeinallshapesandsizes,andhowtheyworkwithyourparticulardesignvarieswidely.Onesolutionthatisguaranteedtointegrateseamlesslywithyoursitemultilanguagewebsiteis Weglot. YoucanevenuseWeglot’svisualeditortotranslateyourcontentonthefront-endofyoursiteandacrosssubdomainssoyoucanseehowitlookswithinthecontextofyoursitedesignandlayout,similartoGoogleTranslate. WithWeglot,thedesignandlocationofyourlanguageswitcherare100%customizable.Thedefaultbuttonhasbeendesignedtosuitanysite,butyoucanalsostyleitviacustomCSStouseanyformatyoulike. What’smore,Weglotsupportsthedesignprinciplessetoutinthispost,including: UsingaglobaltemplateforconsistentbrandingProvidingeasy-to-findlanguageswitchingoptionsEnablingvisitorstochoosetheirpreferredlanguageAutomaticUTFencodingRTLlanguagesupport Let’stakealookatthemostimportantdesign-relatedfeatureWeglotoffers:customizingyourlanguageswitcher. Customizingyoursite’slanguageswitchingoptionswithWeglot Afterinstallingthe Weglotplugin onyourWordPressmultilanguagewebsiteandsettingup,you’llbepromptedtoenteryourAPIkey,yourdefaultlanguage,andthelanguageyouwouldliketotranslateyourcontentinto,likeGoogleTranslate. Ifyoudon’talreadyhaveaWeglotaccount,you’llneedtocreateonetogetyourAPIkey. Onceyousaveyourchanges,refreshthefront-endofyournewmultilanguagewebsiteandyou’llseeanewlanguageswitcherinthebottom-rightcorner.Whenyouclickit,it’llexpandtodisplayyouravailablelanguages,allowingyoutodisplayyourpreferredtranslation. Tostartmakingbasiccustomizations,goto Weglot>Languagebuttondesign(Optional).Onthisscreen,youcanchoose: WhetherornottouseadropdownWhetherornottouseflagsTypesofflagsTodisplaythenameoflanguagesTojustdisplaythecodeforlanguages The OverrideCSS sectioniswhereyoucanapplyCSSrulestostylehowyourlanguageswitcherlooksonyourmultilanguagewebsite.Forexample,youcould: RemovethearrowonthebuttonChangethebackgroundcolorAddascrollbarRemovetheborderAddpadding Weglotprovidessomeexamplesinthisarticleabout customizingthelanguagebuttondesign. WhenyouscrolldowntheconfigurationscreenforWeglot,you’llfindinstructionsonhowtopositionthelanguageswitcher: Inmenu. Goto Appearance->Menus anddraganddroptheWeglotTranslateCustomlinkwhereyouwant.Asawidget.Goto Appearance->Widgets anddraganddroptheWeglotTranslatewidgetwhereyouwant.Withashortcode. UsetheWeglotshortcode[weglot_switcher](withoutthespaces)toplaceyourlanguageswitcherwhereyouwant.Inthesourcecode. YoucanaddthecodewhereveryouwantinthesourcecodeofyourHTMLpage. Toshowyouhowthelanguageswitchercanbecustomizedonamultilanguagewebsite(whetherit’saWordPress,aShopifyoranyothertypeofwebsite),youcanseebelowhow Patyka displaysthelanguageswitcherinthetop-leftcornerofthepage. Thelanguagesaredisplayedusingtheirnames,andwhenyouclicktheswitchandselectalanguage,itupdatesthecontentonthepage,translatingitintoyourchosenlanguage. CaseStudy:MaestroooisUsingWeglot Foundedin2013, Maestrooo isawebdevelopmentagencybasedinFrancethatcounts FromFuture andPatykaamongstitscustomers.MaestrooonowhandlesthemajorityofShopifyPluscustomersinFrance. Maestrooowaslookingforasolidandreliablemultilanguagewebsitesolutionthatcouldeasilyadapttotheircustomers’requirements.AftertestingmanysolutionsandfindingtheyhadproblemswithSEOorhreflangmanagement,theteamdiscoveredWeglot. WeglottranslatesallofthecontentofMaestrooo’sclientsites,whetherit’sdynamiccontent,contentgeneratedby otherapps oreventhecheckoutprocess,withoutimpactingthelayoutoftheirmultilanguagewebsite. Inadditiontodesigningcustomwebsitesforclients,MaestroooalsodevelopstheofficialthemesforShopify’sThemestore.WhileothermultilanguagewebsitesolutionsoftenbreaktheformattingofMaestrooo’sthemes,Weglotprovidesatranslationsolutionthatworkseverytime. Maestrooohelpsbetween8,000and12,000customersgetstartedwithShopifyeachyearusingWeglotfortheirmultilanguagewebsite. Goforfullculturaloptimizationwithlocalizeddesign Eachofthedesignprincipleswe’veexploredinthispostwillputyouontherightcoursetocreatingamultilanguagewebsitethatlooksgreatandoffersadelightfuluserexperience. Toprovideyoursitevisitorsandcustomersanoutstandingexperienceintheirnativelanguage,it’salsoworthensuringthatyoulookbeyondyourmultilanguagewebsite.Considertranslatingyourmarketingmaterialsandcustomersupport. Also,consideryourmultilanguagewebsite’sspeedandperformance.Insomecountriesthataren’tluckyenoughtohavefastinternetspeeds,downloadinglargelanguagepacksmakeitmoredifficultforvisitorstoaccessyourcontent. Withtherightmultilanguagewebsitetranslationpluginandasitedesignthatprovideseasy-to-usetranslationoptions,you’llbehelpingcustomerswithavisuallyappealingUIandUXintheirpreferredlanguage. InterestedintryingWeglotforfree? Tryour10-dayfreetrialandseehowquicklyyoucanhaveamultilingualwebsiteupandrunning! Startfreetrial