Oppdater deg på beste praksis: Flerspråklig nettstedsdesign på Squarespace

Vi har nylig vist frem noen beundringsverdige eksempler på flerspråklige Squarespace-nettsteder. Hva fikk oss til å velge akkurat disse sidene? Hva er det som skiller dem ut?

La oss ikke legge fingrene imellom: Disse nettstedene er vakre.

Vi har sagt det før, og vi sier det igjen: Squarespace-maler er estetisk tiltalende. Squarespaces eget hovednettsted vant en Webby-pris (som i utgangspunktet er en av de høyest mulige prestasjonene for et online selskap) tilbake i 2017, og de har bare styrket merkevarebyggingen siden den gang.

Og det gir mening at siden Squarespace-hovedsiden er så elegant i seg selv, er plattformens alternativer for nettstedsbygging for brukere også like elegante. I et nøtteskall, Squarespace følger sine egne regler.

Som eier av et Squarespace-nettsted er du kanskje interessert i å gjøre nettstedet ditt globalt- og i 2019 og fremover er dette et ganske sikkert alternativ, enten du lanserer et personlig nettsted, en nettbutikk(70 % av netthandelsleverandørene bekrefter at det har vært lønnsomt for dem å selge på tvers av landegrensene) eller et nettsted for bedriften din.

Når du har bestemt deg for å satse internasjonalt, er språket et av de første elementene du må ta hensyn til når det gjelder innholdet på nettstedet ditt.

Squarespace gjør det superenkelt å bygge nettstedet ditt - på ditt eget språk. Du installerer den (veldig smarte, veldig tilsynelatende) malen du ønsker, og kan deretter leke deg med mange designparametere - fra fonter, til farger, til mellomrom og rutenettalternativer - som alle er intuitivt tilgjengelige via designpanelet ditt.

Squarespace flerspråklig

En forenklende funksjon som Squarespace mangler, er en innebygd løsning for å lage en flerspråklig Squarespace-nettsted.

De gir instruksjoner om hvordan du manuelt dupliserer sidene dine og oversetter dem selv, og selv om denne løsningen kan fungere hvis du har et mindre nettsted, for eksempel en portefølje, kommer det ikke til å fungere for et større nettsted. Det er heller ikke en god løsning for flerspråklig SEO, ettersom dupliserte sider ikke blir foretrukket av søkemotorer.

Les mer om beste praksis for flerspråklig SEO her:

Å bruke en integrert løsning, som Weglot , for å lage et flerspråklig nettsted i Squarespace er en mye raskere og energibesparende løsning.

Flerspråklig design på Squarespace

Når du har oversatt nettstedet ditt, vil du imidlertid sannsynligvis legge merke til noen forskjeller mellom hvordan de oversatte versjonene vises på skjermen, og hvordan den opprinnelige versjonen ser ut.

Dette er som forventet; ulike språk ser ganske enkelt forskjellige ut. Det engelske ordet "shell", som bare er fem bokstaver langt, kan oversettes til "coquillage" - bokstavelig talt dobbelt så mange bokstaver - på fransk.

I de fleste nedskalerte webdesignmiljøer (så hvis du for eksempel bygger et nettsted fra bunnen av), kan oversettelse av siden din forstyrre avsnittsjusteringene og måten tekstblokkene samhandler med hverandre. Weglot kompatibilitet med alle Squarespace-maler forhindrer vanligvis at dette blir et problem; Squarespace-maler er designet av profesjonelle for å være svært tilpasningsdyktige.

Det betyr imidlertid ikke at det ikke finnes noen veiledende prinsipper du bør følge for å a) velge riktig mal for det flerspråklige Squarespace-nettstedet ditt og b) tilpasse den.

Vi tar en omvisning i Squarespace-designgrensesnittet, med tanke på flerspråklighet.

1. Det er tid for flerspråklige Squarespace-maler.

Som du kanskje allerede har oppdaget, hvis du i det hele tatt har gått inn i Squarespace-verdenen, er designparametrene dine avrundet i maler; Squarespace-maler er notorisk minimalistiske, bildetunge og godt proporsjonert for både mobil- og stasjonære skjermer.

