9 porad, jak zaprojektować wielojęzyczną stronę internetową

W coraz bardziej połączonym świecie wielojęzyczne strony internetowe stają się coraz powszechniejsze. Ale ich projektowanie? To trochę bardziej skomplikowane, niż mogłoby się wydawać, zwłaszcza gdy weźmiesz pod uwagę zmiany w projekcie strony, które będziesz musiał wprowadzić.

Podstawy są proste — z Weglot możesz dodać różne języki do swojej strony w mniej niż 5 minut. Ale potem musisz pomyśleć o tym, gdzie umieścisz swój przełącznik języków, jak dostosować zmiany w układzie, gdy użytkownik przełącza się z angielskiego na język RTL (pisany od prawej do lewej), oraz o użyciu odpowiednich kulturowo kolorów, obrazów i ikon.

W tym przewodniku przyjrzymy się kilku najważniejszym kwestiom projektowym, aby pomóc Ci zaplanować wielojęzyczną stronę internetową zgodną z dobrymi praktykami.

1. Używaj globalnych szablonów dla spójności marki

Gdy ktoś trafi na Twoją wielojęzyczną stronę, chcesz, aby miał spójne doświadczenie użytkownika, niezależnie od tego, na którą wersję językową trafi. Oznacza to, że indyjscy odwiedzający, którzy odwiedzą Twoją angielską stronę, powinni widzieć ten sam branding i projekt, co w wersji hindi.

Nie możesz powstrzymać dwujęzycznych lub wielojęzycznych odwiedzających przed oglądaniem różnych wersji Twojej wielojęzycznej strony, ale możesz upewnić się, że widzą ten sam branding, układ i elementy projektu strony, gdy przełączają się z domyślnego języka.

Jeśli używasz systemu zarządzania treścią, takiego jak WordPress, z Weglot, stworzenie spójnej wielojęzycznej strony internetowej jest proste. Weglot bezproblemowo zintegruje się z motywem Twojego kreatora stron i automatycznie przetłumaczy Twoje treści. Zintegruje się również ze wszystkimi innymi ważnymi częściami funkcjonalności Twojej strony, takimi jak wtyczki e-commerce – co oznacza, że nie ma powodu, aby mieć różne motywy czy projekty dla różnych języków, które dodajesz do swojej wielojęzycznej strony.

Na przykład, gdy odwiedzasz stronę główną Airbnb z kraju takiego jak Australia…

… a następnie przełączysz się na japoński, projekt i branding są spójne w obu językach.

Łatwo rozpoznawalny projekt nie tylko pomaga wzmocnić markę, ale także ułatwia przyszłe aktualizacje wielojęzycznej strony internetowej i zmniejsza problemy związane z koniecznością wprowadzania zmian w interfejsie użytkownika lub doświadczeniu użytkownika w przypadku różnych języków.

2. Spraw, aby przełącznik języków był naprawdę łatwy do znalezienia.

Umieść swój rozwijany przełącznik języków w widocznym miejscu na swojej stronie głównej i na każdej innej stronie Twojej witryny. Zauważysz, że wielojęzyczne strony internetowe mają przełącznik języków w nagłówku lub stopce strony.

Niezależnie od tego, jaką opcję wybierzesz dla swojej wielojęzycznej strony, upewnij się, że jest naprawdę łatwa do znalezienia.

Będziesz też chciał upewnić się, że opcje przełączania języków są krystalicznie jasne. Najlepiej jest używać nazwy języka w jego oryginalnej formie. Na przykład, użyj „Deutsch” zamiast „German” i „日本語” zamiast „Japanese”.

Asana, na przykład, używa rozwijanego menu z nazwami dostępnych języków:

Chcesz, aby odwiedzający Twoją wielojęzyczną stronę internetową czuli się mile widziani, niezależnie od tego, jakim językiem mówią. Umieszczenie przełącznika języków w łatwo dostępnym miejscu pomoże to osiągnąć.

3. Pozwól odwiedzającym wybrać swój preferowany język

