9 نصائح لتصميم موقع ويب متعدد اللغات

في عالم يتسم بارتباط متزايد، أصبحت المواقع الإلكترونية متعددة اللغات أكثر . ولكن ماذا عن تصميمها؟ الأمر أكثر مما قد تتصور، خاصة عندما لكي التغييرات لكي ستحتاج لكي لكي تصميم لكي .

الأساسيات بسيطة — مع Weglot، يمكنك إضافة لغات مختلفة لكي في أقل من 5 دقائق. ولكن بعد لكي في المكان لكي مبدل اللغة، لكي التغييرات لكي عندما ينتقل عندما من اللغة الإنجليزية لكي RTL، واستخدام الألوان والصور والأيقونات المناسبة ثقافيًا.

في هذا الدليل، سنلقي نظرة على بعض أهم اعتبارات التصميم لكي التخطيط لموقع ويب متعدد اللغات يتبع أفضل الممارسات.

1. استخدم قوالب عالمية عشان تحافظ على هوية متسقة لعلامتك التجارية.

عندما شخص إلى موقعك متعدد اللغات، فإنك تريد لكي جربة مستخدم متسقة، بغض النظر عن اللغة التي يصل بها إلى موقعك. وهذا يعني أن الزوار الهنود الذين يزورون موقعك باللغة الإنجليزية يجب أن يروا نفس العلامة التجارية والتصميم الموجودين في النسخة الهندية.

لا يمكنك منع الزوار ثنائيي اللغة أو متعددي اللغات من رؤية الإصدارات المختلفة لموقعك متعدد اللغات، ولكن يمكنك التأكد من أنهم يرون نفس العلامة التجارية والتصميم وعناصر تصميم الويب عندما من اللغة الافتراضية.

إذا كنت تستخدم نظام إدارة محتوى، مثل WordPress، مع Weglot فسيكون من السهل إنشاء موقع ويب متعدد اللغات متسق. Weglot يتكامل Weglot بسلاسة مع سمة منشئ موقع الويبالخاص بك ويترجم المحتوى الخاص بك تلقائيًا. كما سوف يتكامل مع جميع الأجزاء المهمة الأخرى من وظائف موقعك، مثل المكونات الإضافية للتجارة الإلكترونية - مما يعني أنه لا يوجد سبب لكي سمات أو تصميمات مختلفة للغات المختلفة التي تضيفها لكي موقع الويب متعدد اللغات لكي .

على مثل، عندما تزور صفحة Airbnb الرئيسية من بلد مثل أستراليا...

... ثم قم بالتبديل لكي التصميم والعلامة التجارية متسقان في اللغتين.

فقط التصميم الذي يمكن التعرف عليه على الفور فقط تعزيز علامتك التجارية فقط بل سيساعدك أيضًا في التحديثات المستقبلية لموقعك متعدد اللغات ويقلل من عندما تتطلب اللغات عندما إجراء تغييرات على واجهة المستخدم أو تجربة المستخدم.

2. اجعل مبدل اللغة سهل الاستخدام حقًا لكي

حط قائمة تبديل اللغات المنسدلة في مكان واضح بصفحتك الرئيسية وكل صفحات موقعك. راح تلاحظ إن المواقع متعددة اللغات بتحط زر تبديل اللغات في رأس الصفحة أو ذيلها.

أيًا كان الخيار لكي تقرره لموقعك متعدد اللغات، تأكد من أنه سهل لكي .

ستحتاج أيضًا لكي من أن خيارات تبديل اللغة واضحة تمامًا. من لكي لكي جديدة بلغتها الأصلية. على مثل، استخدم "Deutsch" بدلاً من "German" و"日本語" بدلاً من "Japanese".

أسانـا، مثلاً، تستخدم قائمة منسدلة فيها أسماء اللغات المختلفة المتوفرة:

تريد لكي زوار لكي متعدد اللغات يشعرون بالترحيب، بغض النظر ما يتحدثونها. وضع مفتاح تبديل اللغة في مكان يسهل لكي سيساعدك على تحقيق ذلك.

3. خلي الزوار يختاروا لغتهم المفضلة

