Tips untuk Merancang dan Membangun Sebuah Situs Web Multibahasa

Menawarkan konten dalam beberapa bahasa dapat menambahkan banyak lapisan-lapisan kompleksitas ke desain web. Menerjemahkan artikel hanyalah rintangan pertama; Penataan situs multibahasa bisa sangat sulit. Untuk membantu Anda membenarkannya, saya akan memberikan beberapa tips, dan berbagi beberapa pengalaman kami di Tuts+ untuk menjadi multibahasa.

1. Terjemahkan

Tips pertama benar-benar tidak terkait dengan desain web, tetapi sangat penting namun demikian. Ketika Anda menawarkan konten dalam beberapa bahasa, yang terbaik tidak bergantung pada perangkat lunak terjemahan. Jangan salah, alat-alat seperti Google Translate mudah digunakan dan terus-menerus ditingkatkan, tapi akurasi dari teks yang diterjemahkan bervariasi (kami bahkan telah jatuh membusuk dari ini di Tuts+ karena suatu sebab!)

Untuk alasan ini, adalah ide yang baik untuk mendapatkan seorang penerjemah manusia. Memilih layanan berbayar seperti Fliplingo, atau (tergantung pada proyek Anda) menggunakan platform terjemahan berbasis komunitas seperti Native. Manusia memiliki pemahaman kosakata lokal dan nuansa halus dari bahasa. Pada saat penulisan, software otomatis belum mencapai titik itu.

Di Tuts+ kami mengucapkan terima kasih kepada pembaca kami untuk menerjemahkan tutorial kami.

2. Menyajikan Pilihan Bahasa

Situs multibahasa tidak berguna tanpa kemampuan untuk mengubah bahasa. Seringkali Anda akan menemukan situs-situs multibahasa menggunakan dropdown, ditempatkan di kanan atas halaman (untuk konten kiri-ke-kanan di sudut kiri atas lebih cocok). Anda mungkin juga menemukan pengalih di footer (pendekatan yang dipilih IBM.com). Pola manapun yang Anda gunakan, pastikan bahwa dropdown mudah untuk dilihat dan diakses.

Di Tuts+ kami menggunakan sebuah elemen select dalam rincian meta posting, ditambah daftar di sidebar untuk memastikan basisnya tertutupi:

Jika Anda memilih untuk menggunakan sebuah elemen select, W3C menyarankan beberapa pedoman berguna.

Bendera

Bendera sangat sering digunakan untuk menunjukkan bahasa. Namun, saya setuju dengan Gunnar Bittersmann, bahwa saya bukan penggemar besar dari menggunakan bendera untuk beralih bahasa.  Pertimbangkan alasan berikut:

• Bendera mewakili negara, bukan bahasa.
• Sebuah negara dapat memiliki lebih dari satu bahasa resmi.
• Bahasa dapat digunakan di lebih dari satu negara.
• Pengunjung mungkin tidak mengenali bendera (karena ukuran ikonnya) atau mereka mungkin bingung dengan bendera-bendera yang serupa.

Misalnya:

Duolingo mempertahankan mereka menggunakan bendera Brasil karena mereka mengajarkan bahasa Portugis Brasil. Tapi varian dari bahasa Spanyol mereka lebih dekat ke bahasa Spanyol Amerika Latin daripada Castellano (bahasa Spanyol tradisional), sehingga penggunaan bendera di sini adalah tidak konsisten dan membingungkan.

Yang terbaik untuk merujuk kepada bahasa dalam bahasanya sendiri, misalnya 'Deutsch' bukan 'Jerman'. Mengurutkan bahasa secara abjad juga akan membantu, sehingga pengguna dapat dengan mudah menemukan versi yang benar. Lihatlah sidebar Wikipedia untuk inspirasi.

Mengarahkan