Wydawać by się mogło, że pozwolenie użytkownikom na wybór preferowanego języka to oczywistość, ale wiele stron wielojęzycznych tak naprawdę bardzo utrudnia wybór języka. Zamiast tego, zmuszają użytkowników do zmiany regionu.

Duże marki są tu najgorszymi przykładami. Często zobaczysz, że wiele z nich zmusza Cię do zmiany regionu na ich wielojęzycznej stronie (czyli przełączenia z www.adobe.com na www.adobe.com/us/), kiedy Ty chcesz tylko zmienić domyślny język.

To, że ktoś mówi po hindi, nie oznacza, że chce przełączać się na dany region na wielojęzycznej stronie firmy. Co jeśli mieszka w Nowym Jorku i chce kupić coś z amerykańskiej strony, ale chce czytać stronę po hindi? Nie stawiaj im bariery w kupowaniu na Twojej wielojęzycznej stronie — pomóż im uzyskać dostęp do Twoich treści w ich preferowanym języku.

Oto przykład firmy, która faktycznie pozwala odwiedzającym wybrać preferowany język — Uber wyświetla opcje zmiany języka w stopce:

Kiedy klikniesz „English”, pojawi się okienko, pozwalające wybrać preferowany język spośród angielskiego i francuskiego:

Co jest świetne w projekcie zmiany języka Ubera, to to, że pozwala odwiedzającym wybrać preferowany język bez zmuszania ich do zmiany regionu.

Jeśli chcesz jeszcze bardziej poprawić doświadczenie użytkownika dla swoich odwiedzających, rozważ „zapamiętywanie” ich domyślnego języka, aby następnym razem, gdy odwiedzą Twoją wielojęzyczną stronę, załadowała się ona automatycznie w ich ojczystym języku.

Automatyczne wykrywanie języków

Wiele wielojęzycznych stron internetowych wykrywa ojczysty język przeglądarki internetowej, aby automatycznie ustawić główny język dla użytkowników.

Chociaż to oszczędza użytkownikom trochę czasu, serwowanie automatycznych tłumaczeń za pomocą wykrywania języka nie jest nauką ścisłą. Ważne jest, aby pamiętać o użytkownikach, którzy mogą trafić na „niewłaściwą” wersję Twojej wielojęzycznej strony.

Odwiedzający może fizycznie znajdować się w Hiszpanii, a Twoja wielojęzyczna strona automatycznie to wykryje i wyświetli hiszpański, ale może być on native speakerem angielskiego, który nie potrafi czytać po hiszpańsku.

Więc jeśli zamierzasz automatycznie wykrywać lokalizacje, zapewnij również przełącznik języków, aby odwiedzający mieli możliwość wyboru różnych języków.

Weglot oferuje opcję automatycznego przekierowywania odwiedzających zgodnie z językiem ich przeglądarki. Zobacz Weglot w akcji na swojej stronie dzięki 14-dniowemu darmowemu okresowi próbnemu.

Flagi kontra nazwy języków

Flagi są często używane do wskazywania języka, ale są pewne kwestie kontekstowe, o których warto pamiętać:

• Flagi reprezentują kraje, a nie języki.
• Kraj może mieć więcej niż jeden język urzędowy.
• Język może być używany w więcej niż jednym kraju.
• Odwiedzający mogą nie rozpoznać flagi (z powodu rozmiaru ikony) lub mogą być zdezorientowani podobnymi flagami.

Ostatecznie, chcesz zapewnić opcje zmiany języka, które są łatwe do zrozumienia w każdym języku.

4. Uwzględnij rozszerzenie tekstu

Kiedy tekst jest tłumaczony z jednego języka na inny, tak jak w Google Translate, długość oryginalnego tekstu i wynikowego tłumaczenia będzie inna. Może to być wyzwaniem, jeśli chodzi o układ Twojego projektu.

Niektóre języki pisane są bardziej zwięzłe niż inne. Języki takie jak japoński i chiński używają jednego lub dwóch znaków do przekazania informacji, podczas gdy w innych językach potrzebowałbyś kilku słów.

