Zapoznaj się z najlepszymi praktykami: Wielojęzyczny projekt strony Squarespace

Niedawno zaprezentowaliśmy kilka godnych podziwu przykładów wielojęzycznych stron Squarespace. Co skłoniło nas do wybrania tych konkretnych stron? Co je wyróżnia?

Nie owijajmy w bawełnę: te strony są ładne.

Mówiliśmy to już wcześniej i powtórzymy to jeszcze raz: szablony Squarespace są atrakcyjne pod względem estetycznym. Główna strona internetowa Squarespace zdobyła nagrodę Webby (która jest w zasadzie jednym z najwyższych możliwych osiągnięć dla firmy internetowej) w 2017 roku i od tego czasu tylko wzmocniła swój branding.

I ma to sens, że skoro główna witryna Squarespace jest sama w sobie tak elegancka, opcje tworzenia witryn dla użytkowników platformy są równie eleganckie. W skrócie, Squarespace przestrzega własnych zasad.

Jako właściciel witryny Squarespace możesz być zainteresowany przeniesieniem swojej witryny na cały świat - aw 2019 roku i później jest to całkiem pewny zakład, niezależnie od tego, czy uruchamiasz witrynę osobistą, sklep e-commerce(70% sprzedawców e-commerce potwierdza, że sprzedaż za granicą była dla nich opłacalna ), czy witrynę dla Twojej firmy.

Gdy już zdecydujesz się na międzynarodową działalność, jednym z pierwszych elementów zawartości witryny, które będziesz musiał wziąć pod uwagę, jest jej język.

Squarespace sprawia, że tworzenie witryny we własnym języku jest niezwykle proste. Instalujesz wybrany przez siebie (bardzo zgrabny, bardzo pozorny) szablon, a następnie możesz bawić się mnóstwem parametrów projektowych - od czcionek, przez kolory, po odstępy i opcje siatki - które są intuicyjnie dostępne za pośrednictwem pulpitu nawigacyjnego.

Squarespace wielojęzyczny

Jedną z upraszczających funkcji, której brakuje Squarespace, jest natywne rozwiązanie do tworzenia Squarespace wielojęzycznej strony.

Zapewniają instrukcje, jak ręcznie duplikować strony i tłumaczyć je samodzielnie, i chociaż to rozwiązanie może działać, jeśli masz mniejszą witrynę, taką jak portfolio, nie będzie działać w przypadku większej witryny. Nie jest to również opłacalne rozwiązanie dla wielojęzycznego SEO, ponieważ zduplikowane strony nie są faworyzowane przez wyszukiwarki.

Dowiedz się więcej o najlepszych praktykach wielojęzycznego SEO tutaj:

Korzystanie ze zintegrowanego rozwiązania, takiego jak Weglotdo stworzenia wielojęzycznej strony Squarespace jest znacznie szybszym i energooszczędnym rozwiązaniem.

Wielojęzyczny projekt Squarespace

Jednak po przetłumaczeniu witryny prawdopodobnie zauważysz kilka różnic między sposobem, w jaki przetłumaczone wersje są wyświetlane na ekranie, a sposobem, w jaki wygląda oryginalna wersja.

Można się tego spodziewać; różne języki po prostu wyglądają inaczej. Angielskie słowo "shell", składające się z zaledwie pięciu liter, po francusku tłumaczy się jako "coquillage" - dosłownie podwajając liczbę liter.

W większości okrojonych środowisk projektowania stron internetowych (na przykład, jeśli budujesz witrynę od zera), tłumaczenie strony może zepsuć wyrównanie akapitów i sposób, w jaki bloki tekstu współdziałają ze sobą. KompatybilnośćWeglotze wszystkimi szablonami Squarespace generalnie zapobiega temu problemowi; szablony Squarespace są projektowane przez profesjonalistów, aby były wysoce adaptowalne.

Nie oznacza to jednak, że nie ma kilku głównych zasad, których należy przestrzegać , aby a) wybrać odpowiedni szablon dla swojej wielojęzycznej witryny Squarespace i b) dostosować go.

Oprowadzimy Cię po interfejsie projektowym Squarespace, mając na uwadze wielojęzyczność.

1. Czas na wielojęzyczny szablon Squarespace.

