Osvojte si osvědčené postupy: Vícejazyčný design stránek Squarespace

Nedávno jsme vystavili několik obdivuhodných příkladů vícejazyčných webů Squarespace. Proč jsme vybrali právě tyto stránky? Co je odlišuje od ostatních?

Nebudeme si nic nalhávat: tyto stránky jsou pěkné.

Už jsme to říkali a řekneme to znovu: Šablony Squarespace jsou esteticky přitažlivé. Vlastní hlavní webové stránky společnosti Squarespace získaly v roce 2017 ocenění Webby (což je v podstatě jeden z nejvyšších možných úspěchů pro online společnost) a od té doby svou značku jen posílily.

A je logické, že když je hlavní stránka Squarespace tak elegantní, jsou stejně elegantní i možnosti platformy pro tvorbu stránek pro uživatele. Stručně řečeno, Squarespace se řídí vlastními pravidly.

Jako majitelé webu Squarespace možná máte zájem o to, aby vaše stránky byly globální - av roce 2019 a dalších letech je to docela jistá sázka, ať už spouštíte osobní stránky, e-shop(70 % prodejců e-shopů potvrzuje, že prodej přes hranice je pro ně ziskový ), nebo stránky pro vaši firmu.

Jakmile se rozhodnete pro mezinárodní působení, jedním z prvních prvků obsahu vašich stránek, které budete muset vzít v úvahu, je jejich jazyk.

Squarespace umožňuje velmi snadné vytvoření webu ve vašem vlastním jazyce. Nainstalujete si (velmi elegantní, velmi zdánlivě) šablonu podle svého výběru a pak si můžete hrát se spoustou parametrů designu - od písem přes barvy až po rozestupy a možnosti mřížky - které jsou intuitivně přístupné přes ovládací panel designu.

Squarespace vícejazyčný

Jednou ze zjednodušujících funkcí, kterou Squarespace postrádá, je nativní řešení pro vytvoření Squarespace vícejazyčné stránky.

Poskytují pokyny, jak ručně duplikovat stránky a přeložit je sami, a i když toto řešení může fungovat, pokud máte menší web, například portfolio, nebude fungovat pro větší web. Není to ani vhodné řešení pro vícejazyčné SEO, protože vyhledávače duplikované stránky nepreferují.

Další informace o osvědčených postupech vícejazyčného SEO najdete zde:

Použití integrovaného řešení, jako je Weglot, je vytvoření vícejazyčného webu Squarespace mnohem rychlejší a energeticky úspornější řešení.

Vícejazyčný design Squarespace

Po překladu webu si však pravděpodobně všimnete několika rozdílů mezi tím, jak se přeložené verze zobrazují na obrazovce, a tím, jak vypadá původní verze.

To se dá očekávat , různé jazyky prostě vypadají jinak. Anglické slovo "shell", které má pouze pět písmen, se ve francouzštině překládá jako "coquillage" - doslova dvojnásobný počet písmen.

Ve většině prostředí s omezeným webovým designem (například pokud vytváříte web od nuly) může překlad stránky narušit zarovnání odstavců a způsob, jakým na sebe bloky textu vzájemně působí. Kompatibilita aplikaceWeglotse všemi šablonami Squarespace obecně zabraňuje tomu, aby to byl problém; šablony Squarespace jsou navrženy profesionály tak, aby byly vysoce přizpůsobivé.

To však neznamená, že neexistuje několik hlavních zásad, kterými byste se měli řídit , abyste a) vybrali správnou šablonu pro svůj vícejazyčný web Squarespace a b) přizpůsobili ji.

Projdeme si designové rozhraní Squarespace s ohledem na vícejazyčnost.

1. Je čas na vícejazyčné šablony Squarespace.

Jak jste již možná zjistili, pokud jste se vůbec pustili do světa Squarespace, vaše parametry designu jsou zaokrouhleny do šablon; šablony Squarespace jsou notoricky známé jako minimalistické, s velkým množstvím obrázků a dobře proporcionální pro obrazovky mobilních zařízení i stolních počítačů.