Języki takie jak hiszpański i angielski są rozwlekłe, czasem potrzebując nawet o 30% więcej miejsca niż inne języki.

Przewodnik W3C dotyczący rozmiaru tekstu w tłumaczeniu, który gorąco polecamy przeczytać w całości, zawiera świetne porady.

W3C podkreśla, dlaczego tak ważne jest, aby narzędzia do tłumaczenia maszynowego miały adaptacyjne elementy interfejsu użytkownika, takie jak przyciski, pola wprowadzania i tekst opisowy.

Na przykład, kiedy Flickr był tłumaczony na różne języki, projektanci musieli wziąć pod uwagę tekst pod zdjęciami, który wskazuje liczbę wyświetleń.

Poniższa tabela pokazuje porównawcze długości słowa „view” w różnych językach w stosunku do oryginalnego angielskiego:

To aż 300% rozszerzenia z angielskiego na włoski!

Warto pamiętać, że tekst zazwyczaj rozszerza się lub kurczy na szerokość, więc upewnij się, że Twoja wielojęzyczna strona internetowa to uwzględnia. Pamiętaj też, że im krótszy tekst źródłowy, tym dłuższe prawdopodobnie będzie tłumaczenie. Jeśli zauważysz, że brakuje miejsca, spróbuj innego, mniej dosłownego tłumaczenia albo zmień rozmiar czcionki w zależności od nowego języka.

Wysokość znaków i wierszy to kolejna rzecz, którą trzeba wziąć pod uwagę. Często zdarza się, że teksty nielacińskie mają znacznie wyższe znaki niż teksty łacińskie. Pisma takie jak arabskie będą też potrzebować więcej pionowej przestrzeni między wierszami w porównaniu do języków łacińskich.

5. Pamiętaj o kompatybilności czcionek internetowych i kodowaniu

W3C zaleca, aby zawsze określać kodowanie swoich stron internetowych. Rekomenduje używanie UTF-8, aby mieć pewność, że znaki specjalne wyświetlają się poprawnie, niezależnie od języka.

Oto jak zadeklarować UTF w nagłówku swoich stron:

Wszystkie czcionki internetowe, których używasz, muszą być kompatybilne ze wszystkimi językami innymi niż angielski, które obsługuje Twoja wielojęzyczna strona WordPress, szczególnie w przypadku języków nielacińskich. Oznacza to, że używane czcionki muszą zawierać wszystkie potrzebne znaki i glify.

Niektóre czcionki mogą obsługiwać pisma łacińskie, ale nie RTL (od prawej do lewej) ani cyrylicę, więc sprawdź, czy potrzebne Ci języki inne niż angielski są obsługiwane, zanim zdecydujesz się na użycie jakichkolwiek czcionek.

Google Fonts, na przykład, pozwala wybrać języki przed pobraniem pakietu czcionek:

Jeden język może składać się z setek znaków, co może sprawić, że pliki czcionek będą ogromne — to kolejna rzecz, o której warto pamiętać, wybierając czcionki dla swojej wielojęzycznej strony internetowej.

6. Projektowanie dla języków pisanych od prawej do lewej

Projektowanie stron dla języków pisanych od prawej do lewej może stwarzać wyzwania. Jak Robert Dodis, deweloper SteelKiwi, pisze dla Smashing Magazine, projektowanie dla RTL oznacza „odwrócenie interfejsu”.

Na przykład, tak wygląda projekt Facebooka od lewej do prawej:

A tak wygląda projekt Facebooka od prawej do lewej w języku arabskim:

Zauważ, jak nawet pasek przewijania zmienia położenie!

Odbicie lustrzane projektu to coś, co musisz wziąć pod uwagę, jeśli projektujesz zarówno dla języków LTR (od lewej do prawej), jak i RTL (od prawej do lewej).

Gorąco polecamy przeczytać artykuł Roberta w Smashing Magazine, aby szczegółowo dowiedzieć się, jak projektować dla języków RTL. Nie chcemy tutaj wymyślać koła na nowo, więc idź i przeczytaj jego samouczek. Chcemy pokazać Ci, jak Weglot wspiera języki RTL i może ułatwić proces tłumaczenia dla Twojej wielojęzycznej strony internetowej.