قد تعتقد أن السماح للمستخدمين باختيار لغتهم المفضلة أمر بديهي، ولكن العديد من المواقع متعددة اللغات تجعل من الصعب حقًا لكي اللغة. بدلاً من ذلك، تجبر المستخدمين لكي المناطق.

العلامات التجارية الكبرى هي الأسوأ في هذا المجال. غالبًا ما تجد العديد منها تجبرك لكي منطقة موقعها متعدد اللغات (أي التبديل من www.adobe.com لكي www.adobe.com/us/) عندما فقط لكي اللغة الافتراضية.

مجرد أن شخص الهندية لا يعني أنه لكي لكي المنطقة لموقع الويب متعدد اللغات الخاص بشركة ما. ما كان يعيش في نيويورك لكي من الموقع الأمريكي، ولكنه يريد لكي الموقع باللغة الهندية؟ لا تضع حاجزًا لكي من موقع الويب متعدد اللغات الخاص بك — ساعده في الوصول إلى المحتوى الخاص بك باللغة التي يفضلها.

فيما يلي مثل شركة تتيح للزوار اختيار لغتهم المفضلة — تعرض Uber خيارات تبديل اللغة في تذييل الصفحة:

عندما "الإنجليزية"، يظهر نافذة منبثقة تتيح لك اختيار لغتك المفضلة بين الإنجليزية والفرنسية:

مايميز تصميم Uber لتبديل اللغة هو أنه يتيح للزوار لكي لغتهم المفضلة دون إجبارهم لكي المنطقة.

إذا كنت ترغب لكي تجربة المستخدم لزوار موقعك، ففكر في "تذكر" لغتهم الافتراضية بحيث يتم تحميل موقعك متعدد اللغات تلقائيًا بلغتهم الأم عند زيارتهم له في المرة القادمة.

الكشف التلقائي عن اللغات

ستقوم العديد من المواقع متعددة اللغات بالكشف عن اللغة الأصلية لمتصفح الويب لكي تحدد لكي اللغة الأساسية للمستخدمين.

على الرغم من أن هذا يوفر بعض الوقت للمستخدمين، إلا أن تقديم ترجمات تلقائية باستخدام خاصية الكشف عن اللغة ليس علمًا دقيقًا. من المهم لكي في اعتبارك المستخدمين الذين قد يصلون إلى النسخة "الخاطئة" من موقعك الإلكتروني متعدد اللغات.

ممكن يكون الزائر موجود فعلياً في إسبانيا وموقعك متعدد اللغات بيكشف هالشي ويعرض الإسبانية، بس ممكن يكون يتكلم الإنجليزية كلغة أم وما يعرف يقرا الإسبانية.

لذا، إذا كنت لكي المواقع، فقم أيضًا بتوفير أداة لتبديل اللغة حتى يتسنى للزوار لكي لغات مختلفة.

Weglot خيار لكي زوار موقعك لكي لكي . شاهد Weglot عمله على موقعك الإلكتروني من خلال تجربة مجانية لمدة 14 يومًا.

الأعلام مقابل أسماء اللغات

غالبًا ما تُستخدم العلامات لكي لغة ما، ولكن هناك بعض المسائل السياقية لكي يجب لكي في اعتبارك:

• الأعلام تمثل الدول، مو اللغات.
• يمكن أن يكون لدولة ما أكثر لغة رسمية واحدة.
• يمكن التحدث بلغة ما في أكثر بلد واحد.
• ممكن الزوار ما يتعرفوا على علم (بسبب حجم الأيقونة) أو ممكن يتلخبطوا بسبب الأعلام المتشابهة.

في النهاية، تريد لكي خيارات لتبديل اللغة تكون سهلة لكي بأي لغة.

4. حط في بالك تمدد النص

عندما يتم ترجمة عندما من لغة لكي ، كما هو الحال مع Google Translate، فإن طول النص الأصلي والترجمة الناتجة سيكونان مختلفين. قد يشكل هذا تحديًا عندما لكي التصميم الخاص بك.

بعض اللغات المكتوبة أكثر من غيرها. فاللغات مثل اليابانية والصينية تستخدم حرفًا واحدًا أو حرفين لكي معلومة ما، بينما في لغات أخرى، تحتاج إلى عدة كلمات.