Zde jsou některé ze šablon, které v současné době používají zákazníci Weglot a které jsou osvědčené a pravdivé pro vícejazyčné stránky Squarespace:

Forte: čisté linie a kontrast

Forte je takzvanou digitální manifestací konceptu White Cube: vypadá a působí jako galerie současného umění. Dokonce umožňuje umístit na domovskou stránku více obrázků v automatické slideshow na pozadí.

Díky přednastavení, které přepíná logo z černé na bílou (a zpět) v závislosti na jasu zobrazeného obrázku na pozadí, je aplikace Forte vizuálně přizpůsobitelná ve více ohledech.

Podívejte se na online portfolio pražského architekta Štěpána Havlíka vytvořené pomocí Forte; jeho anglické i české stránky jsou stejně ostré a informativní.

Dopad: název mluví za vše

Charakteristickým rysem Impact je pravděpodobně velikost hlavního titulkového prostoru. Váš název firmy nebo klíčové slovo č. 1 je na domovské stránce Impact skutečně hlavní hvězdou.

Podívejte se, jak advokátka Valentina Mayerová z Říma a Berlína posílila svou osobní značku, a přitom zachovala krásně přeložené rozhraní pro své italsky i anglicky mluvící klienty:

Solanka: síla paralaxy

Přidání trochy pohybu na stránku (zejména pokud jej nemusíte sami programovat) je snadný způsob, jak upoutat pozornost čtenáře. Právě tím se rodina šablon Brine liší od svých minimalistických homologů na webu Squarespace; v Brine se vaše celoobrazovkové bannery posouvají jen o něco pomaleji než zbytek obsahu stránky.

Ve světě webdesignu je všeobecně známo, že se jedná o jeden z nejjednodušších způsobů, jak dodat webu 3D atmosféru a ještě více vtáhnout uživatele do svého světa.

Co dalšího je na Brine skvělé? Je připraven pro více jazyků.

(Ve skutečnosti byla jedna z vícejazyčných ukázkových stránek společnosti Squarespace vytvořena pomocí šablony Nueva z rodiny Brine - o té si povíme o něco později, ale můžete se na ni podívat zde.)

Francouzská grafická designérka Emmanuelle Ciamous si vybrala Brine, aby vdechla život svým jemným kresbám na stránkách své osobní galerie, a výsledek je úchvatný.

2. Používejte textové bloky na horní straně obrázků, nikoli obrázky obsahující text.

Pokud jste vášnivými uživateli aplikací Photoshop, Illustrator nebo Canva, možná si potrpíte na vytváření obrázků na pozadí nebo jiných grafických prvků s textem. To je něco, co mnoho designérů rádo dělá, když chtějí použít například vlastní písma, která nemusí být k dispozici v nástrojích pro tvorbu stránek.

Pokud však plánujete vytvořit vícejazyčný obsah webu Squarespace, není to dobrý nápad.

Zatímco aplikace jako Weglot mohou překládat metadata kolem vašich obrázků - jejich názvy, popisky a klíčová slova, která je popisují a umožňují jejich zobrazení ve vyhledávačích, jako je Google Images -text ve statickém obrázku (obvykle ve formátu JPEG, PNG nebo GIF) nelze přeložit.

(Je také dobré si uvědomit, že ovládací panel Weglot umožňuje nahrávat různé obrázky pro každý z jazyků; takže pokud byste chtěli znovu vytvořit obrázek se statickým textem pro každý jazyk, měli byste místo pro propojení každého z nich s příslušným jazykem.)

Ale pokud máme být upřímní, photoshopování textu obrázku do více jazyků - zejména pokud jich máte více -se můžerychle stát zdlouhavým a únavným procesem.

Místo toho, abyste si předem navrhli vlastní obrázek banneru Squarespace s textem, jako je tento...

...nahrát obrázek sám:

...použijte editor obrázků na Squarespace a dodejte mu požadované efekty (rozmazání, změny jasu, mají celou škálu možností):