Situs web tertentu mengarahkan pengguna ke homepage ketika mereka mengubah bahasa. Hal ini dapat membingungkan, karena pengguna kemudian harus menemukan halamannya lagi. Untuk menjaga pengunjung Anda bahagia, sebisa mungkin pastikan bahwa mereka disajikan dengan halaman yang sama (diterjemahkan) ketika mereka beralih bahasa.

Mendeteksi Bahasa Default

Ingin mengatur bahasa default untuk pengunjung yang pertama kalinya? Itu mungkin untuk mendeteksi bahasa pengguna dan secara otomatis menampilkan halaman di dalam bahasa pilihan pengguna. Namun, jangan menyembunyikan pilihan lainnya, dalam hal pengguna ingin beralih.

Baca lebih lanjut di Smashing Magazine: Anda Harus Meminta Pengguna Atau Browser Mereka?

3. Encoding dan Font

Konten Anda harus dapat dibaca, jadi pastikan encoding karakter di head halaman diatur dengan benar:

1

<meta charset="utf-8">

Dari W3C:

"Encoding berbasis Unicode seperti UTF-8 dapat mendukung banyak bahasa dan dapat menampung halaman dan dalam bentuk campuran bahasa-bahasa tersebut."

Kemudian pertimbangkan font yang sebenarnya: font web harus kompatibel dengan semua bahasa yang mendukung, terutama untuk bahasa berbasis non-Latin. Ini berarti bahwa font yang digunakan harus berisi semua karakter dan glyphs yang biasanya Anda perlukan. Beberapa bahasa terdiri dari ratusan karakter, membuat file font sendiri akan sangat berat. Pertimbangkan karena itu menyempurnakan kelompok karakter yang Anda masukkan dalam file.

Ada beberapa situs yang menawarkan font berbasis karakter non-Latin, seperti typebank.co.jp, dan pencarian Google dengan cepat akan membantu Anda menemukan alternatif lain.

Ada pertimbangan tipografi lainnya juga. Jangan lupa bahwa bahasa tertentu lebih "bertele-tele" dan karena itu akan mengambil lebih banyak ruang. Tombol 'add to cart' mungkin diterjemahkan dalam bahasa Belanda 'aan winkelwagen toevoegen'. Versi bahasa Inggris yang terdiri dari 11 karakter, belanda versi 25, mengambil ruang dua kali lebih banyak. Ketika ruang terbatas, Anda dapat mencoba terjemahan yang berbeda, kurang harfiah, atau mengubah ukuran font berbasis pada bahasanya.

Font non-Latin lainnya mungkin perlu berbagai macam line-height, atau ukuran karakter, daripada default Latin Anda. Karakter bahasa Cina, misalnya, secara visual lebih kompleks dari karakter Latin, yang berarti mereka harus cukup besar untuk pembedaan yang jelas. Faktor-faktor ini dapat sangat mengubah penampilan halaman, jadi ingat mereka dalam pikiran.

4. Kiri ke Kanan dan Kanan ke Kiri

Sini adalah sesuatu yang Anda mungkin tidak menyadari: bahasa tidak memiliki arah, tapi naskah mereka yang sedang ditulis yang melakukannya. Misalnya, Azeri (diucapkan oleh orang-orang dari Azerbaijan) dapat ditulis menggunakan naskah bahasa Latin atau bahasa Sirilik, dalam hal ini tertulis LTR (kiri ke kanan). Atau dapat ditulis dalam naskah bahasa Arab , hal ini tertulis RTL (kanan ke kiri). Atau dapat ditulis dalam naskah bahasa Arab, hal ini tertulis RTL (kanan ke kiri).

Banyak bahasa menggunakan naskah yang ditulis dan dibaca dari kiri ke kanan, tapi itu bukanlah hal yang membantu untuk mencerminkan tata letak halaman web secara keseluruhan. Ya, seluruh tata letak. Teks, gambar, navigasi, sidebars, tombol, dropdown, bar gulir... semua harus tercermin.