Her er noen av malene som brukes for øyeblikket av Weglot kunder som har prøvd og er sikre på å gjøre Squarespace-nettstedet ditt flerspråklig:

Forte: rene linjer og kontraster

Forte er det du kan kalle en digital manifestasjon av White Cube-konseptet: Det er laget for å se ut og føles som et moderne kunstgalleri. Du kan til og med legge inn flere bilder i en automatisert lysbildefremvisning på hjemmesiden din.

Med en forhåndsinnstilling som skifter logoen din fra svart til hvit (og tilbake) avhengig av lysstyrken på bakgrunnsbildet som vises, er Forte visuelt tilpasningsdyktig på mer enn én måte.

Ta en titt på den Praha-baserte arkitekten Stepan Havliks nettportefølje, som er designet ved hjelp av Forte; de engelske og tsjekkiske sidene hans er like skarpe og informative.

Impact: navnet sier alt

Impacts definerende funksjon er sannsynligvis den store størrelsen på hovedtittelområdet. Firmanavnet eller nøkkelordet ditt er virkelig stjernen i showet på en Impact-hjemmeside.

Se hvordan den Rom- og Berlin-baserte advokaten Valentina Mayer har styrket sitt personlige varemerke, samtidig som hun har opprettholdt et vakkert oversatt grensesnitt for både italiensk- og engelskspråklige kunder:

Saltlake: kraft til parallaksen

Å legge til litt bevegelse på siden din (spesielt når du ikke trenger å programmere den selv) er en enkel måte å fange leserens blikk på. Det er nettopp dette som skiller Brine-malfamilien fra sine minimalistiske homologer på Squarespace; på Brine ruller bannerbildene dine i fullskjerm bare litt saktere enn resten av innholdet på siden.

Det er ganske allment anerkjent i webdesignverdenen at dette er et av de enkleste hackene for å gi nettstedet ditt en 3D-følelse, og fordype brukeren enda mer i verdenen din.

Hva annet er bra med Brine? Den er klar for flere språk.

(En av Squarespaces egne flerspråklige nettsteddemoer ble faktisk laget med Nueva, en mal fra Brine-familien - vi skal snakke om den litt senere, men du kan ta en titt på den her).

Den franske grafiske designeren Emmanuelle Ciamous valgte Brine til å blåse liv i de delikate tegningene sine på sin personlige galleriside, og effekten er ganske betagende.

2. Bruk tekstblokker på toppen av bildene dine, i stedet for bilder som inneholder tekst.

Hvis du er en ivrig Photoshop-, Illustrator- eller Canva-bruker, er du kanskje glad i å lage bakgrunnsbilder eller annen grafikk med tekst. Dette er noe mange designere liker å gjøre når de for eksempel ønsker å bruke tilpassede skrifttyper som kanskje ikke er tilgjengelige hos nettstedbyggere.

Men dette er ikke en så god idé hvis du planlegger å gjøre innholdet på Squarespace-nettstedet ditt flerspråklig.

Mens apper som Weglot kan oversette metadataene rundt bildene dine – som navn, bildetekster og nøkkelordene som beskriver dem og lar dem vises på søkemotorer som Google Bilder – kan ikke teksten i et statisk bilde (vanligvis i JPEG-, PNG- eller GIF-format) oversettes.

(Det er også greit å merke seg at Weglot Dashbordet lar deg laste opp forskjellige bilder for hvert av språkene dine; så hvis du vil gjenskape bildet ditt med statisk tekst for hvert språk, vil du ha et sted å koble hvert av dem til det aktuelle språket.)

Men hvis vi skal være ærlige, kan detfort bli en lang og kjedelig prosess å photoshoppe bildeteksten din til flere språk - spesielt hvis du har mange.

I stedet for å forhåndsdesigne ditt eget Squarespace-bannerbilde med tekst på, slik som dette...