...přidat obrázek jako obrázek banneru (to je to, co je zobrazeno na obrázku níže) nebo jako obrázek na pozadí bloku a poté přidat textový blok přímo na něj.

Tím zajistíte, že váš text bude rozpoznatelný a že při vytváření vícejazyčného webu nezůstane žádné písmeno pozadu.

Tip pro obrázky: I když to není vždy pravidlem, pokud jste zvyklí navrhovat webové stránky od nuly (kde osvědčené postupy obvykle uvádějí, že obrázky by měly být "optimalizovány pro obrazovku" ve své velikosti - tedy ne nutně ve vysokém rozlišení), na Squarespace platí, že větší je lepší, pokud jde o obrázky.

Většina šablon Squarespace je soustředěna kolem velkého banneru (viz Brine, Bedford nebo Hyde), který někdy zabírá celou stránku ve stylu obrázku na pozadí (spíše ve stylu Keene, Polaris nebo Marta).

Ujistěte se také, že bez ohledu na to, co zvolíte jako hlavní obrázek banneru, vypadá dobře na všech zařízeních- náhled stránek pro tablety a mobilní zařízení si můžete prohlédnout kliknutím na šipku dolů v horní části stránky a přepnutím na jiný formát zobrazení v této nabídce:

3. Přizpůsobte typografii.

Typografie je zjevně jedním z hlavních hledisek webdesignéra v jakémkoli jazykovém kontextu - pokud má někdo číst vaše stránky, chcete mu tento zážitek co nejvíce zpříjemnit.

Pokud jde o vícejazyčné typografické rozhodnutí, obvykle se nemusíte příliš starat, pokud nepřekládáte své stránky Squarespace do jazyků, které používají jiné abecedy/skripty. V takovém případě byste měli této části věnovat větší pozornost.