Tom Maslen menjelaskan bagaimana tim BBC menggunakan Sass untuk membantu mereka dengan tata letak dua-arah:

Untuk konten, tentukan arah teks melalui atribut dir="rtl". Atribut ini didukung oleh semua browser utama. Berikut adalah contoh HTML:

1

<body dir="rtl">

Atau gunakan CSS:

1

.content {

2

  direction: rtl;  /* Right to Left */

3

}

LTR Di Dalam RTL

Satu kejutan kita temui di Tuts+ adalah menanamkan potongan kode inline di dalam teks RTL (seperti dalam terjemahan bahasa Arab, Persia dan Ibrani). Teks ini terbaca RTL, tetapi kode inline harus tetap LTR. Dalam contoh ini, kode inline harus selalu terbaca html, body { width: 100%; }:

Setelah bahasa Inggris asli, Anda dapat melihat apa yang terjadi pada kode inline dalam contoh kedua. Contoh 3 mencoba mengesampingkannya dengan menentukan:

1

.arabic code {

2

 direction: ltr;   

3

}

tapi, seperti yang Anda lihat, itu memiliki sedikit berpengaruh. Ini adalah di mana properti unicode-bidi masuk. Dipasangkan dengan nilai embed, ini membantu kita menimpa arah browser yang dihitung untuk elemen yang tertanam. Contoh 4 menunjukkan bahwa ini telah bekerja:

1

.arabic code {  

2

 direction: ltr;

3

 unicode-bidi: embed;

4

}

5. Struktur URL

Ada beberapa cara untuk membangun URL situs web multibahasa. Masing-masing pilihan memiliki kelebihan dan kekurangan.

ccTLD

top-level domain (ccTLD) kode negara adalah terkait dengan negara tertentu, seperti .fr untuk Perancis dan .es untuk Spanyol.

ccTLD adalah sinyal yang jelas untuk mesin pencari bahwa situs web ini menargetkan pengguna di negara tersebut. Lokasi server adalah tidak relevan dan sangat mudah untuk situs-situs web yang terpisah. Kelemahan terbesar adalah ketersediaan domain dan biaya ekstra.

Subdomain + gTLD

Ekstensi domain tertentu tidak terikat pada suatu negara atau wilayah. Yang paling populer adalah .com, tapi ada top-level domain umum lainnya yang sering-digunakan, seperti .net dan .org.

gTLD ini dapat digunakan dalam kombinasi dengan subdomain, misalnya fr.website.com. Sangat mudah untuk mengatur dan kebanyakan mesin pencari memahami jenis penargetan geografis ini. Namun, pengguna mungkin tidak selalu mengenali bahasa konten berdasarkan URL.

Subdirektori + gTLD

Subdirektori adalah mitra subdomain. Mereka sering digunakan untuk struktur konten (misalnya website.com/blog atau website.com/tshirts), tetapi juga dapat digunakan untuk tujuan penargetan geografis. Dalam hal ini kami menggunakan website.com/fr untuk struktur URL kami.

Dengan teknik ini, segala sesuatu dapat di-host pada server yang sama. Pengaturan ini sangat mudah dan Anda dapat menggunakan Google Search Console untuk mengidentifikasi bahasa-bahasa yang berbeda. Salah satu kelemahan adalah bahwa pengguna mungkin tidak mengenali penargetan geografis dari URL saja (misalnya adalah webshop.com/de/ dalam bahasa Jerman atau tidak?)

Parameter URL

Akhirnya, ada parameter URL, misalnya website.com?country=it. Parameter URL tidak dianjurkan, karena mereka sulit bagi mesin pencari untuk menafsirkan.

Secara pribadi, saya ingin menggunakan subdirektori dengan kombinasi dengan gTLD. Subdomain adalah sebagian besar yang digunakan untuk memisahkan konten yang benar-benar berbeda. Karena situs web multibahasa pada dasarnya adalah terjemahan dari konten yang sama (sebagian besar), subdirektori adalah solusi yang jelas.