Jak być może już odkryłeś, jeśli w ogóle zapuściłeś się w świat Squarespace, twoje parametry projektowe są zaokrąglone w szablonach; szablony Squarespace są notorycznie minimalistyczne, bogate w obrazy i dobrze wyważone zarówno dla ekranów mobilnych, jak i stacjonarnych.

Oto niektóre z szablonów używanych obecnie przez klientów Weglot , które są wypróbowane i prawdziwe, jeśli chodzi o wielojęzyczność witryny Squarespace:

Forte: czyste linie i kontrast

Forte jest czymś, co można nazwać cyfrową manifestacją koncepcji White Cube: wygląda i działa jak galeria sztuki współczesnej. Pozwala nawet na umieszczenie wielu obrazów w automatycznym pokazie slajdów w tle na stronie głównej.

Dzięki wstępnemu ustawieniu, które przełącza logo z czerni na biel (i z powrotem) w zależności od jasności wyświetlanego obrazu tła, Forte można dostosować wizualnie na wiele sposobów.

Rzuć okiem na portfolio online praskiego architekta Stepana Havlika, zaprojektowane przy użyciu Forte; jego angielska i czeska strona są równie przejrzyste i bogate w informacje.

Wpływ: nazwa mówi wszystko

Cechą charakterystyczną Impact jest prawdopodobnie sam rozmiar głównej przestrzeni tytułowej. Nazwa firmy lub słowo kluczowe nr 1 jest prawdziwą gwiazdą na stronie głównej Impact.

Sprawdź, jak adwokat Valentina Mayer z Rzymu i Berlina wzmocniła swoją markę osobistą, zachowując jednocześnie pięknie przetłumaczony interfejs zarówno dla swoich włoskojęzycznych, jak i anglojęzycznych klientów:

Solanka: moc dla paralaksy

Dodanie odrobiny ruchu do strony (zwłaszcza gdy nie trzeba go programować samodzielnie) to łatwy sposób na przyciągnięcie uwagi czytelnika. Właśnie to odróżnia rodzinę szablonów Brine od ich minimalistycznych odpowiedników na Squarespace; w Brine pełnoekranowe banery przewijają się nieco wolniej niż reszta zawartości strony.

W świecie projektowania stron internetowych powszechnie wiadomo, że jest to jeden z najłatwiejszych sposobów na nadanie witrynie trójwymiarowości i jeszcze większe zanurzenie użytkownika w jej świecie.

Co jeszcze jest wspaniałego w Brine? Jest gotowy do pracy w wielu językach.

(W rzeczywistości jedna z wielojęzycznych witryn Squarespace została stworzona przy użyciu Nueva, szablonu z rodziny Brine - porozmawiamy o tym nieco później, ale możesz rzucić okiem tutaj).

Francuska projektantka graficzna Emmanuelle Ciamous wybrała Brine, aby tchnąć trochę życia w swoje delikatne rysunki na swojej osobistej stronie galerii, a efekt jest zapierający dech w piersiach.

2. Używaj bloków tekstowych na wierzchu obrazów, a nie obrazów zawierających tekst.

Jeśli jesteś zapalonym użytkownikiem Photoshopa, Illustratora lub Canvy, możesz mieć słabość do tworzenia obrazów tła lub innych grafik zawierających tekst. Jest to coś, co wielu projektantów lubi robić, gdy chcą na przykład użyć niestandardowych czcionek , które mogą nie być dostępne w kreatorach witryn.

Nie jest to jednak najlepszy pomysł, jeśli planujesz uczynić zawartość swojej witryny Squarespace wielojęzyczną.

Podczas gdy aplikacje takie jak Weglot mogą tłumaczyć metadane wokół obrazów - takie jak ich nazwy, podpisy i słowa kluczowe, które je opisują i pozwalają im pojawiać się w wyszukiwarkach takich jak Google Images -tekst w statycznym obrazie (zwykle w formacie JPEG, PNG lub GIF) nie może zostać przetłumaczony.

(Warto również zauważyć, że pulpit nawigacyjny Weglot umożliwia przesyłanie różnych obrazów dla każdego z języków; więc jeśli chcesz ponownie utworzyć obraz ze statycznym tekstem dla każdego języka, będziesz mieć miejsce, aby połączyć każdy z nich z odpowiednim językiem).

Ale jeśli mamy być szczerzy, photoshopowanie tekstu obrazu na wiele języków - zwłaszcza jeśli masz ich kilka - możeszybko stać się długim i żmudnym procesem.