Usługa tłumaczenia Weglot wspiera języki RTL, a dzięki regułom CSS możesz dostosować układ swojej wielojęzycznej strony, aby je uwzględnić. Oto niektóre z dostępnych języków RTL:

• Arabski (ar)
• Hebrajski (he)
• Perski (fa)
• Urdu (ur)

Po dodaniu języka RTL do swojej wielojęzycznej strony za pomocą Weglot, możesz dostosować jego wyświetlanie, stosując reguły CSS do swojego układu. W panelu administracyjnym WordPressa przejdź do Weglot > Wygląd przycisku języka (Opcjonalnie) i przewiń w dół do Zastąp CSS. Dodaj dowolne reguły CSS w polu tekstowym — możesz chcieć zmienić czcionkę, rozmiar, wysokość linii i inne, aby dostosować styl języka podstawowego do swojego projektu.

To wszystko, co musisz zrobić, aby dodać i ostylować języki RTL za pomocą Weglot! Więcej o tym, jak Weglot wspiera języki RTL, możesz przeczytać w dokumentacji.

7. Używaj obrazów i ikon, które są odpowiednie kulturowo

Obrazy, ikony i inne grafiki to kluczowe elementy każdej strony internetowej. Jednak wizualizacje są z natury subiektywne i mogą być różnie interpretowane w innym kontekście kulturowym.

Na przykład, francuska wersja strony głównej Clarins przedstawia kobietę rasy kaukaskiej:

Ale kiedy odwiedzasz japońską stronę główną firmy, znajdziesz na niej zdjęcie Japonki:

Obrazy też mogą kogoś urazić. Coś, co dla ludzi z Zachodu wydaje się niewinne, w innym kraju może być tematem tabu. Na przykład, zdjęcia przedstawiające pary jednopłciowe czy równość płci nie byłyby akceptowane w krajach, gdzie homoseksualizm jest nadal nielegalny, a prawa kobiet nie są w pełni uznane.

Musisz też pomyśleć o drobnych elementach, takich jak ikony, i o tym, co oznaczają dla ludzi z różnych miejsc, którzy odwiedzają Twoją wielojęzyczną stronę. Na przykład, ikona globu dla anglojęzycznych użytkowników z Australii będzie wyglądać zupełnie inaczej niż dla użytkowników w Afryce:

Trzecia ikona powyżej przedstawia glob, ale nie pokazuje konkretnego kraju ani regionu, co sprawia, że jest bardziej odpowiednia do użycia na wielojęzycznej stronie.

Musisz przejrzeć obrazy i inne elementy graficzne, biorąc pod uwagę wszelkie regionalne i kulturowe różnice.

Unikaj używania obrazów i innych grafik z wbudowanym tekstem. Nie będziesz w stanie przetłumaczyć wbudowanego tekstu za pomocą narzędzi takich jak Weglot, więc po prostu całkowicie tego unikaj.

8. Używaj kolorów odpowiednich kulturowo

Sposób, w jaki różne kultury postrzegają i interpretują kolory, bardzo różni się na całym świecie.

Na przykład, w kulturze zachodniej czerwień symbolizuje miłość, energię, pasję i niebezpieczeństwo. W kulturach azjatyckich to bardzo ważny kolor, symbolizujący szczęście, dobrobyt, świętowanie i długie życie. Z kolei w niektórych krajach afrykańskich czerwień kojarzy się ze śmiercią i agresją.

Niebieski jest uważany za najbezpieczniejszy i najbardziej globalnie akceptowany kolor w projektowaniu, ponieważ ma wiele pozytywnych skojarzeń. To uspokajający kolor, który jest postrzegany jako kojący i spokojny, mimo że kojarzy się też ze smutkiem i depresją. Niebieski jest również najpopularniejszym kolorem w logo banków, ponieważ symbolizuje zaufanie i autorytet.