...laste opp bildet helt av seg selv:

...bruke Squarespaces bilderedigeringsprogram til å gi det de ønskede effektene (uskarphet, lysstyrkeendringer, de har hele spekteret):

...legge til bildet som et bannerbilde (det er det som vises i skjermbildet nedenfor) eller som bakgrunnsbilde for en blokk, og deretter legge til en tekstblokk direkte på toppen av det.

På den måten sikrer du at teksten din kan oppdages, og at ingen bokstaver blir liggende igjen når du oppretter det flerspråklige nettstedet ditt.

Pro-tips for bilder: Selv om dette ikke alltid er tilfelle hvis du er vant til å designe nettsteder fra bunnen av (der beste praksis vanligvis sier at bilder skal være "optimalisert for skjerm" i sin størrelse - altså ikke nødvendigvis superhøyoppløselige), er større bedre når det gjelder bilder på Squarespace.

De fleste Squarespace-maler er sentrert rundt et stort banner (tenk Brine, Bedford eller Hyde), som noen ganger opptar hele siden i form av et bakgrunnsbilde (mer i stil med Keene, Polaris eller Marta).

Du bør også sørge for at det du velger som hovedbannerbilde, ser bra ut på alle enheter - dukan forhåndsvise nettbrett- og mobilsidene dine ved å klikke på nedpilen øverst på siden og bytte til et annet visningsformat i denne menyen:

3. Skreddersy typografien din.

Typografi er åpenbart en av de viktigste faktorene en webdesigner må ta hensyn til i enhver språklig sammenheng - hvis noen skal lese nettstedet ditt, vil du gjøre opplevelsen så behagelig som mulig for dem.

Når det gjelder flerspråklige typografivalg, trenger du vanligvis ikke å bekymre deg for mye, med mindre du oversetter Squarespace-nettstedet ditt til språk som bruker andre alfabeter/skript. Hvis det er tilfelle, bør du være mer oppmerksom på denne delen.

Squarespace er superstrømlinjeformet, og de fleste Squarespace-maler ser best ut når du ikke bytter for mye rundt på skriftene dine. De fleste designere vil fortelle deg at det finnes noe slikt som for mange fonter (nr. 9 på denne listen over beste typografiske praksis fra Canva forklarer hvorfor).

Dette er gode nyheter for flerspråklige Squarespace-nettdesignere. Selv om du i teorien kan tilordne en annen font for hvert språk hvis du trenger det ved hjelp av tilpasset CSS, er det mye enklere for øynene - og for designhakkene dine - å holde ting enkelt og bruke fonter som kan gjengis universelt på alle språkene dine. Dette vil også sørge for at merkevarebyggingen din er konsistent på alle språk, noe som kan være veldig viktig hvis du prøver å appellere til et globalt publikum.

Du kan begynne med å sjekke ut skriftene som er tilgjengelige på Google Fonts og/eller Adobe Fonts (den første er gratis - for Adobe må du imidlertid vanligvis ha en konto for å laste ned skriftene du vil ha til personlig bruk).

Selv om disse fontbasene inneholder mange flere stiler enn det som faktisk er tilgjengelig på Squarespace, er det den beste måten å finne ut hvilke fontfamilier som støtter flere alfabeter - det finnes ingen måte å gjøre dette på Squarespace.

På Google Fonts kan du for eksempel se hvilke skrifter som støtter hvilke skrifttyper ved å velge ønsket skrifttype i "språk"-menyen.

(Navnet på denne menyen er litt misvisende; du vil kanskje legge merke til at alternativene faktisk ikke er navnene på språkmen heller navnene på skriptene som språkene kan skrives med på nettet. Noen få språk deler navnet på skriften - det arabiske språket, for eksempel, bruker det som vanligvis kalles arabisk skrift - men mange gjør det ikke; engelsk, fransk, tysk og mange andre språk bruker den latinske skriften, selv om ikke alle nødvendigvis er avledet fra latin).

