Fräscha upp dina bästa metoder: Squarespace flerspråkig webbplatsdesign

Vi har nyligen visat upp några beundransvärda exempel på flerspråkiga Squarespace-webbplatser. Vad fick oss att välja just dessa sidor? Vad skiljer dem åt?

Vi ska inte sticka under stol med att de här sajterna är vackra.

Vi har sagt det förut, och vi säger det igen: Squarespace-mallar är estetiskt tilltalande. Squarespaces egen huvudwebbplats vann ett Webby-pris (vilket i princip är en av de högsta möjliga prestationerna för ett onlineföretag) redan 2017, och de har bara ökat sitt varumärke sedan dess.

Och det är vettigt att, eftersom Squarespace-huvudsidan är så snygg i sig, är plattformens webbplatsbyggnadsalternativ för användare lika snygga också. I ett nötskal, Squarespace följer sina egna regler.

Som ägare av en Squarespace-webbplats kanske du är intresserad av att göra din webbplats global - ochunder 2019 och framåt är detta en ganska säker satsning, oavsett om du lanserar en personlig webbplats, en e-handelsbutik(70 % av e-handelsleverantörerna bekräftar att det har varit lönsamt för dem att sälja över gränserna) eller en webbplats för ditt företag.

När du har bestämt dig för att ta steget ut i världen är språket en av de första delarna av webbplatsens innehåll som du måste ta hänsyn till.

Squarespace gör det superenkelt att bygga din webbplats - på ditt eget språk. Du installerar den (mycket snygga, mycket snygga) mall du väljer och kan sedan leka med massor av designparametrar - från teckensnitt, till färger, till avstånd och rutnätsalternativ - som alla är intuitivt tillgängliga via din designinstrumentpanel.

Squarespace flerspråkig

En förenklande funktion som Squarespace saknar är en inbyggd lösning för att göra en Squarespace flerspråkig webbplats.

De ger instruktioner om hur du manuellt duplicerar dina sidor och översätter dem själv, och även om den här lösningen kan fungera om du har en mindre webbplats, till exempel en portfölj, kommer den inte att fungera för en större webbplats. Det är inte heller en hållbar lösning för flerspråkig SEO, eftersom duplicerade sidor inte gynnas av sökmotorer.

Läs mer om bästa praxis för flerspråkig SEO här:

Att använda en integrerad lösning, som Weglotför att skapa en flerspråkig webbplats i Squarespace är en mycket snabbare och energibesparande lösning.

Squarespace flerspråkig design

När du har översatt din webbplats kommer du dock förmodligen att märka några skillnader mellan hur de översatta versionerna visas på din skärm och hur din originalversion ser ut.

Det är inte kons tigt, olika språk ser helt enkelt olika ut. Det engelska ordet "shell", som bara är fem bokstäver långt, översätts till "coquillage" - bokstavligen dubbelt så många bokstäver - på franska.

I de flesta avskalade webbdesignmiljöer (så om du till exempel bygger en webbplats från grunden) kan översättningen av din sida röra till dina styckejusteringar och hur dina textblock interagerar med varandra. Weglotkompatibilitet med alla Squarespace-mallar förhindrar i allmänhet att detta blir ett problem; Squarespace-mallar är utformade av proffs för att vara mycket anpassningsbara.

Det betyder dock inte att det inte finns några vägledande principer som du bör följa för att a) välja rätt mall för din flerspråkiga Squarespace-webbplats och b) anpassa den.

Vi tar en rundtur i Squarespace designgränssnitt, med flerspråkighet i åtanke.

1. Det är dags för Squarespace flerspråkig mall.

Som du kanske redan har upptäckt, om du har gått in i Squarespace-världen alls, är dina designparametrar avrundade i mallar; Squarespace-mallar är notoriskt minimalistiska, bildtunga och välproportionerade för både mobila och stationära skärmar.

Här är några av de mallar som för närvarande används av Weglot som är beprövade och sanna för att ta din Squarespace-webbplats flerspråkig:

Forte: rena linjer och kontraster

Forte är vad man skulle kunna kalla en digital manifestation av White Cube-konceptet: det är gjort för att se ut och kännas som ett samtida konstgalleri. Det låter dig till och med lägga flera bilder i ett automatiserat bakgrundsbildspel på din hemsida.

Med en förinställning som växlar din logotyp från svart till vitt (och tillbaka) beroende på ljusstyrkan i den bakgrundsbild som visas, är Forte visuellt anpassningsbar på mer än ett sätt.

Ta en titt på den Pragbaserade arkitekten Stepan Havliks onlineportfölj, designad med Forte; hans engelska och tjeckiska webbplatser är lika snygga och informativa.

Effekt: namnet säger allt

Impacts definierande funktion är förmodligen den stora storleken på dess huvudtitelutrymme. Ditt företagsnamn eller nyckelord nr 1 är verkligen stjärnan i showen på en Impact-hemsida.

