اطّلع على أفضل ممارساتك تصميم موقع Squarespace متعدد اللغات

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

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

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

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

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

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

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

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

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

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

تعرف أكثر أفضل ممارسات تحسين محركات البحث متعددة اللغات هنا:

باستخدام حل متكامل، مثل 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، يتم تمرير صور البانر التي تملأ الشاشة ببطء قليل مقارنة ببقية محتوى صفحتك.

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

ما هي ما الرائعة في Brine؟ إنه متعدد اللغات.

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

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

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

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

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

في حين أن تطبيقات مثل Weglot ترجمة البيانات الوصفية المرتبطة بصورك — مثل أسمائها وتعليقاتها والكلمات المفتاحية التي تصفها وتسمح لها لكي على محركات البحث مثل Google Images — إلاأن النص الموجود داخل صورة ثابتة ( عادةً بتنسيق 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 القياسي Weglot محايد إلى حد كبير، فقد ترغب لكي العلامة التجارية لموقعك متسقة قدر الإمكان، وأفضل طريقة لكي يكون زر اللغة جزءًا من هذه الاستراتيجية هي تضمينه في قائمة التنقل الرئيسية.  

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

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

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

العودة لكي : أربعة دروس رئيسية لنجاح Squarespace متعدد اللغات

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

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

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

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

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

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

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