Kiedy wybierasz kolory do projektu swojej wielojęzycznej strony internetowej, koniecznie sprawdź w Google, co symbolizują kolory, których chcesz użyć.

9. Daty i inne formaty

Nie każdy kraj używa tego samego formatu daty, nawet w obrębie języka angielskiego. Na przykład, w Wielkiej Brytanii i Europie często spotyka się format dzień-miesiąc-rok, podczas gdy w USA to miesiąc-dzień-rok.

Możesz też potrzebować przetłumaczyć jednostki miary, co pomaga w SEO, w zależności od Twojej grupy docelowej. Chociaż 90% świata używa systemu metrycznego, USA, Liberia i Mjanma nadal stosują imperialny system miar i wag.

Jak wybrać odpowiednią wtyczkę do tłumaczenia WordPressa dla Twojego projektu

Wtyczki do tłumaczenia WordPressa są różne, a sposób, w jaki współpracują z Twoim konkretnym projektem, bardzo się różni. Jednym rozwiązaniem, które gwarantuje bezproblemową integrację z Twoją wielojęzyczną stroną, jest Weglot.

Możesz nawet użyć Visual Editora Weglot do tłumaczenia swoich treści na front-endzie Twojej strony i na wszystkich subdomenach, abyś mógł zobaczyć, jak wygląda w kontekście projektu i układu Twojej strony, podobnie jak w Google Translate.

Z Weglot, projekt i lokalizacja Twojego przełącznika języków są w 100% konfigurowalne. Domyślny przycisk został zaprojektowany tak, aby pasował do każdej strony, ale możesz go również stylizować za pomocą własnego CSS, aby użyć dowolnego formatu, jaki Ci się podoba.

Co więcej, Weglot wspiera zasady projektowania przedstawione w tym wpisie, w tym:

• Używanie globalnego szablonu dla spójnego brandingu
• Zapewnienie łatwo dostępnych opcji zmiany języka
• Umożliwienie odwiedzającym wyboru preferowanego języka
• Automatyczne kodowanie UTF
• Obsługa języków RTL (pisanych od prawej do lewej)

Przyjrzyjmy się najważniejszej funkcji związanej z wyglądem, którą oferuje Weglot: dostosowywaniu przełącznika języków.

Dostosowywanie opcji przełączania języków na Twojej stronie z Weglot

Po zainstalowaniu wtyczki Weglot na swojej wielojęzycznej stronie WordPress i jej konfiguracji, zostaniesz poproszony o wprowadzenie klucza API, języka domyślnego oraz języka, na który chcesz przetłumaczyć swoje treści, podobnie jak w Google Translate.

Jeśli nie masz jeszcze konta Weglot, musisz je założyć, żeby dostać swój klucz API.

Gdy zapiszesz zmiany, odśwież front-end swojej nowej wielojęzycznej strony internetowej, a zobaczysz nowy przełącznik języków w prawym dolnym rogu. Gdy na niego klikniesz, rozwinie się, aby wyświetlić dostępne języki, umożliwiając wyświetlenie preferowanego tłumaczenia.

Żeby zacząć wprowadzać podstawowe zmiany, przejdź do Weglot > Wygląd przycisku języka (Opcjonalnie). Na tym ekranie możesz wybrać:

• Czy używać rozwijanej listy
• Czy używać flag
• Rodzaje flag
• Aby wyświetlić nazwy języków
• Aby wyświetlić tylko kody języków

Sekcja Override CSS to miejsce, gdzie możesz zastosować reguły CSS, aby stylizować wygląd Twojego przełącznika języków na Twojej wielojęzycznej stronie internetowej. Na przykład, możesz:

• Usuń strzałkę z przycisku
• Zmień kolor tła
• Dodaj pasek przewijania
• Usuń obramowanie
• Dodaj odstęp wewnętrzny

Weglot pokazuje kilka przykładów w tym artykule na temat dostosowywania wyglądu przycisku języka.

