تصميم مواقع بالعربية والإنجليزية
نصمم ونطور مواقع بالعربية والإنجليزية للشركات في مصر والخليج. نخطط للمحتوى والخطوط والتخطيط ومسارات التواصل في اللغتين معًا، لتقدم علامتك تجربة متسقة.
العربية الجيدة تبدأ من المعنى.
يحتاج المحتوى العربي إلى صياغة تناسب الجمهور وطبيعة الشركة. ننطلق من الرسالة والهدف، ثم نكتب عناوين وفقرات واضحة بدل نقل ترتيب الجملة الإنجليزية حرفيًا.
ويحتاج التصميم إلى المراجعة بالمحتوى العربي الفعلي: اتصال الحروف، وارتفاع السطور، والأرقام، والعناوين الطويلة. تظل أرقام الهاتف واضحة للاتصال، ولا تدفع فواصل السطور الأزرار خارج مواضعها.
تُكتب كل لغة بما يناسب قارئها، وتُختبر داخل التصميم. يوضح متجر البدوي كيف يمكن لكتالوج واحد أن يخدم جمهورًا عربيًا وإنجليزيًا.
تخطيط عربي متكامل من اليمين إلى اليسار.
اضبط dir="rtl" لتحديد اتجاه الصفحة. ثم تُراجع محاذاة المحتوى والتنقل والأعمدة والجداول والأسهم بحسب استخدامها. توفر إرشادات W3C حول البنية والنص من اليمين لليسار مرجعًا عمليًا لهذه المراجعة.
تبقى الشعارات والأسماء اللاتينية وأرقام الهاتف والروابط باتجاهها الصحيح. ويُراجع النص المختلط لتظهر علامات الترقيم والأرقام بوضوح. يشرح مرجع W3C للنص ثنائي الاتجاه كيفية التعامل مع النص المختلط.
| ينعكس في العربية | يبقى كما هو تمامًا |
|---|---|
| شريط التنقل والأعمدة الجانبية وشبكة الصفحة | الشعار، ما لم يُصمَّم له نسخة عربية بقصد |
| الهوامش والحشو ومحاذاة النص | أرقام الهواتف، بما فيها مفتاح الدولة |
| ترتيب أعمدة الجداول وعلامات القوائم | عناوين البريد والروابط ومسارات الملفات |
| أسهم الرجوع والتالي وأزرار الشرائح | الأسماء اللاتينية: Google وShopify وفوري وPaymob وInstaPay |
| أشرطة التقدم والمنزلقات | أمثلة الكود وكل ما يُعرض بخط ثابت العرض |
يتيح التخطيط للغتين منذ البداية مراجعة الخصائص مثل left والأيقونات والمكونات ضمن التصميم الأساسي. ويساعد البناء المخصص على ضبط هذه التفاصيل وفق متطلبات المشروع.
خط عربي مختار لسهولة القراءة.
لا تدعم جميع الخطوط اللاتينية الحروف العربية. لذلك نختار خطًا عربيًا ينسجم مع الهوية ويظل واضحًا في العناوين والمتن. تتيح Google Fonts بعد تصفيته على المجموعة العربية استكشاف خيارات مثل IBM Plex Sans Arabic وCairo وAlmarai وTajawal وNoto Kufi Arabic.
نراجع الوزن والحجم وتباعد السطور بالمحتوى الفعلي، مع الحفاظ على اتصال الحروف دون تباعد مصطنع. ثم نحسّن تحميل الخطوط لحماية سرعة الصفحة على هاتف أندرويد متوسط ببيانات الجوال في مصر.
ظهور مستقل لكل لغة في البحث.
توصي جوجل برابط مستقل لكل نسخة لغوية من الصفحة. إذا كان الزر يبدّل النص فقط على الرابط نفسه، فقد لا تكتشف محركات البحث جميع النسخ. نخطط لروابط اللغات مع بنية الصفحات، ثم نربط الصفحات المتقابلة بروابط ووسوم hreflang. راجع إرشادات جوجل للمواقع متعددة اللغات للاطلاع على التوصية.
ننشر الإنجليزية والعربية على روابط مستقلة، لكل منها عنوان ووصف ورابط معياري. ونربط النسخ بوسوم hreflang المتبادلة. يوضح توثيق جوجل للنسخ المحلية أهمية الربط الصحيح بين النسخ.
تختلف عبارات البحث بين العربية والإنجليزية. لذلك تُكتب العناوين والأوصاف والمحتوى وفق ما يحتاجه الجمهور ويبحث عنه. يدخل ذلك ضمن تهيئة الموقع للبحث والذكاء الاصطناعي. ونراجع حدود المنصة للتأكد من دعم الروابط واللغات ووسوم hreflang المطلوبة.
IGBS: موقع واحد بخمس لغات.
تقدم IGBS خدمات الملكية الفكرية والعلامات التجارية والأعمال. بنينا موقعها بخمس لغات، مع تجربة عربية متكاملة: محتوى واضح وخط مناسب وتخطيط من اليمين إلى اليسار وروابط مستقلة للغات. ولتقييم أي موقع بلغتين، جرّب التنقل والنماذج وفواصل السطور على الهاتف في كل نسخة.
ولمسار شراء مختلف، يجمع متجر البدوي باللغتين تفاصيل المنتجات والمجموعات والشراء بالعربية والإنجليزية. قارنه مع موقع خدمات IGBS؛ فعمل اللغات يخدم الصفحات التي يحتاجها عميل كل نشاط.
ما نتفق عليه لموقعك باللغتين
نتفق على الصفحات المطلوبة باللغتين، ومن يُعد المحتوى ويعتمده، وكيف ينتقل الزائر بين الصفحات المتقابلة. بذلك يخدم تبديل اللغة من يقرأ صفحة خدمة أو يرسل استفسارًا.
- خريطة تربط الصفحات العربية والإنجليزية المتقابلة وتوضح أي محتوى مخصص لجمهور واحد.
- خط عربي ومكونات من اليمين لليسار نراجعها بالعناوين وأسماء الخدمات وأرقام الهاتف والبريد الفعلية.
- روابط وعناوين وأوصاف مستقلة للغات، مع مراجعة الروابط المعيارية ووسوم hreflang للصفحات المتقابلة.
- مراجعة التنقل والنماذج ورسائل التأكيد في كل لغة، على الهاتف والكمبيوتر.
كيف نراجع النسختين
نبدأ بخريطة الصفحات ومسؤوليات المحتوى في النطاق المكتوب. نراجع التصميم باللغتين، ثم الصفحات أثناء التنفيذ ومسار الاستفسار قبل الإطلاق. ونتفق على التسليم وأي تحديثات مستمرة للمحتوى ضمن نطاق الموقع.
ما نراجعه قبل إطلاق موقع بلغتين
- لكل لغة رابط وعنوان ووصف مستقل، مع رابط للصفحة المقابلة باللغة الأخرى.
- تعمل قوائم التنقل والنماذج ورسائل التأكيد باللغتين، وتظل أرقام الهواتف وعناوين البريد واضحة.
- تُراجع العناوين والأزرار وفواصل السطور العربية على الهاتف بالمحتوى الفعلي.
- يُختبر مسار الاستفسار من صفحة الخدمة حتى تأكيد الإرسال، في نسختي اللغة.
تُدرج هذه المراجعات في نطاق المشروع المتفق عليه. تعرّف على خدمة تصميم المواقع في مصر أو ناقش مشروع موقعك بلغتين.
الأسئلة الشائعة
هل تكفي الترجمة الآلية للنسخة العربية؟
يمكن أن تساعد في إعداد مسودة، لكن المحتوى يحتاج إلى مراجعة المعنى والمصطلحات والنبرة. ثم يُختبر داخل الصفحات والنماذج والتنقل. ويجب أن تملك كل لغة رابطًا مستقلًا يمكن مشاركته والوصول إليه.
ما الذي يتغير في التخطيط العربي؟
تُراجع محاذاة النص والتنقل والأعمدة والجداول والأسهم بما يناسب القراءة من اليمين إلى اليسار. وتبقى الشعارات والأسماء اللاتينية وأرقام الهاتف والبريد والروابط باتجاهها الصحيح.
كيف تختارون الخط العربي؟
نختار خطًا ينسجم مع هوية الشركة ويظل مريحًا في القراءة. ثم نختبر حجمه ووزنه وتباعد سطوره بالعناوين والفقرات الفعلية، مع الحفاظ على اتصال الحروف.
هل تكون النسخة العربية في مجلد فرعي أم نطاق فرعي أم على نطاق مصري؟
للشركة التي تستخدم نطاقًا رئيسيًا واحدًا، يُعد مجلد /ar/ خيارًا عمليًا لأن اللغتين تشتركان في الاستضافة وإدارة النشر. ويمكن أيضًا استخدام نطاق فرعي أو نطاق خاص بدولة؛ يعتمد الاختيار على الأسواق وطريقة إدارة الموقع. تشرح إرشادات جوجل للمواقع متعددة اللغات مزايا كل بنية وقيودها.
هل يفهرس جوجل صفحاتي العربية إن استخدمت زر تبديل بالجافاسكريبت؟
التبديل وحده لا يمنح اللغات روابط مستقلة. ننشر كل نسخة بعنوان ووصف ووسوم ربط مناسبة لتسهيل اكتشافها. وتظل الفهرسة والترتيب خاضعين لأنظمة محركات البحث.
هل تحتاج اللغتان إلى الصفحات نفسها؟
نرتب المحتوى وفق احتياجات كل جمهور. عندما تكون الصفحتان نسختين لغويتين للمحتوى نفسه، نربطهما ببعضهما. وإذا احتاجت خدمة أو مادة إلى لغة واحدة فقط، نتفق على مكانها في التنقل بدل إرسال الزائر إلى صفحة غير مرتبطة.
من يُعد المحتوى العربي ويعتمده؟
نحدد ذلك في النطاق قبل التصميم. شارك النصوص والمصطلحات وإرشادات الهوية المتاحة لنحدد ما يحتاج إلى كتابة أو ترجمة أو مراجعة. ونراجع العربية المعتمدة داخل الصفحات الفعلية، بما يشمل الأزرار والنماذج.