اللغات مثل الإسبانية والإنجليزية غنية بالكلمات، وتحتاج أحيانًا إلى أكثر بنسبة تزيد عن 30٪ مقارنة باللغات الأخرى.

يقدم دليل W3C لكي بحجم لكي في الترجمة، والذي نوصي بشدة بقراءته بالكامل، بعض النصائح الرائعة.

W3C توضح ليش مهم جداً إن أدوات الترجمة الآلية يكون فيها عناصر واجهة مستخدم تتكيف، زي الأزرار، وحقول الإدخال، والنصوص الوصفية.

على مثل، عندما تمت ترجمة عندما إلى لغات مختلفة، كان لكي المصممين لكي النص الموجود أسفل الصور والذي يشير إلى عدد المشاهدات.

الجدول اللي تحت بيوريك قد إيه كلمة "view" بتختلف في طولها بين اللغات المختلفة، مقارنةً بالإنجليزية الأصلية:

هذا يمثل زيادة بنسبة 300٪ عن اللغة الإنجليزية لكي !

الشيء لكي هنا هو أن النص عادةً ما يتمدد أو يتقلص في العرض، لذا تأكد من أن موقعك الإلكتروني متعدد اللغات يأخذ ذلك في الاعتبار. ضع في اعتبارك أيضًا أنه كلما كان النص المصدر أصغر، كلما كانت الترجمة المحتملة أطول. إذا وجدت أن المساحة تشكل مشكلة، فجرب ترجمة مختلفة وأقل حرفية، أو قم بتغيير حجم الخط بناءً على اللغة الجديدة.

يعد ارتفاع الحروف والسطور عاملاً آخر يجب أخذه في الاعتبار. من الشائع لكي الحروف غير اللاتينية أطول بكثير من الحروف اللاتينية. كما تحتاج النصوص المكتوبة بخطوط مثل العربية إلى مساحة أكثر بين السطور لكي .

5. فكر في توافق خطوط الويب والترميز

يقول W3C أنه يجب عليك دائمًا تحديد ترميز صفحات الويب الخاصة بك. ويوصي باستخدام UTF-8 لكي من عرض الأحرف الخاصة بشكل صحيح بغض النظر عن اللغة.

إليك كيفية لكي إعلان UTF في رأس صفحاتك:

يجب لكي جميع الخطوط التي تستخدمها على الويب متوافقة مع جميع اللغات غير الإنجليزية التي يدعمها موقع WordPress متعدد اللغات الخاص بك، خاصة بالنسبة للغات غير اللاتينية. وهذا يعني أن الخطوط التي تستخدمها يجب أن تحتوي على جميع الأحرف والرموز اللازمة.

قد تدعم بعض الخطوط النصوص اللاتينية ولكنها لا تدعم RTL أو السيريلية، لذا تحقق من تضمين اللغات غير الإنجليزية التي تحتاجها قبل لكي أي خطوط.

تتيح لك Google Fonts، على مثل، تحديد اللغات قبل تنزيل حزمة الخطوط:

يمكن أن تتألف لغة واحدة من مئات الأحرف، مما قد يجعل ملفات الخطوط كبيرة الحجم — لكي أمر آخر لكي في الاعتبار عندما الخطوط لموقعك الإلكتروني متعدد اللغات.

6. تصميم للغاتلكي

قد ينطوي تصميم الصفحات للغاتلكي اليسار على بعض التحديات. كما كتب مطور SteelKiwi روبرت دوديس في مجلة Smashing Magazine، فإن التصميم للغات التي تكتب من اليمين إلى اليسار يعني "قلب الواجهة".

على مثل، إليك ما تصميم ما لكي:

وهذا هو ما تصميم ما لكي باللغة العربية:

لاحظ حتى شريط التمرير بيتغير مكانه!

عليك لكي عكس تصميمك إذا كنت تصمم للغات LTR و RTL.

نوصي بشدة بقراءة مقال روبرت في مجلة Smashing Magazine للحصول على شرح مفصل حول لكي للغات RTL. لا نريد لكي العجلة هنا، لذا اقرأ دليله التعليمي. نريد لكي كيف Weglot اللغات RTL ويجعل عملية الترجمة سهلة لموقعك متعدد اللغات.

