9 tipů pro navrhování vícejazyčného webu

V čím dál propojenějším světě jsou vícejazyčné weby čím dál běžnější. Ale jejich navrhování? Je to trochu složitější, než si možná myslíte, zvláště když se zamyslíte nad změnami webdesignu, které budete muset na svém webu udělat.

Základy jsou jednoduché – s Weglotem můžete na svůj web přidat různé jazyky za méně než 5 minut. Ale pak musíte přemýšlet o tom, kam umístíte přepínač jazyků, jak se přizpůsobit změnám rozložení, když uživatel přepne z angličtiny na jazyk psaný zprava doleva (RTL), a o používání kulturně vhodných barev, obrázků a ikon.

V tomto průvodci se podíváme na některé z nejdůležitějších designových úvah, které vám pomohou naplánovat vícejazyčný web podle osvědčených postupů.

1. Používejte globální šablony pro jednotnou značku

Když někdo přijde na váš vícejazyčný web, chcete, aby měl konzistentní uživatelský zážitek, bez ohledu na to, na jakou jazykovou verzi vašeho webu se dostane. To znamená, že indičtí návštěvníci, kteří navštíví váš anglický web, by měli vidět stejnou značku a design jako u hindské verze.

Nemůžete zabránit bilingvním nebo vícejazyčným návštěvníkům, aby viděli různé verze vašeho vícejazyčného webu, ale můžete se ujistit, že uvidí stejnou značku, rozložení a prvky webdesignu, když přepnou z výchozího jazyka.

Pokud používáte systém pro správu obsahu, jako je WordPress, s Weglotem, vytvoření konzistentního vícejazyčného webu je snadné. Weglot se bezproblémově integruje s tématem vašeho nástroje pro tvorbu webu a automaticky přeloží váš obsah. Integruje se také se všemi dalšími důležitými částmi funkcionality vašeho webu, jako jsou e-commerce pluginy – to znamená, že není důvod mít různé šablony nebo designy pro různé jazyky, které přidáte na svůj vícejazyčný web.

Například když navštívíte hlavní stránku Airbnb ze země jako je Austrálie…

… a pak přepnete na japonštinu, design a značka jsou konzistentní v obou jazycích.

Okamžitě rozpoznatelný design nejenže pomáhá posílit vaši značku, ale také usnadní budoucí aktualizace vaší vícejazyčné webové stránky a sníží potíže, které vznikají, když různé jazyky vyžadují změny uživatelského rozhraní nebo uživatelského zážitku.

2. Udělejte přepínač jazyků opravdu snadno k nalezení

Umístěte rozbalovací nabídku pro přepínání jazyků na viditelné místo na vaší domovské stránce a na všech ostatních stránkách vašeho webu. Zjistíte, že vícejazyčné weby mají přepínač jazyků v záhlaví nebo zápatí stránky.

Ať už se rozhodnete pro jakoukoli možnost pro váš vícejazyčný web, ujistěte se, že je opravdu snadno k nalezení.

Také se budete chtít ujistit, že vaše možnosti přepínání jazyků jsou křišťálově jasné. Nejlepší je odkazovat na nový jazyk v jeho rodném jazyce. Například použijte „Deutsch“ místo „German“ a „日本語“ místo „Japanese“.

Asana například používá rozbalovací nabídku s názvy dostupných jazyků:

Chcete, aby se návštěvníci vašeho vícejazyčného webu cítili vítáni, bez ohledu na to, jakým jazykem mluví. Umístění přepínače jazyků na snadno dostupné místo k tomu pomůže.

3. Nechte návštěvníky vybrat si preferovaný jazyk

Člověk by si řekl, že nechat uživatele vybrat si preferovaný jazyk je úplná samozřejmost, ale spousta vícejazyčných webů to ve skutečnosti hodně ztěžuje. Místo toho nutí uživatele přepínat regiony.

Nejhorší jsou v tom velké značky. Často narazíte na spoustu takových, které vás nutí měnit region jejich vícejazyčného webu (např. přepínat z www.adobe.com na www.adobe.com/us/), i když si jen chcete změnit výchozí jazyk.