Når du har funnet en skrifttype som støtter begge (eller alle) skriptene du trenger, må du dobbeltsjekke at den er tilgjengelig i Squarespace - du finner Squarespaces fullstendige liste over skrifttyper her.

4. Tilpass Squarespace-språkbytteknappen.

Bestem deg for om du vil bruke flaggikoner eller ikke.

Dette kan noen ganger være en vanskelig avgjørelse. Fra et tradisjonelt designperspektiv høres det veldig intuitivt ut å knytte et flagg til et språk på en språkvalgmeny: Det er et visuelt landemerke, en måte å gjenkjenne ditt eget språk på, selv om du har gått deg helt vill i hjemmesidens opprinnelige språk.

Husk imidlertid at flagg teknisk sett representerer land - ikke språk. Ikke bare snakkes de fleste språk i mer enn ett land, men mange land har også mer enn ett offisielt språk.

Å la Indias flagg representere hindi, for eksempel, gir liten praktisk mening: Selv om hindi teknisk sett er det mest talte språket i India, er det bare ett av landets 16 offisielle språk! Hvis du vil appellere til et indisk publikum, bør du i dette tilfellet ikke bare oversette Squarespace-nettstedet ditt til mer enn ett av disse regionale språkene, men også unngå å gi noen av dem symbolsk preferanse fremfor et annet.

Inkluder den i hovednavigasjonsmenyen.

Selv om standarden Weglot språkbytteknappen er ganske nøytral, kan det være lurt å gjøre merkevarebyggingen på hele nettstedet så sammenhengende som mulig – og den beste måten å sikre at språkknappen er en del av denne strategien, er å inkludere den i hovednavigasjonsmenyen.

Dette sikrer at den alltid er synlig på alle sider på nettstedet ditt, på samme sted, og at den ser ut som de andre navigasjonsknappene når det gjelder farge og skriftstil.

Du kan gjøre dette ved å gå inn i "Pages"-delen av Squarespace-nettstededitoren. Under "Hovednavigasjon" ser du en "+"-knapp som lar deg legge til en knapp i hovednavigasjonslinjen; klikk på denne, og du vil se et lite vindu dukke opp, som i skjermbildet nedenfor:

Du kan gi lenken navnet språket den skal føre til, og i innholdsboksen «Lenke» skriver du inn «#» Weglot -» etterfulgt av språkkoden på to bokstaver for det aktuelle språket.

Tilbake til det grunnleggende: Fire viktige tips for å lykkes med flerspråklig Squarespace

Nå som vi har gjennomgått noen av Squarespaces flerspråklige designfunksjoner og gått gjennom noen eksempler, kan vi oppsummere hva du bør huske på når du skal gjøre Squarespace-nettstedet ditt flerspråklig:

• Velg malen din med omhu. Dette er i bunn og grunn den mest grunnleggende avgjørelsen enhver Squarespace-bruker tar: Malvalget ditt definerer resten av arbeidsflyten din. Sørg for at du velger en mal som vil se like bra ut i oversettelse.

• Hold teksten adskilt fra bildene dine. Unngå å laste opp bilder med tekst på hvis du vil at brukerne skal kunne lese den. Last i stedet opp bilder uten tekst som bannere eller medieelementer, og bruk Squarespaces alternativer for flere tekstblokker til å skrive over eller rundt dem.

• Skrifttyper er nøkkelen. Bruk skrifter som er tilgjengelige på Squarespace, i alle skriptene du trenger - dette vil sikre konsekvent merkevarebygging på hele nettstedet ditt, for alle besøkende.

• Gi knappen din et løft. En tilpasset språkbytteknapp vil sitte bedre på det flerspråklige Squarespace-nettstedet ditt og vil ikke se malplassert ut - enda en liten detalj som vil få brukerne på målspråket til å føle at de blir tatt like mye hensyn til som brukerne på originalspråket.

Som på alle andre CMS-er fungerer Weglot veldig bra på Squarespace. Prøv det med en gratis prøveperiode i dag.

Oppdag hvordan du installerer Weglot på Squarespace-nettstedet ditt.