تدعم خدمة الترجمة Weglotاللغات RTL، ويمكنك باستخدام قواعد CSS تكييف تصميم موقعك متعدد اللغات لكي معها. فيما يلي بعض اللغات RTL المتاحة:

• العربية (ar)
• العبرية (he)
• الفارسية (fa)
• الأردية (ur)

بعد إضافة لغة RTL لكي متعدد اللغات باستخدام Weglot يمكنك تخصيص طريقة عرضها من خلال تطبيق قواعد CSS لكي . في إدارة WordPress، انتقل لكي Weglot تصميم زر اللغة (اختياري) وانتقل لأسفل لكي تجاوز CSS. أضف أي قواعد CSS تريدها في منطقة النص — قد ترغب لكي الخط والحجم وارتفاع السطر أكثر لكي اللغة الأساسية لكي تصميمك.

هذا كل ما عليك لكي لكي لغات RTL وتصميمها باستخدام Weglot! يمكنك قراءة أكثر كيفية Weglot للغات RTL في الوثائق.

7. استخدم صور وأيقونات مناسبة ثقافيًا

الصور والأيقونات والرسومات الأخرى هي عناصر أساسية في أي صفحة ويب. لكن العناصر المرئية بطبيعتها ذاتية ويمكن تفسيرها بطرق مختلفة عندما في سياق ثقافي آخر.

على سبيل المثال، النسخة الفرنسية من الصفحة الرئيسية لـ Clarins بتعرض امرأة قوقازية:

ولكن عندما الصفحة الرئيسية للشركة باللغة اليابانية، تظهر صورة لامرأة يابانية:

الصور لكي أيضًا. فالصور التي قد تبدو بريئة لكي قد تكون محرمة في بلد آخر. على سبيل المثال، الصور التي تصور أزواجًا مثليين أو المساواة بين الجنسين لن تكون مقبولة في البلدان التي لا تزال فيها المثلية الجنسية غير قانونية وحقوق المرأة غير معترف بها بالكامل.

ستحتاج أيضًا لكي العناصر الصغيرة، مثل الرموز، ما للأشخاص من مناطق معينة الذين يزورون موقعك متعدد اللغات. على سبيل المثال، رمز الكرة الأرضية بالنسبة للجمهور الأسترالي الناطق باللغة الإنجليزية سيبدو مختلفًا تمامًا بالنسبة للمستخدمين في إفريقيا:

الرمز الثالث أعلاه يشير إلى كرة أرضية ولكنه لا يظهر بلدًا أو منطقة معينة، مما يجعله أكثر للاستخدام على موقع ويب متعدد اللغات.

ستحتاج لكي الصور والعناصر الرسومية الأخرى، مع مراعاة أي حساسيات إقليمية وثقافية.

تجنب استخدام الصور والرسومات الأخرى التي تحتوي على نصوص مضمنة. لن تتمكن لكي النصوص المضمنة باستخدام أدوات مثل Weglot لذا تجنبها تمامًا.

8. استخدم ألوان مناسبة ثقافياً

الطريقة اللي بتشوف فيها الثقافات المختلفة الألوان وبتفسرها بتختلف بشكل كبير حول العالم.

مثلاً، في الثقافة الغربية، الأحمر بيرمز للحب والطاقة والشغف والخطر. أما في الثقافات الآسيوية، فهو لون مهم جداً، بيرمز للحظ الجيد والرخاء والاحتفال والعمر الطويل. وعلى العكس، في بعض الدول الأفريقية، الأحمر مرتبط بالموت والعدوان.

يعتبر اللون الأزرق الخيار الأكثر أمانًا والأكثر قبولًا عالميًا في التصميم نظرًا لارتباطه بالعديد من المعاني الإيجابية. إنه لون مهدئ يعتبر لكي وهادئًا، على الرغم من ارتباطه أيضًا بالحزن والاكتئاب. كما أن اللون الأزرق هو اللون الأكثر شيوعًا في شعارات البنوك لأنه يمثل الثقة والسلطة.

