حسّن مهاراتك في استخدام « أفضل الممارسات »: تصميم موقع «Squarespace» متعدد اللغات

لقد عرضنا مؤخرًا بعض الأمثلة الرائعة لمواقع Squarespace التي تحمل علامة « متعدد اللغات ». ما الذي دفعنا لاختيار هذه الصفحات بالتحديد؟ وما الذي يميزها عن غيرها؟

دعونا لا نفرط في الكلام: هذه المواقع جميلة.

لقد قلناها من قبل، وسنقولها مرة أخرى: قوالب Squarespace جذابة من الناحية الجمالية. فاز موقع Squarespace الرئيسي بجائزة Webby (وهي في الأساس واحدة من أعلى الجوائز التي يمكن أن تحصل عليها شركة على الإنترنت) في عام 2017، فقط عززوا علامتهم التجارية منذ ذلك فقط

ومن المنطقي أنه نظرًا لأن موقع Squarespace الرئيسي أنيق للغاية، فإن خيارات إنشاء مواقع المنصة للمستخدمين أنيقة أيضًا. باختصار, يتبع Squarespace قواعده الخاصة.

بصفتك مالكًا لموقع Squarespace، قد تكون مهتمًا بنقل موقعك إلى العالمية -وفي عام 2019 وما بعده، هذا رهان أكيد جدًا، سواء كنت تطلق موقعًا شخصيًا، أو متجرًا للتجارة الإلكترونية(70% من بائعي التجارة الإلكترونية يؤكدون أن البيع عبر الحدود كان مربحًا لهم)، أو موقعًا لشركتك.

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

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

سكويرسبيس متعدد اللغات

إحدى الميزات التي تسهل العمل وتفتقر إليها منصة Squarespace هي وجود حل مدمج لإنشاء موقع موقع Squarespace متعدد اللغات .

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

تعرف على المزيد حول تحسين محركات البحث (SEO) في موقع متعدد اللغات أفضل الممارسات هنا:

باستخدام حل متكامل، مثل Weglot، لإنشاء موقع Squarespace متعدد اللغات يعد حلاً أسرع بكثير وأكثر توفيرًا للطاقة.

تصميم موقع Squarespace الخاص بـ « متعدد اللغات »

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

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

في معظم بيئات تصميم المواقع الإلكترونية البسيطة (مثلاً، إذا كنت تقوم بإنشاء موقع من الصفر)، قد تؤدي ترجمة صفحتك إلى إفساد محاذاة الفقرات وطريقة تفاعل كتل النص مع بعضها البعض. لكن توافقWeglotمع جميع قوالب Squarespace يمنع عمومًا حدوث هذه المشكلة؛ فقد صُممت قوالب Squarespace على يد محترفين لتكون قابلة للتكيف بدرجة عالية.

لكن هذا لا يعني أنه لا توجد بعض المبادئ التوجيهية التي يجب عليك اتباعها من أجل : أ) اختيار القالب المناسب لموقعك على Squarespace الخاص بـ « متعدد اللغات »، و ب) تخصيصه.

سنقوم بجولة في واجهة تصميم Squarespace، مع مراعاة تعدد اللغات.

1. حان وقت استخدام قالب « متعدد اللغات » من Squarespace.

كما ربما تكون قد اكتشفت بالفعل، إذا كنت قد دخلت عالم Squarespace على الإطلاق، فإن معلمات التصميم الخاصة بك يتم تقريبها في قوالب؛ قوالب Squarespace معروفة ببساطتها وثقلها بالصور وتناسبها بشكل جيد لكل من شاشات الهاتف المحمول وشاشات سطح المكتب.

فيما يلي بعض القوالب التي يستخدمها حالياً Weglot العملاء، وقد أثبتت فعاليتها في تحسين موقعك على Squarespace متعدد اللغات:

الميزة: خطوط نظيفة ومتباينة

Forte هو ما يمكن ما تجسيدًا رقميًا لمفهوم White Cube: فهو مصمم لكي وكأنه معرض فني معاصر. كما أنه يتيح لك لكي صور متعددة في عرض شرائح تلقائي في الخلفية على صفحتك الرئيسية.

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

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

التأثير: الاسم يقول كل شيء

ربما تكون السمة المميزة لصفحة Impact هي الحجم الهائل لمساحة العنوان الرئيسي. اسم عملك أو كلمتك الرئيسية رقم 1 هو حقًا نجم العرض على الصفحة الرئيسية لـ Impact.

شاهد كيف عززت المحامية المقيمة في روما وبرلين فالنتينا ماير علامتها التجارية الشخصية، مع الحفاظ على واجهة مترجمة بشكل جميل لكل من عملائها الناطقين بالإيطالية والإنجليزية:

المحلول الملحي: الطاقة لكي

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

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

ما هي المزايا الأخرى الرائعة التي تتمتع بها «برين»؟ إنها متوافقة مع نظام «متعدد اللغات ».

(في الواقع، تم إنشاء أحد نماذج مواقع « متعدد اللغات » الخاصة بـ Squarespace باستخدام «Nueva»، وهو قالب من مجموعة «Brine» — سنتحدث عن ذلك لاحقًا، لكن يمكنك إلقاء نظرة عليه هنا.)

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

2. استخدم كتل نصية أعلى صورك، بدلاً من الصور التي تحتوي على نص.

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

لكن هذه الفكرة ليست جيدة جدًّا إذا كنت تخطط لجعل محتوى موقعك على Squarespace متاحًا على متعدد اللغات.