To, že někdo mluví hindsky, ještě neznamená, že se chce přepnout do daného regionu na vícejazyčném webu nějaké firmy. Co když žije v New Yorku a chce nakupovat z amerického webu, ale chce si ho přečíst v hindštině? Nestavte jim překážky v nakupování na vašem vícejazyčném webu – pomozte jim dostat se k vašemu obsahu v jejich preferovaném jazyce.

Tady je příklad firmy, která skutečně nechá návštěvníky vybrat si preferovaný jazyk – Uber zobrazuje možnosti přepínání jazyků v patičce:

Když kliknete na „English“, vyskočí modální okno, které vám umožní vybrat si preferovaný jazyk mezi angličtinou a francouzštinou:

Skvělé na designu přepínání jazyků u Uberu je, že umožňuje návštěvníkům vybrat si preferovaný jazyk, aniž by je nutilo přepínat regiony.

Pokud chcete ještě vylepšit uživatelský zážitek pro vaše návštěvníky, zvažte „zapamatování“ jejich výchozího jazyka, aby se jim váš vícejazyčný web při příští návštěvě automaticky načetl v jejich rodném jazyce.

Automatická detekce jazyků

Mnoho vícejazyčných webů detekuje rodný jazyk webového prohlížeče, aby automaticky nastavily primární jazyk pro uživatele.

I když to uživatelům ušetří nějaký čas, poskytování automatických překladů pomocí detekce jazyka není úplně přesné. Je důležité myslet na uživatele, kteří se můžou dostat na „špatnou“ verzi vašeho vícejazyčného webu.

Návštěvník se může fyzicky nacházet ve Španělsku a váš vícejazyčný web to automaticky detekuje a zobrazí španělštinu, ale může to být rodilý mluvčí angličtiny, který neumí španělsky.

Takže pokud budete automaticky detekovat polohu, poskytněte také přepínač jazyků, aby návštěvníci měli možnost vybrat si různé jazyky.

Weglot nabízí možnost automaticky přesměrovat vaše návštěvníky podle jazyka jejich prohlížeče. Vyzkoušejte Weglot v akci na svém webu s 14denní bezplatnou zkušební verzí.

Vlajky vs. názvy jazyků

Vlajky se často používají k označení jazyka, ale existují některé kontextové problémy, které budete chtít mít na paměti:

• Vlajky reprezentují země, ne jazyky.
• Země může mít více než jeden úřední jazyk.
• Jazykem se může mluvit ve více než jedné zemi.
• Návštěvníci nemusí poznat vlajku (kvůli velikosti ikony) nebo je můžou zmást podobné vlajky.

Nakonec chcete nabídnout možnosti přepínání jazyků, které jsou snadno srozumitelné v jakémkoli jazyce.

4. Počítejte s roztažením textu

Když se text překládá z jednoho jazyka do druhého, třeba pomocí Google Překladače, délka původního textu a výsledného překladu se bude lišit. To může být výzva při navrhování rozložení.

Některé psané jazyky jsou stručnější než jiné. Jazyky jako japonština a čínština použijí jeden nebo dva znaky k předání informace, zatímco v jiných jazycích byste potřebovali několik slov.

Jazyky jako španělština a angličtina jsou rozvláčné a někdy potřebují až o 30 % více místa než jiné jazyky.

Průvodce W3C pro velikost textu v překladu, který vřele doporučujeme přečíst celý, nabízí skvělé rady.

W3C zdůrazňuje, proč je klíčové, aby nástroje pro strojový překlad měly adaptivní prvky uživatelského rozhraní, jako jsou tlačítka, vstupní pole a popisný text.

Například když se Flickr překládal do různých jazyků, designéři museli brát v úvahu text pod fotkami, který udává počet zhlédnutí.

Tabulka níže ukazuje srovnávací délky slova „view“ v různých jazycích v poměru k původní angličtině:

To je 300% rozšíření z angličtiny do italštiny!

Tady je dobré si uvědomit, že text se bude normálně roztahovat nebo smršťovat na šířku, takže se ujistěte, že váš vícejazyčný web s tím počítá. Také mějte na paměti, že čím kratší je původní text, tím delší bude pravděpodobně překlad. Pokud zjistíte, že je problém s místem, zkuste jiný a méně doslovný překlad, nebo změňte velikost písma podle nového jazyka.

Výška znaků a řádků je další věc, na kterou je potřeba myslet. Je běžné, že nelatinské texty mají mnohem vyšší znaky než latinské. Písma jako arabština budou také potřebovat více vertikálního prostoru mezi řádky ve srovnání s latinskými jazyky.