Zamiast wstępnie projektować własny baner Squarespace z tekstem, jak ten...

...prześlij obraz samodzielnie:

...użyj edytora obrazów Squarespace, aby nadać mu pożądane efekty (rozmycie, zmiany jasności, mają całą gamę):

...dodać obraz jako baner (tak jak pokazano na poniższym zrzucie ekranu) lub jako obraz tła bloku, a następnie dodać blok tekstu bezpośrednio na nim.

Zapewni to wykrywalność tekstu i sprawi, że żadna litera nie zostanie pominięta podczas tworzenia wielojęzycznej witryny.

Wskazówka dotycząca obrazów: Chociaż nie zawsze tak jest, jeśli jesteś przyzwyczajony do projektowania stron internetowych od podstaw (gdzie najlepsze praktyki zwykle określają, że obrazy powinny być "zoptymalizowane pod kątem ekranu" w ich rozmiarze - więc niekoniecznie super wysokiej rozdzielczości), w Squarespace większy jest lepszy, jeśli chodzi o obrazy.

Większość szablonów Squarespace koncentruje się wokół dużego banera (np. Brine, Bedford lub Hyde), który czasami zajmuje całą stronę w stylu obrazu tła (bardziej w stylu Keene, Polaris lub Marta).

Warto również upewnić się, że to, co wybierzesz jako główny baner, wygląda dobrze na wszystkich urządzeniach -możesz wyświetlić podgląd stron na tablety i urządzenia mobilne, klikając strzałkę w dół u góry strony i przełączając się na inny format widoku w tym menu:

3. Dostosuj typografię.

Typografia jest najwyraźniej jednym z głównych czynników branych pod uwagę przez projektantów stron internetowych w każdym kontekście językowym - jeśli ktoś będzie czytał twoją witrynę, będziesz chciał, aby doświadczenie to było dla niego jak najprzyjemniejsze.

Jeśli chodzi o decyzje dotyczące wielojęzycznej typografii, zwykle nie musisz się zbytnio martwić, chyba że tłumaczysz swoją witrynę Squarespace na języki używające różnych alfabetów / skryptów. W takim przypadku warto zwrócić większą uwagę na tę część.

Squarespace jest bardzo uproszczony, a większość szablonów Squarespace wygląda najlepiej, gdy nie zmienia się zbytnio czcionek. Większość projektantów powie ci, że istnieje coś takiego jak zbyt wiele czcionek (#9 na tej liście najlepszych praktyk typograficznych z Canva wyjaśnia dlaczego).

To dobra wiadomość dla projektantów wielojęzycznych witryn Squarespace. Chociaż teoretycznie można przypisać inną czcionkę dla każdego języka, jeśli zajdzie taka potrzeba przy użyciu niestandardowego CSS, o wiele łatwiej jest zachować prostotę i używać czcionek, które będą renderowane uniwersalnie we wszystkich językach. Pozwoli to również zachować spójność marki między językami, co może być naprawdę ważne, jeśli próbujesz odwołać się do globalnej publiczności.

Możesz zacząć od sprawdzenia czcionek dostępnych w Google Fonts i / lub Adobe Fonts (pierwsza z nich jest bezpłatna dla Adobe, jednak zazwyczaj musisz mieć konto, aby pobrać dowolną czcionkę do użytku osobistego).

Chociaż te bazy czcionek zawierają znacznie więcej stylów niż jest faktycznie dostępnych w Squarespace, jest to najlepszy sposób, aby dowiedzieć się, które rodziny czcionek obsługują wiele alfabetów - nie ma sposobu, aby to zrobić w Squarespace.

Na przykład w Google Fonts można sprawdzić, które czcionki obsługują określone skrypty, wybierając żądany skrypt w menu "język".

(Nazwa tego menu jest nieco myląca; można zauważyć, że opcje nie są nazwami języków). językówale raczej języków skryptów w których języki mogą być zapisywane online. Istnieje kilka języków, które dzielą nazwę swojego skryptu - na przykład język arabski używa tego, co jest konwencjonalnie nazywane skryptem arabskim - ale wiele z nich nie; angielski, francuski, niemiecki i wiele innych języków używa skryptu łacińskiego, chociaż niekoniecznie wszystkie wywodzą się z łaciny).