Prostor Squarespace je velmi přehledný a většina šablon Squarespace vypadá nejlépe, když příliš nepřepínáte písma. Většina designérů vám řekne, že existuje něco jako příliš mnoho písem (#9 na tomto seznamu osvědčených typografických postupů od Canvy vysvětluje proč).

To je dobrá zpráva pro tvůrce vícejazyčných stránek Squarespace. I když teoreticky můžete pro každý jazyk přiřadit jiné písmo, pokud to potřebujete, pomocí vlastního CSS, je mnohem snazší pro oči - a pro vaše návrhářské sekáče - zachovat jednoduchost a používat písma, která se budou vykreslovat univerzálně ve všech jazycích. Díky tomu bude vaše značka v různých jazycích konzistentní, což může být velmi důležité, pokud se snažíte oslovit globální publikum.

Můžete začít tím, že si prohlédnete písma dostupná na stránkách Google Fonts a/nebo Adobe Fonts (první z nich je zdarma - u Adobe však obvykle musíte mít účet, abyste si mohli stáhnout jakékoli písmo, které chcete používat pro osobní účely).

I když tyto databáze písem obsahují mnohem více stylů, než je ve skutečnosti k dispozici v prostoru Squarespace, je to nejlepší způsob, jak zjistit, které rodiny písem podporují více abeced - v prostoru Squarespace to nelze provést.

Například v aplikaci Google Fonts můžete vybrat požadované písmo v nabídce "jazyk" a zjistit, která písma podporují jednotlivé skripty.

(Název této nabídky je trochu zavádějící; můžete si všimnout, že možnosti ve skutečnosti nejsou názvy jazyků, ale spíše skriptů ve kterých lze jazyky psát online. Existuje několik jazyků, které sdílejí název svého písma - například arabština používá písmo, kterému se konvenčně říká arabské písmo -, ale mnoho jazyků toto písmo nepoužívá; angličtina, francouzština, němčina a mnoho dalších jazyků používá latinku, i když ne všechny jsou nutně odvozeny z latinky).

Jakmile najdete písmo, které podporuje obě (nebo všechna) písma, která budete potřebovat, dvakrát zkontrolujte, zda je k dispozici v aplikaci Squarespace - úplný seznam písem aplikace Squarespace najdete zde.

4. Přizpůsobte si tlačítko pro přepínání jazyků ve Squarespace.

Rozhodněte se, zda chcete používat ikony vlajek, nebo ne.

To může být někdy těžké rozhodnutí. Z pohledu tradičního designu zní přiřazení vlajky k jazyku v nabídce pro výběr jazyka velmi intuitivně: je to vizuální orientační bod, způsob, jak rozpoznat vlastní jazyk, i když jste se v původním jazyce domovské stránky zcela ztratili.

Mějte však na paměti, že vlajky technicky vzato představují země, nikoli jazyky. Nejenže se většina jazyků používá ve více než jedné zemi, ale mnoho zemí má více než jeden úřední jazyk.

Například to, že indická vlajka představuje hindštinu, nedává praktický smysl: i když je hindština technicky nejrozšířenějším jazykem v Indii, je to pouze jeden z 16 úředních jazyků země! Snaha oslovit indické publikum by si v tomto případě zasloužila nejen přeložit web Squarespace do více než jednoho z těchto regionálních jazyků, ale také nedávat žádnému z nich symbolickou přednost před jiným.

Zařaďte ji do hlavní navigační nabídky.

I když je standardní tlačítko pro přepínání jazyků ve Weglot poměrně neutrální, možná budete chtít, aby vaše značka na webu byla co nejjednotnější - a nejlepší způsob, jak zajistit, aby bylo jazykové tlačítko součástí této strategie, je zahrnout ho do hlavní navigační nabídky.

Tím zajistíte, že bude vždy viditelné na každé stránce vašeho webu na stejné pozici, a navíc bude vypadat stejně jako ostatní navigační tlačítka, pokud jde o barvu a styl písma.

To můžete provést v části "Stránky" editoru webu Squarespace. V části "Hlavní navigace" uvidíte tlačítko "+", které vám umožní přidat tlačítko na hlavní navigační panel; klikněte na něj a zobrazí se malé okno, jako na obrázku níže:

Odkaz můžete pojmenovat jako název jazyka, ke kterému povede, a do pole pro obsah odkazu zadejte "Weglot", za kterým následuje dvoupísmenný kód daného jazyka.

Zpět k základům: Čtyři hlavní zásady pro úspěch ve vícejazyčném Squarespace

Nyní, když jsme se seznámili s některými funkcemi vícejazyčně přizpůsobitelného designu Squarespace a prošli jsme si několik příkladů, shrňme, co byste měli mít na paměti, pokud chcete svůj web Squarespace přenést do vícejazyčné sféry:

• Vyberte si šablonu s rozmyslem. Toto je v podstatě nejzásadnější rozhodnutí, které každý uživatel Squarespace učiní: výběr šablony určuje zbytek vašeho pracovního postupu. Ujistěte se, že jste vybrali takovou, která bude vypadat stejně dobře i v překladu.

• Oddělte text od obrázků. Pokud chcete, aby si uživatelé mohli přečíst text, vyhněte se nahrávání obrázků s textem; místo toho nahrajte obrázky bez textu jako bannery nebo mediální prvky a použijte několik možností textových bloků Squarespace pro psaní nad nimi nebo kolem nich.

• Typ je klíčový. Používejte písma, která jsou na Squarespace dostupná ve všech písmech, která potřebujete - zajistíte tak konzistentní značku napříč celým webem pro všechny návštěvníky.

• Dodejte svému tlačítku energii. Přizpůsobené tlačítko pro přepínání jazyků bude na vašem vícejazyčném webu Squarespace sedět plynuleji a nebude vypadat nepatřičně - další drobný detail, díky kterému budou mít uživatelé cílového jazyka pocit, že se na ně bere stejný ohled jako na ty v původním jazyce.

Stejně jako v jiných CMS fungujeWeglot na Squarespace velmi dobře. Vyzkoušejte si ho ještě dnes pomocí bezplatné zkušební verze.

Zjistěte, jak nainstalovat Weglot na své stránky Squarespace.