Kiedy przewiniesz ekran konfiguracji Weglot w dół, znajdziesz instrukcje, jak umieścić przełącznik języków:

• W menu. Przejdź do Wygląd -> Menu i przeciągnij oraz upuść niestandardowy link Weglot Translate tam, gdzie chcesz.
• Jako widżet. Przejdź do Wygląd -> Widżety i przeciągnij oraz upuść widżet Weglot Translate tam, gdzie chcesz.
• Za pomocą shortcode'u. Użyj shortcode'u Weglot [ weglot_switcher ] (bez spacji), aby umieścić przełącznik języków tam, gdzie chcesz.
• W kodzie źródłowym. Możesz dodać poniższy kod w dowolnym miejscu w kodzie źródłowym swojej strony HTML:

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

Aby pokazać Ci, jak można dostosować przełącznik języków na wielojęzycznej stronie internetowej (czy to WordPress, Shopify, czy jakakolwiek inna strona), poniżej możesz zobaczyć, jak Patyka wyświetla przełącznik języków w lewym górnym rogu strony.

Języki są wyświetlane za pomocą swoich nazw, a gdy klikniesz przełącznik i wybierzesz język, zawartość strony zaktualizuje się, tłumacząc ją na wybrany przez Ciebie język.

Studium przypadku: Maestrooo korzysta z Weglot.

Założona w 2013 roku agencja Maestrooo z Francji specjalizuje się w tworzeniu stron internetowych, a wśród jej klientów są From Future i Patyka. Obecnie Maestrooo obsługuje większość klientów Shopify Plus we Francji.

Maestrooo szukało solidnego i niezawodnego rozwiązania dla wielojęzycznej strony internetowej, które łatwo dostosowałoby się do wymagań ich klientów. Po przetestowaniu wielu rozwiązań i odkryciu, że miały one problemy z SEO lub zarządzaniem hreflang, zespół odkrył Weglot.

Weglot tłumaczy całą zawartość stron klientów Maestrooo, niezależnie od tego, czy jest to dynamiczna treść, treść generowana przez inne aplikacje, czy nawet proces płatności, bez wpływu na układ ich wielojęzycznej strony internetowej.

Oprócz projektowania niestandardowych stron internetowych dla klientów, Maestrooo rozwija również oficjalne motywy dla sklepu z motywami Shopify. Podczas gdy inne rozwiązania dla wielojęzycznych stron internetowych często psują formatowanie motywów Maestrooo, Weglot zapewnia rozwiązanie do tłumaczenia, które działa za każdym razem.

Maestrooo pomaga od 8 000 do 12 000 klientów rozpocząć pracę z Shopify każdego roku, korzystając z Weglot dla swojej wielojęzycznej strony internetowej.

Postaw na pełne dostosowanie do kultury dzięki lokalnemu projektowi

Każda z zasad projektowania, które omówiliśmy w tym wpisie, pomoże Ci stworzyć wielojęzyczną stronę internetową, która świetnie wygląda i zapewnia przyjemne wrażenia użytkownikom.

Aby zapewnić odwiedzającym Twoją stronę i klientom wspaniałe doświadczenia w ich ojczystym języku, warto też pomyśleć szerzej niż tylko o wielojęzycznej stronie. Rozważ przetłumaczenie materiałów marketingowych i obsługi klienta.

Pomyśl też o szybkości i wydajności swojej wielojęzycznej strony. W niektórych krajach, gdzie nie ma szczęścia do szybkiego internetu, pobieranie dużych pakietów językowych może utrudniać odwiedzającym dostęp do Twoich treści.

Z odpowiednią wtyczką do tłumaczenia wielojęzycznej strony internetowej i projektem strony, który zapewnia łatwe w użyciu opcje tłumaczenia, pomożesz klientom, oferując im atrakcyjny wizualnie interfejs użytkownika (UI) i doświadczenie użytkownika (UX) w ich preferowanym języku. Wypróbuj Weglot za darmo z naszą 14-dniową bezpłatną wersją próbną bez zobowiązań, lub wybierz się na wycieczkę po produkcie bez rejestracji!