Po znalezieniu czcionki, która obsługuje oba (lub wszystkie) potrzebne skrypty, sprawdź dokładnie, czy jest ona dostępna w Squarespace - pełną listę czcionek Squarespace można znaleźć tutaj.

4. Dostosuj przycisk przełączania języka Squarespace.

Zdecyduj, czy chcesz używać ikon flag, czy nie.

Czasami może to być trudna decyzja. Z tradycyjnej perspektywy projektowania, powiązanie flagi z językiem w menu wyboru języka brzmi bardzo intuicyjnie: jest to wizualny punkt orientacyjny, sposób na rozpoznanie własnego języka, nawet jeśli użytkownik jest całkowicie zagubiony w oryginalnym języku strony głównej.

Należy jednak pamiętać, że flagi technicznie reprezentują kraje, a nie języki. Nie tylko większość języków jest używana w więcej niż jednym kraju, ale wiele krajów ma więcej niż jeden język urzędowy.

Na przykład posiadanie flagi Indii reprezentującej hindi nie ma praktycznego sensu: mimo że hindi jest technicznie najczęściej używanym językiem w Indiach, jest to tylko jeden z 16 języków urzędowych tego kraju! Próba odwołania się do indyjskiej publiczności w tym przypadku zasługiwałaby nie tylko na przetłumaczenie witryny Squarespace na więcej niż jeden z tych języków regionalnych, ale także na unikanie symbolicznego preferowania któregokolwiek z nich.

Umieść ją w głównym menu nawigacyjnym.

Nawet jeśli standardowy przycisk przełączania języka Weglot jest dość neutralny, możesz chcieć, aby branding całej witryny był jak najbardziej spójny - a najlepszym sposobem na zapewnienie, że przycisk języka jest częścią tej strategii, jest umieszczenie go w głównym menu nawigacyjnym.

Zapewni to, że będzie on zawsze widoczny na każdej stronie witryny w tej samej pozycji, a ponadto będzie wyglądał jak inne przyciski nawigacyjne pod względem koloru i stylu czcionki.

Możesz to zrobić, przechodząc do sekcji "Strony" w edytorze witryny Squarespace. W sekcji "Główna nawigacja" zobaczysz przycisk "+", który umożliwia dodanie przycisku do głównego paska nawigacji; kliknij go, a zobaczysz małe okienko, jak na poniższym zrzucie ekranu:

Możesz zatytułować link jako nazwę języka, do którego będzie prowadził, a w polu treści "Link" wpisać "Weglot", a następnie dwuliterowy kod języka dla danego języka.

Powrót do podstaw: Cztery główne wnioski dla wielojęzycznego sukcesu Squarespace

Teraz, gdy omówiliśmy niektóre z wielojęzycznych funkcji Squarespace i przejrzeliśmy kilka przykładów, podsumujmy, o czym należy pamiętać, wprowadzając witrynę Squarespace do sfery wielojęzycznej:

• Mądrze wybierz szablon. Jest to zasadniczo najbardziej fundamentalna decyzja, jaką podejmuje każdy użytkownik Squarespace: wybór szablonu definiuje resztę przepływu pracy. Upewnij się, że wybierzesz taki, który będzie wyglądał równie dobrze w tłumaczeniu.

• Oddziel tekst od obrazów. Unikaj przesyłania obrazów z tekstem, jeśli chcesz, aby użytkownicy mogli go odczytać; zamiast tego przesyłaj obrazy bez tekstu jako banery lub elementy multimedialne i korzystaj z wielu opcji bloków tekstowych Squarespace, aby pisać nad nimi lub wokół nich.

• Czcionka jest kluczowa. Używaj czcionek, które są dostępne w Squarespace we wszystkich potrzebnych skryptach - zapewni to spójny branding w całej witrynie dla wszystkich odwiedzających.

• Ulepsz swój przycisk. Dostosowany przycisk zmiany języka będzie bardziej płynny na wielojęzycznej stronie Squarespace i nie będzie wyglądał nie na miejscu - kolejny drobny szczegół, który sprawi, że użytkownicy w języku docelowym poczują, że są brani pod uwagę tak samo, jak użytkownicy w języku oryginalnym.

Podobnie jak w przypadku każdego innego CMS, Weglot działa naprawdę dobrze na Squarespace. Wypróbuj darmowy okres próbny już dziś.

Dowiedz się, jak zainstalować Weglot na swojej stronie Squarespace.