Kolla in hur den Rom- och Berlinbaserade advokaten Valentina Mayer har stärkt sitt personliga varumärke, samtidigt som hon upprätthåller ett vackert översatt gränssnitt för både sina italiensk- och engelskspråkiga kunder:

Brine: kraft till parallaxen

Att lägga till lite rörelse på din sida (särskilt när du inte behöver programmera den själv) är ett enkelt sätt att fånga en läsares öga. Det är just detta som skiljer mallfamiljen Brine från dess minimalistiska motsvarigheter på Squarespace; på Brine rullar dina fullskärmsbannerbilder bara lite långsammare än resten av sidinnehållet.

Det är ganska allmänt erkänt i webbdesignvärlden att detta är en av de enklaste hacksna för att ge din webbplats en 3D-känsla och fördjupa användaren ännu mer i din värld.

Vad mer är bra med Brine? Den är redo för flera språk.

(Faktum är att en av Squarespaces egna flerspråkiga webbplatsdemonstrationer gjordes med Nueva, en mall från Brine-familjen - vi pratar om det lite senare, men du kan ta en titt på det här).

Den franska grafiska formgivaren Emmanuelle Ciamous valde Brine för att blåsa liv i sina skira teckningar på sin personliga gallerisida, och effekten är helt hisnande.

2. Använd textblock ovanpå dina bilder, snarare än bilder som innehåller text.

Om du är en flitig användare av Photoshop, Illustrator eller Canva kanske du gillar att skapa bakgrundsbilder eller annan grafik som innehåller text. Det här är något som många designers gillar att göra när de till exempel vill använda anpassade teckensnitt som kanske inte är tillgängliga på webbplatsbyggare.

Men det här är inte en så bra idé om du planerar att göra innehållet på din Squarespace-webbplats flerspråkigt.

Medan appar som Weglot kan översätta metadata runt dina bilder - som deras namn, bildtexter och nyckelorden som beskriver dem och gör att de kan visas på sökmotorer som Google Images - kantexten i en statisk bild (vanligtvis i JPEG-, PNG- eller GIF-format) inte översättas.

(Det är också bra att notera att Weglot tillåter dig att ladda upp olika bilder för vart och ett av dina språk; så om du vill återskapa din bild med statisk text för varje språk, skulle du ha en plats att länka var och en med sitt lämpliga språk).

Men om vi ska vara ärliga kan detsnabbt bli en lång och tråkig process att photoshoppa din bildtext till flera språk - särskilt om du har många.

Istället för att fördesigna din egen Squarespace-bannerbild med text som redan finns på den, som den här ...

...ladda upp bilden helt av sig själv:

... använd Squarespaces bildredigerare för att ge den önskade effekterna (suddighet, ljusstyrka, de har hela spektrumet):

...lägga till bilden som en bannerbild (det är vad som visas i skärmdumpen nedan) eller som bakgrundsbild för ett block, och sedan lägga till ett textblock direkt ovanpå den.

Detta säkerställer att din text kan upptäckas och att ingen bokstav glöms bort när du skapar din flerspråkiga webbplats.

Proffstips för bilder: Även om detta inte alltid är fallet om du är van vid att designa webbplatser från grunden (där bästa praxis vanligtvis anger att bilder ska vara "optimerade för skärm" i sin storlek - så inte nödvändigtvis superhögupplösta), är större bättre på Squarespace när det gäller bilder.

De flesta Squarespace-mallar är centrerade kring en stor banner (tänk Brine, Bedford eller Hyde), som ibland upptar hela sidan i form av en bakgrundsbild (mer i stil med Keene, Polaris eller Marta).

Du vill också se till att det du väljer som huvudbannerbild ser bra ut på alla enheter - dukan förhandsgranska dina surfplatta- och mobilsidor genom att klicka på nedåtpilen högst upp på sidan och byta till ett annat visningsformat på den här menyn:

3. Skräddarsy din typografi.

Typografi är uppenbarligen en av webbdesignerns främsta överväganden i alla språkliga sammanhang - om någon ska läsa din webbplats vill du göra upplevelsen så trevlig som möjligt för dem.

När det gäller flerspråkiga typografibeslut behöver du vanligtvis inte oroa dig för mycket om du inte översätter din Squarespace-webbplats till språk som använder olika alfabet / skript. Om så är fallet vill du ägna större uppmärksamhet åt den här delen.