في حين أن تطبيقات مثل Weglot ترجمة البيانات الوصفية المرتبطة بصورك — مثل أسمائها والتعليقات عليها والكلمات المفتاحية التي تصفها وتسمح بظهورها على محركات البحث مثل «صور جوجل» — إلا أنالنص الموجود داخل الصورة الثابتة ( عادةً بتنسيق JPEG أو PNG أو GIF) لا يمكن ترجمته.

(ومن الجيد أيضًا ملاحظة أن Weglot لوحة التحكم تتيح لك تحميل صور مختلفة لكل لغة من لغاتك؛ لذا إذا أردت إعادة إنشاء صورتك بنص ثابت لكل لغة، فسيكون لديك مكان لربط كل صورة باللغة المناسبة لها.)

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

بدلاً من التصميم المسبق لصورة شعار Squarespace الخاص بك مع النص الموجود عليها بالفعل، مثل هذا...

...تحميل الصورة من تلقاء نفسها:

...استخدم محرر الصور في Squarespace لكي التأثيرات المطلوبة (التشويش، تعديل السطوع، لديهم كل شيء):

...أضف الصورة ك صورة لافتة ( ماموضح في لقطة الشاشة أدناه) أو كصورة خلفية لكتلة، ثم أضف كتلة نصية مباشرة فوقها.

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

نصيحة مفيدة بشأن الصور: على الرغم من أن هذا لا ينطبق دائمًا إذا كنت معتادًا على تصميم مواقع الويب من الصفر (حيث تنص أفضل الممارسات عادةً على أن الصور يجب أن تكون «مُحسَّنة للعرض على الشاشة» من حيث الحجم — أي أنها لا تحتاج بالضرورة إلى دقة عالية جدًّا)، إلا أنه في Squarespace، كلما كانت الصور أكبر حجمًا، كان ذلك أفضل.

تتمحور معظم قوالب Squarespace حول لافتة كبيرة (مثل Brine أو Bedford أو Hyde)، والتي تشغل أحيانًا الصفحة بأكملها على غرار صورة الخلفية (أكثر غرار Keene أو Polaris أو Marta).

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

3. صمم طباعتك حسب الطلب.

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

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

يتميز Squarespace بتصميمه البسيط للغاية، وتبدو معظم قوالب Squarespace في أفضل حالاتها عندما لا تغير الخطوط كثيرًا. سيخبرك معظم المصممين أن هناك ما يُسمى بـ«الإفراط في استخدام الخطوط» (النقطة رقم 9 في قائمة « أفضل الممارسات » الخاصة بالطباعة من Canva تشرح السبب).

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

يمكنك البدء بالتحقق من الخطوط المتاحة على Google Fonts و/أو Adobe Fonts (الأول مجاني — أما بالنسبة لـ Adobe، فعادة لكي يتعين عليك لكي حساب لكي أي خط تريده للاستخدام الشخصي).

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

في Google Fonts، على مثل، يمكنك معرفة الخطوط التي تدعم النصوص المختلفة عن طريق تحديد النص المطلوب في قائمة "اللغة".

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

بمجرد العثور على الخط الذي يدعم كلا الخطين (أو كل الخطوط التي ستحتاجها، تحقق مرة أخرى من أنه متاح داخل Squarespace - يمكنك العثور على قائمة Squarespace الكاملة للخطوط هنا.

4. قم بتخصيص زر تبديل لغة Squarespace الخاص بك.

حدد ما إذا كنت تريد لكي أيقونات الأعلام أم لا.

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

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

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

قم بتضمينها في قائمة التنقل الرئيسية.

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

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

يمكنك القيام بذلك من خلال الانتقال إلى قسم "الصفحات" في محرر موقع Squarespace الخاص بك. تحت "التنقل الرئيسي"، سترى زر "+" الذي يسمح لك لكي زر لكي شريط التنقل الرئيسي؛ انقر فوقه، وسترى نافذة صغيرة تظهر، كما في لقطة الشاشة أدناه:

يمكنك تسمية الرابط باسم اللغة التي سيؤدي إليها، ثم في مربع محتوى «الرابط»، أدخل «#Weglot-» متبوعًا برمز اللغة المكون من حرفين للغة المعنية.

العودة إلى الأساسيات: أربع نقاط رئيسية لنجاح موقع « متعدد اللغات » على منصة Squarespace

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

• اختر قالبك بحكمة. هذا في الأساس هو القرار الأكثر أهمية الذي يتخذه أي مستخدم Squarespace: فاختيارك للقالب يحدد بقية سير عملك. تأكد من اختيار قالب يبدو جيدًا في الترجمة.

• افصل النص عن الصور. تجنب تحميل الصور التي تحتوي على نص بالفعل، إذا كنت تريد لكي المستخدمون لكي ؛ بدلاً من ذلك، قم بتحميل صور خالية من النص كلافتات أو عناصر وسائط واستخدم خيارات Squarespace المتعددة لكي فوقها أو حولها.

• النوع هو المفتاح. استخدم الخطوط المتاحة، على Squarespace، في جميع النصوص التي تحتاجها - سيضمن ذلك اتساق العلامة التجارية عبر موقعك، لجميع زوار موقعك.

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

كما هو الحال مع أي نظام إدارة محتوى آخر، يعمل «Weglot » بشكل ممتاز على منصة Squarespace. جربه اليوم من خلال الإصدار التجريبي المجاني.

اكتشف كيفية تثبيت Weglot على موقع Squarespace الخاص بك .