Anda dapat menggunakan bahasa dalam URL, misalnya:

• website.com untuk standar versi AS.
• website.com/uk/ untuk versi Inggris.
• website.com/es/ untuk pengunjung yang berbahasa Spanyol.

Atau menggabungkan bahasa dan lokasi:

• website.com/en-us/ untuk pelanggan di AS yang berbicara bahasa Inggris.
• website.com/en-uk/ untuk pelanggan di Inggris yang berbicara bahasa Inggris.
• website.com/es-us/ untuk pelanggan di AS yang berbicara bahasa Spanyol.

Konten Duplikat

Untuk mencegah masalah konten duplikat, lebih baik untuk mengidentifikasi versi yang lebih disukai untuk setiap bahasa/lokasi. Kita dapat menggunakan elemen link HTML sederhana ini, yaitu rel="alternate" hreflang="x". Beberapa tag hreflang harus digunakan pada sebuah halaman; satu yang mereferensi ia sendiri dan link untuk setiap alternatif.

Pada halaman web, kodenya yang mungkin terlihat seperti ini:

1

<link rel="alternate" href="example.com" hreflang="en-uk" />

2

<link rel="alternate" href="example.com/us/" hreflang="en-us" />

3

<link rel="alternate" href="example.com/au/" hreflang="en-au" />

Kode ini memberitahu mesin pencari bahwa example.com itu menargetkan yang berbahasa Inggris di Inggris. Itu juga mengatakan bahwa ada dua variasi isi yang sama, yaitu satu untuk AS dan salah satu untuk Australia.

Pertimbangan Lainnya

Ketika merancang situs web multibahasa, ada beberapa hal lain yang perlu dipertimbangkan, seperti:

Tanggal

Tidak setiap negara menggunakan format tanggal yang sama. Kadang-kadang Anda harus mengkonversi tanggal dari kalender Gregorian, misalnya, ke kalender Persia.

Masalah Etika

Negara-negara memiliki perbedaan pandangan etika. Ada sifat seksualitas yang spesifik-budaya, humor, simbolisme, dll. yang mudah diabaikan ketika menerjemahkan sebuah situs web. Sebagai contoh: di negara-negara tertentu itu sangat dapat diterima untuk menunjukkan foto pasangan gay, sementara negara-negara lain mungkin menganggap ini menyinggung.

Captcha

Apakah Anda menggunakan captcha pada situs web Anda? Pastikan bahwa itu dalam bahasa yang sama seperti halaman konten. Sebagai seorang pengunjung Inggris, tidak mungkin Anda akan ingin untuk memecahkan captcha bahasa Rusia.

Nomor Telepon

Bantu pengunjung Anda dengan nomor telepon di situs web Anda, dengan menyertakan kode negara. Anda dapat menemukan daftar semua kode negara pada halaman ini.

Pergi dan Terjemahkan!

Ada banyak pertimbangan-pertimbangan lain ketika mempersiapkan internasionalisasi sebuah situs web lengkap, tapi petunjuk ini seharusnya telah memberikan dasar yang baik untuk bekerja dengannya.  Biarkan kita tahu di komentar tips lain apa yang Anda miliki untuk desain web multibahasa, dan mendaftar untuk newsletter Proyek Terjemahan Tuts+ jika Anda tertarik untuk mendengar apa yang kita lakukan!

Bacaan lebih lanjut

• flagsarenotlanguages.com
• Menggunakan select untuk me-link ke konten lokal di W3C
  
• Pilih Negara, Pilih Bahasa pada UX Magazine
  
• Tentang bahasa dan bendera oleh Gunnar Bittersmann
  
• 13 tips untuk membuat desain web yang responsif multi-bahasa oleh Tom Maslen
• Newsletter Proyek Terjemahan Tuts+
  
• Bendera untuk thumbnail oleh Matt D. Smith