Squarespace är superströmlinjeformat, och de flesta Squarespace-mallar ser bäst ut när du inte byter runt dina teckensnitt för mycket. De flesta designers kommer att säga att det finns något som heter för många typsnitt (#9 på denna lista över typografiska bästa praxis från Canva förklarar varför).

Det här är goda nyheter för flerspråkiga Squarespace-webbplatsdesigners. Även om du i teorin kan tilldela ett annat teckensnitt för varje språk om du behöver använda anpassad CSS, är det mycket lättare för ögonen - och på dina designhack - att hålla saker enkelt och använda teckensnitt som kommer att återges universellt på alla dina språk. Detta kommer också att hålla din branding konsekvent mellan språken, vilket kan vara mycket viktigt om du försöker tilltala en global publik.

Du kan börja med att kolla in de teckensnitt som finns tillgängliga på Google Fonts och/eller Adobe Fonts (det första är gratis för Adobe, men du måste vanligtvis ha ett konto för att ladda ner alla teckensnitt som du vill ha för personligt bruk).

Även om dessa teckensnittsbaser innehåller många fler stilar än vad som faktiskt finns tillgängligt på Squarespace, är det det bästa sättet att ta reda på vilka teckensnittsfamiljer som stöder flera alfabet - det finns inget sätt att göra detta på Squarespace.

På Google Fonts kan du till exempel se vilka teckensnitt som stöder vilka skript genom att välja önskat skript i menyn "språk".

(Namnet på denna meny är lite missvisande; du kanske märker att alternativen faktiskt inte är namnen på språkutan snarare på skript som språken kan skrivas med online. Det finns ett fåtal språk som delar namn på sina skript - arabiska språket, till exempel, använder vad som konventionellt kallas det arabiska skriptet - men många gör det inte; engelska, franska, tyska och många andra språk använder det latinska skriptet, även om inte alla nödvändigtvis härrör från latin).

När du har hittat ett typsnitt som stöder båda (eller alla) de skript du behöver, dubbelkolla att det är tillgängligt inom Squarespace - du hittar Squarespaces fullständiga lista över typsnitt här.

4. Anpassa din Squarespace-språkväxlingsknapp.

Bestäm om du vill använda flaggsymboler eller inte.

Det här kan ibland vara ett svårt beslut. Ur ett traditionellt designperspektiv låter det superintuitivt att associera en flagga med ett språk på en språkvalsmeny: det är ett visuellt landmärke, ett sätt att känna igen sitt eget språk, även om man är helt vilse i webbplatsens ursprungliga hemsidas språk.

Tänk dock på att flaggor tekniskt sett representerar länder - inte språk. De flesta språk talas inte bara i mer än ett land, utan många länder har också mer än ett officiellt språk.

Att ha Indiens flagga som representerar hindi, till exempel, är lite praktiskt meningsfullt: även om hindi tekniskt sett är det mest talade språket i Indien, är det bara ett av landets 16 officiella språk! Att försöka tilltala en indisk publik skulle i det här fallet inte bara innebära att översätta din Squarespace-webbplats till mer än bara ett av dessa regionala språk, utan också att undvika att ge något av dem symbolisk preferens framför ett annat.

Inkludera den i din huvudnavigationsmeny.

Även om Weglot standardknapp för språkbyte är ganska neutral, kanske du vill göra ditt varumärke på hela webbplatsen så sammanhängande som möjligt - och det bästa sättet att se till att din språkknapp är en del av denna strategi är att inkludera den i din huvudnavigeringsmeny .

Det gör att den alltid syns på samma plats på alla sidor på webbplatsen och att den ser ut som de andra navknapparna när det gäller färg och teckensnitt.

Du kan göra detta genom att gå in i avsnittet "Sidor" i din Squarespace-webbplatsredigerare. Under "Huvudnavigering" ser du en "+" -knapp som låter dig lägga till en knapp i ditt huvudnavigeringsfält; klicka på det här så ser du ett litet fönster dyka upp, som i skärmdumpen nedan:

Du kan namnge länken med det språknamn som den leder till och i innehållsrutan "Länk" ange "Weglot" följt av språkkoden på två bokstäver för språket i fråga.

Tillbaka till grunderna: Fyra viktiga punkter för att lyckas med flerspråkiga Squarespace

Nu när vi har gått igenom några av Squarespaces flerspråkigt anpassningsbara designfunktioner och gått igenom några exempel, låt oss sammanfatta vad du bör tänka på när du tar din Squarespace-webbplats till den flerspråkiga sfären:

• Välj din mall på ett klokt sätt. Detta är i huvudsak det mest grundläggande beslutet som alla Squarespace-användare gör: ditt mallval definierar resten av ditt arbetsflöde. Se till att du väljer en som kommer att se lika bra ut i översättning.

• Håll din text åtskild från dina bilder. Undvik att ladda upp bilder med text som redan finns på dem, om du vill att dina användare ska kunna läsa den; ladda istället upp textlösa bilder som banners eller medieobjekt och använd Squarespaces alternativ för flera textblock för att skriva över eller runt dem.

• Typsnitt är nyckeln. Använd teckensnitt som är tillgängliga på Squarespace i alla de skript du behöver - detta säkerställer en konsekvent varumärkesprofilering på hela webbplatsen för alla dina besökare.

• Ge din knapp ett lyft. En anpassad språkbytesknapp kommer att sitta mer smidigt på din flerspråkiga Squarespace-webbplats och kommer inte att se malplacerad ut - ännu en liten detalj som gör att dina målspråksanvändare känner att de tas i beaktande lika mycket som dina originalspråksanvändare.

Som på alla andra CMS fungerarWeglot riktigt bra på Squarespace. Ge det ett försök med en gratis provperiod idag.

Upptäck hur du installerar Weglot på din Squarespace-webbplats.