Share
Offrire contenuti in più lingue può aggiungere molti nuovi livelli di complessità al web design. La traduzione di articoli è solo il primo ostacolo; strutturare un sito web multilingue può essere piuttosto difficile. Per aiutarti a fare le cose nel modo giusto, offrirò alcuni suggerimenti e condividerò alcune delle nostre esperienze su Tuts + per diventare multilingue.
Il primo suggerimento non è in realtà correlato al web design, ma è comunque importante. Quando offri contenuti in più lingue, è meglio non fare affidamento sul software di traduzione. Non fraintendetemi, strumenti come Google Translate sono facili da usare e in costante miglioramento, ma la precisione del testo tradotto varia (a volte ci siamo persino imbattuti in questo su Tuts!)
Iniziative come la community di Google Translate perfezionano il modo in cui vengono effettuate le traduzioniPer questo motivo è una buona idea ottenere un traduttore umano. O optare per un servizio a pagamento come Fliplingo o (a seconda del progetto) utilizzare piattaforme di traduzione gestite dalla comunità come Native. Gli umani hanno una migliore conoscenza del vocabolario locale e delle sottili sfumature del linguaggio. Al momento della scrittura, il software automatizzato non ha raggiunto quel punto.
A Tuts + dobbiamo ringraziare i nostri lettori per aver tradotto i nostri tutorial.
Un sito Web multilingue è inutile senza la possibilità di cambiare lingua. Spesso troverai siti Web multilingue che utilizzano un menu a discesa, collocato in alto a destra sulla pagina (per i contenuti da sinistra a destra l'angolo in alto a sinistra è più adatto). È inoltre possibile trovare commutatori nel footer (l'approccio scelto da IBM.com). Indipendentemente dal modello scelto, assicurati che il menu a discesa sia facile da vedere e accedere.
A Tuts + usiamo a selezionare elemento all'interno dei meta dettagli del post, più un elenco nella barra laterale per accertarsi che le basi siano coperte:
Se si sceglie di utilizzare un elemento select, il W3C consiglia alcune linee guida utili.
Le bandiere sono spesso utilizzate per indicare una lingua. Tuttavia, sono d'accordo con Gunnar Bittersmann, nel senso che non sono un grande fan dell'uso di flag per i comunicatori di lingua. Considera i seguenti motivi:
Per esempio:
https://www.duolingo.comDuolingo difende il loro uso della bandiera brasiliana perché insegna portoghese brasiliano. Ma la loro variante dello spagnolo è più vicina allo spagnolo latinoamericano che a Castellano (spagnolo tradizionale), quindi l'uso delle bandiere qui è incoerente e confuso.
È meglio fare riferimento a una lingua nella propria lingua, ad esempio "Deutsch" anziché "tedesco". Anche l'ordine delle lingue in ordine alfabetico aiuterà, così gli utenti possono trovare facilmente la versione giusta. Dai un'occhiata alla barra laterale di Wikipedia per l'ispirazione.
Alcuni siti web reindirizzano gli utenti alla home page quando cambiano lingua. Questo può essere fonte di confusione, perché gli utenti devono quindi trovare di nuovo la pagina. Per mantenere felici i tuoi visitatori, ovunque sia possibile, assicurati che vengano presentati con la stessa pagina (tradotta) quando cambiano lingua.
Vuoi impostare una lingua predefinita per i visitatori per la prima volta? È possibile rilevare la lingua dell'utente e mostrare automaticamente la pagina nella lingua preferita dell'utente. Tuttavia, non nascondere le altre opzioni, nel caso in cui l'utente desideri passare.
Per saperne di più su Smashing Magazine: Se si chiede l'utente o il loro browser?
I tuoi contenuti devono essere leggibili, quindi assicurati che la codifica dei caratteri nella parte superiore della pagina sia impostata correttamente:
Dal W3C:
"Una codifica basata su Unicode come UTF-8 può supportare molte lingue e può ospitare pagine e moduli in qualsiasi combinazione di queste lingue."
Quindi considera i caratteri effettivi: il tuo carattere web deve essere compatibile con tutte le lingue supportate, specialmente per le lingue non latine. Ciò significa che il font utilizzato deve contenere tutti i caratteri e glifi di cui hai bisogno in genere. Alcune lingue comprendono centinaia di caratteri, rendendo molto pesanti i file dei font. Considera quindi di perfezionare i gruppi di caratteri che includi nei file.
Esistono diversi siti Web che offrono caratteri basati su caratteri non latini, come typebank.co.jp, e una rapida ricerca su Google ti aiuterà a trovare più alternative.
https://www.typebank.co.jpCi sono anche altre considerazioni tipografiche. Non dimenticare che alcune lingue sono più "verbose" e quindi occupano più spazio. Un pulsante "aggiungi al carrello" potrebbe essere tradotto in olandese in "aan winkelwagen toevoegen". La versione inglese consiste di 11 caratteri, la versione olandese 25, occupando il doppio dello spazio. Quando lo spazio è scarso, puoi provare una traduzione diversa, meno letterale, o modificare la dimensione del carattere in base alla lingua.
Altri caratteri non latini potrebbero richiedere un'altezza di riga o una dimensione di carattere diversa rispetto al valore predefinito latino. I caratteri cinesi, ad esempio, sono visivamente più complessi dei caratteri latini, il che significa che devono essere abbastanza grandi per una chiara distinzione. Questi fattori possono alterare enormemente l'aspetto della pagina, quindi teneteli a mente.
Ecco qualcosa di cui potresti non essere a conoscenza: le lingue non hanno una direzione, ma la copione sono scritti dentro. Ad esempio, l'azero (parlato dal popolo dell'Azerbaigian) può essere scritto usando gli script in latino o cirillico, nel qual caso è scritto LTR (da sinistra a destra). In alternativa può essere scritto in arabo, nel qual caso è scritto RTL (da destra a sinistra).
La maggior parte delle lingue usa script scritti e letti da sinistra a destra, ma dove non è il caso è utile rispecchiare il layout dell'intera pagina web. Sì, l'intero layout. Testo, immagini, navigazione, barre laterali, pulsanti, menu a discesa, barre di scorrimento ... dovrebbero essere tutti specchiati.
Tom Maslen spiega come il team della BBC usa Sass per aiutarli con i layout bidirezionali:
Per il contenuto, specificare la direzione del testo tramite dir = "rtl" attributo. Questo attributo è supportato da tutti i principali browser. Ecco un esempio HTML:
Oppure usa il CSS:
.content direction: rtl; /* Da destra a sinistra */
Un trucco che abbiamo incontrato in Tuts + è stato l'incorporamento di frammenti di codice inline entro Testo RTL (come nelle traduzioni in arabo, farsi ed ebraico). Il testo legge RTL, ma il codice inline deve rimanere LTR. In questo esempio, il codice inline deve sempre essere letto html, body width: 100%; :
Dopo l'originale inglese, puoi vedere cosa succede al codice inline all'interno del secondo esempio. L'Esempio 3 prova a sovrascriverlo specificando:
.codice arabo direction: ltr;
ma, come puoi vedere, sta avendo poco o nessun effetto. Questo è dove il unicode-bidi proprietà entra in. Accoppiato con il incorporare valore, questo ci aiuta a scavalcare la direzione calcolata del browser per gli elementi incorporati. L'esempio 4 dimostra che ciò ha funzionato:
.codice arabo direction: ltr; unicode-bidi: embed;
Esistono diversi modi per strutturare gli URL dei siti Web multilingue. Ogni opzione ha vantaggi e svantaggi.
Un dominio di primo livello del codice paese (ccTLD) è collegato a un paese specifico, ad esempio .fr per Francia e .es per Spagna.
I ccTLD sono un chiaro segnale per i motori di ricerca che un sito web sta prendendo di mira gli utenti in quel paese. La posizione del server è irrilevante ed è facile separare i siti Web. I maggiori svantaggi sono la disponibilità di domini e i costi aggiuntivi.
Alcune estensioni di dominio non sono legate a un Paese o a una regione. Il più popolare è .com, ma ci sono altri domini generici di primo livello di uso frequente, come .net e .org.
Questi gTLD possono essere utilizzati in combinazione con un sottodominio, ad esempio fr.website.com. È facile da configurare e la maggior parte dei motori di ricerca comprende questo tipo di targeting geografico. Tuttavia, gli utenti potrebbero non riconoscere sempre la lingua del contenuto in base all'URL.
Le sottodirectory sono la controparte dei sottodomini. Vengono spesso utilizzati per strutturare il contenuto (ad esempio website.com/blog o website.com/tshirts), ma possono anche essere utilizzati per scopi di targeting geografico. In questo caso usiamo website.com/fr per strutturare i nostri URL.
Con questa tecnica, tutto può essere ospitato sullo stesso server. La configurazione è molto semplice e puoi utilizzare Google Search Console per identificare le diverse lingue. Uno svantaggio è che gli utenti potrebbero non riconoscere il targeting geografico dall'URL (ad es. Webshop.com/de/ in tedesco o no?)
Infine, ci sono parametri URL, ad esempio website.com?country=it. I parametri URL non sono consigliati, perché sono difficili da interpretare per i motori di ricerca.
Personalmente, mi piace usare le sottodirectory in combinazione con un gTLD. I sottodomini vengono principalmente utilizzati per separare contenuti completamente diversi. Poiché i siti Web multilingue sono essenzialmente traduzioni dello stesso contenuto (il più delle volte), le sottodirectory rappresentano una soluzione ovvia.
Puoi usare la lingua nell'URL, ad esempio:
Oppure combina la lingua e la posizione:
Per evitare problemi di contenuti duplicati, è meglio identificare una versione preferita per ogni lingua / località. Possiamo usare un semplice elemento di collegamento HTML per questo, vale a dire rel = "alternate" hreflang = "x". multiplo hreflang i tag dovrebbero essere usati su una pagina; uno che si riferisce a se stesso e un link ad ogni alternativa.
Su una pagina web, il codice potrebbe essere simile a questo:
Questo codice indica ai motori di ricerca che example.com ha come target utenti inglesi nel Regno Unito. Dice anche che ci sono due varianti dello stesso contenuto, vale a dire una per gli Stati Uniti e una per l'Australia.
Quando si progettano siti Web multilingue, ci sono molte altre cose da considerare, come ad esempio:
Non tutti i Paesi utilizzano lo stesso formato di data. A volte dovrai convertire le date dal calendario gregoriano, ad esempio, al calendario persiano.
I paesi hanno opinioni etiche differenti. Esiste una natura specifica della cultura della sessualità, dell'umorismo, del simbolismo, ecc. Che è facilmente trascurata quando si traduce un sito web. Ad esempio: in alcuni paesi è perfettamente accettabile mostrare una foto di una coppia gay, mentre altri paesi potrebbero trovarlo offensivo.
Stai usando un captcha sul tuo sito web? Assicurati che sia nella stessa lingua del contenuto della pagina. Come visitatore del Regno Unito, è improbabile che tu voglia risolvere un captcha russo.
Perché non sono già abbastanza difficili ... Aiuta i tuoi visitatori con i numeri di telefono sul tuo sito web includendo il prefisso internazionale. È possibile trovare un elenco di tutti i codici paese in questa pagina.
Ci sono molte altre considerazioni quando si prepara un sito Web per completare l'internazionalizzazione, ma questi suggerimenti dovrebbero darvi una buona base su cui lavorare. Facci sapere nei commenti quali altri suggerimenti hai per il web design multilingue e iscriviti alla newsletter Tuts + Translation Project se sei interessato a sapere cosa stiamo combinando!
Accentsconagua