عندما الألوان لتصميم موقعك متعدد اللغات، تأكد من لكي الرمزية المرتبطة بأي ألوان تخطط لكي .

9. التواريخ والتنسيقات الأخرى

لا تستخدم جميع البلدان نفس تنسيق التاريخ، حتى في اللغة الإنجليزية. على مثل، من الشائع في المملكة المتحدة وأوروبا لكي التاريخ على النحو لكي : التاريخ-الشهر-السنة، بينما في الولايات المتحدة يتم تنسيقه على النحو التالي: الشهر-التاريخ-السنة.

قد تحتاج أيضًا لكي وحدات القياس، مما يساعد في تحسين محركات البحث (SEO)، اعتمادًا على جمهورك المستهدف. في حين أن 90٪ من العالم يستخدم النظام المتري، لا تزال الولايات المتحدة وليبيريا وميانمار تستخدم النظام الإمبراطوري للأوزان والمقاييس.

اختيار إضافة الترجمة المناسبة لـ WordPress لتصميمك

تتوفر ملحقات ترجمة WordPress بجميع الأشكال والأحجام، وتختلف طريقة عملها مع تصميمك الخاص بشكل كبير. أحد الحلول التي تضمن لكي السلس مع موقعك متعدد اللغات هو Weglot.

يمكنك حتى استخدام Visual Editor Weglot Visual Editor لكي المحتوى الخاص بك على الواجهة الأمامية لموقعك وعبر النطاقات الفرعية حتى تتمكن من رؤية كيف يبدو في سياق تصميم موقعك وتخطيطه، لكي Translate.

مع Weglot يمكن تخصيص تصميم وموقع مبدل اللغة بنسبة 100٪. تم تصميم الزر الافتراضي لكي أي موقع، ولكن يمكنك أيضًا تخصيصه عبر CSS مخصص لكي أي تنسيق تريده.

أكثر، Weglot مبادئ التصميم الموضحة في هذا المنشور، بما في ذلك:

• استخدام قالب عالمي عشان تكون علامتك التجارية متناسقة
• توفير خياراتلكي لتبديل اللغة
• تمكين الزوار لكي لغتهم المفضلة
• ترميز UTF تلقائي
• دعم اللغات اللي بتنكتب من اليمين لليسار (RTL)

خلينا نشوف أهم ميزة متعلقة بالتصميم يقدمها Weglot: تخصيص زر تبديل اللغات الخاص بك.

تخصيص خيارات تبديل اللغات في موقعك مع Weglot

بعد تثبيت Weglot على موقع WordPress متعدد اللغات الخاص بك وإعداده، سيُطلب لكي مفتاح API الخاص بك واللغة الافتراضية واللغة التي ترغب لكي المحتوى إليها، مثل Google Translate.

إذا لم يكن لديك Weglot بالفعل، فستحتاج لكي حساب لكي مفتاح API الخاص بك.

بمجرد حفظ التغييرات، قم بتحديث الواجهة الأمامية لموقعك الإلكتروني متعدد اللغات الجديد وسترى مبدل لغة جديد في الزاوية اليمنى السفلية. عندما عليه، سيتم توسيعه لكي اللغات المتاحة، لكي يسمح لك لكي الترجمة المفضلة لديك.

لكي إجراء التخصيصات الأساسية، انتقل لكي Weglot تصميم زر اللغة (اختياري). في هذه الشاشة، يمكنك اختيار:

• سواء لكي قائمة منسدلة أم لا
• سواء لكي العلامات أم لا
• أنواع الأعلام
• لكي اسم اللغات
• لكي تعرض لكي رمز اللغات

قسم تجاوز CSS هو المكان الذي يمكنك فيه تطبيق قواعد CSS لكي شكل مبدل اللغة على موقعك متعدد اللغات. على مثل، يمكنك:

• إزالة السهم من الزر
• غيّر لون الخلفية
• أضف شريط تمرير
• أزل الحدود
• أضف مسافة داخلية

Weglot بتقدم بعض الأمثلة في هذي المقالة عن تخصيص تصميم زر اللغة.