5. Myslete na kompatibilitu webových písem a kódování

W3C říká, že byste měli vždy specifikovat kódování svých webových stránek. Doporučuje používat UTF-8, aby se zajistilo, že se speciální znaky zobrazí správně bez ohledu na jazyk.

Takhle uděláte deklaraci UTF v hlavičce vašich stránek:

Jakákoli webová písma, která používáte, budou muset být kompatibilní se všemi jinými než anglickými jazyky, které váš vícejazyčný web na WordPressu podporuje, zejména pro jazyky, které nejsou založeny na latince. To znamená, že písma, která používáte, musí obsahovat všechny potřebné znaky a glyfy.

Některá písma mohou podporovat latinku, ale ne RTL nebo cyrilici, takže si zkontrolujte, že jsou zahrnuty potřebné nelatinské jazyky, než se zavážete k používání jakýchkoli písem.

Google Fonts vám například umožňuje vybrat jazyky před stažením balíčku písem:

Jeden jazyk může obsahovat stovky znaků, což může způsobit, že soubory písem budou obrovské – další věc, na kterou je třeba myslet při výběru písem pro váš vícejazyčný web.

6. Design pro jazyky psané zprava doleva

Navrhování stránek pro jazyky psané zprava doleva může přinést výzvy. Jak píše vývojář SteelKiwi Robert Dodis pro Smashing Magazine, design pro RTL znamená „převrácení rozhraní“.

Například, takhle vypadá design Facebooku zleva doprava:

A takhle vypadá design Facebooku zprava doleva v arabštině:

Všimněte si, jak se dokonce i posuvník mění pozici!

Zrcadlení vašeho designu je něco, co musíte zvážit, pokud navrhujete pro jazyky LTR i RTL.

Vřele doporučujeme přečíst si článek Roberta v Smashing Magazine pro podrobný přehled, jak navrhovat pro RTL. Nechceme zde znovu vynalézat kolo, takže si přečtěte jeho tutoriál. Chceme vám ukázat, jak Weglot podporuje RTL jazyky a může usnadnit proces překladu pro váš vícejazyčný web.

Překladová služba Weglot podporuje RTL jazyky a pomocí pravidel CSS můžete přizpůsobit rozložení vašeho vícejazyčného webu tak, aby jim vyhovovalo. Zde jsou některé z dostupných RTL jazyků:

• Arabština (ar)
• Hebrejština (he)
• Perština (fa)
• Urdština (ur)

Po přidání RTL jazyka na váš vícejazyčný web s Weglotem si můžete přizpůsobit jeho zobrazení použitím pravidel CSS na vaše rozložení. V administraci WordPressu přejděte na Weglot > Design tlačítka jazyka (Volitelné) a sjeďte dolů na Přepsat CSS. Přidejte libovolná pravidla CSS do textového pole – možná budete chtít změnit písmo, velikost, výšku řádku a další, abyste stylizovali primární jazyk tak, aby odpovídal vašemu designu.

To je vše, co musíte udělat pro přidání a stylizaci RTL jazyků s Weglotem! Více o tom, jak Weglot podporuje RTL jazyky, si můžete přečíst v dokumentaci.

7. Používejte obrázky a ikony, které jsou kulturně vhodné

Obrázky, ikony a další grafika jsou základními prvky každé webové stránky. Ale vizuály jsou svou povahou subjektivní a mohou být interpretovány různými způsoby, když jsou zasazeny do jiného kulturního kontextu.

Například francouzská verze domovské stránky Clarinsu zobrazuje bělošskou ženu:

Ale když navštívíte japonskou domovskou stránku společnosti, zobrazuje obrázek japonské ženy:

Obrázky můžou taky někoho urazit. Co se zdá nevinné západnímu publiku, může být v jiné zemi tabu. Například obrázky zobrazující homosexuální páry nebo rovnost pohlaví by nebyly přijaty v zemích, kde je homosexualita stále nezákonná a práva žen ještě nejsou plně uznávána.

Budete taky muset myslet na drobnosti, jako jsou ikony, a co znamenají pro lidi z různých míst, kteří navštíví váš vícejazyčný web. Třeba ikona glóbu pro anglicky mluvící australské publikum bude vypadat úplně jinak pro uživatele v Africe:

Třetí ikona nahoře znázorňuje glóbus, ale neukazuje konkrétní zemi nebo region, takže je vhodnější pro použití na vícejazyčném webu.

Budete muset zkontrolovat obrázky a další grafické prvky a zohlednit regionální a kulturní citlivost.

Vyhněte se používání obrázků a jiné grafiky, které mají vložený text. Vložený text nebudete moci přeložit pomocí nástrojů jako Weglot, takže se mu raději úplně vyhněte.

8. Používejte kulturně vhodné barvy

To, jak různé kultury vnímají a interpretují barvy, se po celém světě dramaticky liší.

Například v západní kultuře červená symbolizuje lásku, energii, vášeň a nebezpečí. V asijských kulturách je to velmi důležitá barva, symbolizující štěstí, prosperitu, oslavy a dlouhý život. Naopak v některých afrických zemích je červená spojována se smrtí a agresí.

Modrá je považována za nejbezpečnější a celosvětově nejpřijatelnější barvu pro design, protože má mnoho pozitivních asociací. Je to uklidňující barva, která je považována za konejšivou a mírumilovnou, i když je také spojována se smutkem a depresí. Modrá je také nejoblíbenější barvou pro loga bank, protože představuje důvěru a autoritu.

Když vybíráte barvy pro design vašeho vícejazyčného webu, nezapomeňte si vyhledat symboliku spojenou s barvami, které chcete použít.

9. Datumy a další formáty

Ne každá země používá stejný formát data, a to ani v rámci angličtiny. Například ve Velké Británii a Evropě je běžné formátovat datum jako den-měsíc-rok, zatímco v USA je to měsíc-den-rok.

Možná budete muset přeložit i jednotky měření, což pomáhá s SEO, v závislosti na vašem cílovém publiku. Zatímco 90 % světa používá metrický systém, USA, Libérie a Myanmar stále používají imperiální systém měr a vah.

Jak vybrat správný překladový plugin pro WordPress pro váš design

Překladové pluginy pro WordPress existují v mnoha podobách a velikostech a jejich fungování s vaším konkrétním designem se značně liší. Jedním řešením, které se zaručeně bezproblémově integruje s vaším vícejazyčným webem, je Weglot.

Můžete dokonce použít Visual Editor od Weglotu k překladu obsahu na front-endu vašeho webu a napříč subdoménami, abyste viděli, jak vypadá v kontextu designu a rozložení vašeho webu, podobně jako u Google Překladače.

S Weglotem je design a umístění vašeho přepínače jazyků 100% přizpůsobitelné. Výchozí tlačítko bylo navrženo tak, aby vyhovovalo jakémukoli webu, ale můžete ho také stylovat pomocí vlastního CSS a použít jakýkoli formát, který se vám líbí.

Navíc Weglot podporuje principy designu uvedené v tomto článku, včetně:

• Používání globální šablony pro konzistentní branding
• Nabízení snadno dostupných možností přepínání jazyků
• Umožnění návštěvníkům vybrat si preferovaný jazyk
• Automatické kódování UTF
• Podpora jazyků RTL

Pojďme se podívat na nejdůležitější funkci související s designem, kterou Weglot nabízí: přizpůsobení vašeho přepínače jazyků.

Nastavení možností přepínání jazyků na vašem webu s Weglotem

Po instalaci pluginu Weglot na váš vícejazyčný WordPress web a jeho nastavení budete vyzváni k zadání vašeho API klíče, výchozího jazyka a jazyka, do kterého chcete svůj obsah přeložit, podobně jako u Google Překladače.

Pokud ještě nemáte účet u Weglotu, budete si ho muset vytvořit, abyste získali svůj API klíč.

Jakmile uložíte změny, obnovte veřejnou část svého nového vícejazyčného webu a v pravém dolním rohu uvidíte nový přepínač jazyků. Když na něj kliknete, rozbalí se a ukáže dostupné jazyky, takže si můžete vybrat preferovaný překlad.

Chcete-li začít s jednoduchými úpravami, jděte do Weglot > Vzhled tlačítka jazyka (Volitelné). Na této obrazovce si můžete vybrat:

• Zda použít rozbalovací nabídku, nebo ne
• Zda použít vlajky, nebo ne
• Typy vlajek
• Zobrazení názvů jazyků
• Zobrazení pouze kódů jazyků

Sekce Přepsat CSS je místo, kde můžete použít CSS pravidla k úpravě vzhledu vašeho přepínače jazyků na vícejazyčném webu. Například můžete:

• Odebrat šipku na tlačítku
• Změnit barvu pozadí
• Přidat posuvník
• Odstranit okraj
• Přidat odsazení

Weglot nabízí v tomto článku několik příkladů, jak si přizpůsobit vzhled tlačítka pro přepínání jazyků.

Když sjedete níže na konfigurační obrazovce pro Weglot, najdete pokyny, jak umístit přepínač jazyků:

• V menu. Jděte do Vzhled -> Menu a přetáhněte vlastní odkaz Weglot Translate tam, kam chcete.
• Jako widget. Jděte do Vzhled -> Widgety a přetáhněte widget Weglot Translate tam, kam chcete.
• Pomocí shortcode. Použijte Weglot shortcode [ weglot_switcher ] (bez mezer) k umístění přepínače jazyků tam, kam chcete.
• Do zdrojového kódu. Následující kód můžete přidat kamkoli chcete do zdrojového kódu vaší HTML stránky:

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

Abyste viděli, jak lze přepínač jazyků přizpůsobit na vícejazyčném webu (ať už jde o WordPress, Shopify nebo jakýkoli jiný typ webu), níže se můžete podívat, jak Patyka zobrazuje přepínač jazyků v levém horním rohu stránky.

Jazyky se zobrazují podle svých názvů, a když kliknete na přepínač a vyberete jazyk, obsah stránky se aktualizuje a přeloží se do vámi zvoleného jazyka.

Případová studie: Maestrooo používá Weglot

Agentura Maestrooo, založená v roce 2013, se sídlem ve Francii, se specializuje na vývoj webových stránek a mezi její klienty patří From Future a Patyka. Maestrooo nyní obsluhuje většinu zákazníků Shopify Plus ve Francii.

Maestrooo hledalo spolehlivé a robustní řešení pro vícejazyčné webové stránky, které by se snadno přizpůsobilo požadavkům jejich zákazníků. Po otestování mnoha řešení a zjištění, že mají problémy s SEO nebo správou hreflangů, tým objevil Weglot.

Weglot překládá veškerý obsah klientských webů Maestrooo, ať už jde o dynamický obsah, obsah generovaný jinými aplikacemi nebo dokonce proces objednávky, aniž by to ovlivnilo rozložení jejich vícejazyčného webu.

Kromě navrhování vlastních webových stránek pro klienty Maestrooo také vyvíjí oficiální šablony pro obchod s tématy Shopify. Zatímco jiná řešení pro vícejazyčné weby často narušují formátování šablon Maestrooo, Weglot poskytuje řešení pro překlad, které funguje vždy.

Maestrooo pomáhá 8 000 až 12 000 zákazníkům začít se Shopify každý rok s využitím Weglotu pro jejich vícejazyčný web.

Jděte do toho naplno s kulturní optimalizací a designem na míru

Každý z principů designu, které jsme probrali v tomto článku, vás nasměruje správným směrem k vytvoření vícejazyčného webu, který vypadá skvěle a nabízí příjemný uživatelský zážitek.

Abyste svým návštěvníkům a zákazníkům nabídli vynikající zážitek v jejich rodném jazyce, vyplatí se zajistit, abyste se podívali dál než jen na svůj vícejazyčný web. Zvažte překlad svých marketingových materiálů a zákaznické podpory.

Zvažte také rychlost a výkon vašeho vícejazyčného webu. V některých zemích, které nemají to štěstí na rychlé internetové připojení, stahování velkých jazykových balíčků ztěžuje návštěvníkům přístup k vašemu obsahu.

Se správným pluginem pro překlad vícejazyčných webů a designem webu, který nabízí snadno použitelné možnosti překladu, pomůžete zákazníkům s vizuálně atraktivním uživatelským rozhraním (UI) a uživatelským zážitkem (UX) v jejich preferovaném jazyce. Vyzkoušejte Weglot zdarma s naší 14denní zkušební verzí bez závazků, nebo si prohlédněte prohlídku produktu bez nutnosti registrace!