عندما بالتمرير لأسفل شاشة التكوين لـ Weglot ستجد تعليمات حول لكي مبدل اللغة:

• في القائمة. انتقل لكي -> القوائم واسحب رابط Weglot Custom وأفلته في المكان الذي تريده.
• كأداة مصغرة. انتقل لكي -> الأدوات المصغرة واسحب أداة Weglot المصغرة وأفلتها في المكان الذي تريده.
• باستخدام رمز قصير. استخدم Weglot [ weglot] (بدون مسافات) لكي مبدل اللغة في المكان الذي تريده.
• في الكود المصدري. تقدر تضيف الكود اللي جاي ده في أي مكان تحبه في الكود المصدري لصفحة الـ HTML بتاعتك:

<div id=”weglot_here”></div>

لكي لك كيف يمكن تخصيص مبدل اللغة على موقع ويب متعدد اللغات (سواء كان موقع WordPress أو Shopify أو أي نوع آخر من مواقع الويب)، يمكنك أن ترى أدناه كيف يعرض Patyka مبدل اللغة في الزاوية العلوية اليسرى من الصفحة.

يتم عرض اللغات باستخدام أسمائها، عندما زر التبديل وتختار لغة ما، يتم تحديث محتوى الصفحة وترجمته إلى اللغة التي اخترتها.

دراسة حالة: Maestrooo بتستخدم Weglot

تأسست Maestrooo سنة 2013، وهي وكالة لتطوير الويب مقرها فرنسا، ومن ضمن عملائها From Future و Patyka. وحاليًا، Maestrooo بتدير أغلب عملاء Shopify Plus في فرنسا.

كان Maestrooo يبحث عن حل موثوق ومتعدد اللغات لموقعه الإلكتروني، بحيث يمكنه التكيف بسهولة لكي متطلبات لكي . بعد اختبار العديد من الحلول واكتشاف مشاكل في إدارة SEO أو hreflang، اكتشف الفريق Weglot.

Weglot بترجم كل المحتوى في مواقع عملاء Maestrooo، سواء كان محتوى ديناميكي، أو محتوى تم إنشاؤه بواسطة تطبيقات تانية، أو حتى عملية الدفع، كل ده بدون ما يأثر على تصميم موقعهم متعدد اللغات.

بالإضافة لكي مواقع ويب مخصصة للعملاء، تقوم Maestrooo أيضًا بتطوير السمات الرسمية لمتجر Shopify Theme. في حين أن حلول مواقع الويب متعددة اللغات الأخرى غالبًا ما تفسد تنسيق سمات Maestrooo، Weglot حل ترجمة يعمل في كل مرة.

Maestrooo بتساعد ما بين 8,000 و 12,000 عميل يبدأوا مع Shopify كل سنة باستخدام Weglot لموقعهم متعدد اللغات.

خليك جاهز لتحسين ثقافي كامل مع تصميم متوافق محليًا

كل مبدأ من مبادئ التصميم التي استكشفناها في هذا المنشور سيضعك على المسار الصحيح لكي موقع ويب متعدد اللغات يبدو رائعًا ويوفر تجربة مستخدم ممتعة.

لكي لزوار موقعك وعملائك تجربة متميزة بلغتهم الأم، من المهم أيضًا أن تنظر إلى ما هو أبعد من موقعك الإلكتروني متعدد اللغات. فكر في ترجمة موادك التسويقية ودعم العملاء.

كما يجب أن تأخذ في الاعتبار سرعة وأداء موقعك متعدد اللغات. في بعض البلدان التي لا لكي إنترنت لكي تنزيل حزم لغات كبيرة الحجم يجعل أكثر على الزوار لكي المحتوى الخاص بك.

باستخدام المكون الإضافي المناسب لترجمة المواقع الإلكترونية متعددة اللغات وتصميم الموقع الذي يوفر خيارات ترجمةلكي، ستساعد العملاء من خلال واجهة مستخدم وواجهة مستخدم جذابة بصريًا بلغتهم المفضلة. Weglot مجانًا من خلال الإصدار التجريبي المجاني لمدة 14 يومًا، أو قم بالتسجيل للحصول على جولة تعريفية بالمنتج مجانًا!