تصميم مواقع عربية احترافية: دليل الاتجاه من اليمين إلى اليسار والخطوط والمواقع ثنائية اللغة

في هذا الدليل

1. ما الذي يجعل الموقع العربي احترافيًا؟
2. الاتجاه من اليمين إلى اليسار
3. ما الذي لا تعكسه أبدًا
4. الخطوط العربية والأحجام
5. النص المختلط والنماذج والبحث
6. التاريخ والأرقام والعملة
7. الموقع ثنائي اللغة
8. أخطاء شائعة وقائمة اختبار
9. موقعك العربي مع ويبنا
10. أسئلة شائعة
11. الخلاصة

ما الذي يجعل تصميم مواقع عربية احترافيًا؟

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

الموقع العربي الاحترافي يُصمَّم والعربية لغته الأولى، لا لغة مضافة لاحقًا. ويمكن تقسيم العمل فيه إلى أربع طبقات، لكل منها أسئلتها وأخطاؤها:

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

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

الاتجاه من اليمين إلى اليسار: الأساس التقني الصحيح

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

ابدأ من وسم html

توصي مجموعة التدويل في W3C بأن يُضاف الاتجاه dir="rtl" إلى وسم html نفسه حين يكون اتجاه المستند كله من اليمين إلى اليسار، وأن تُعلن اللغة أيضًا بالسمة lang="ar". والسمتان مختلفتان: اللغة لا تحدد الاتجاه، والاتجاه لا يحدد اللغة، فلا تغني إحداهما عن الأخرى. وتنصح المجموعة نفسها بألا يُضبط الاتجاه الأساسي للصفحة عبر CSS، لأن معلومة الاتجاه جزء من المحتوى، ويجب أن تبقى صحيحة حتى لو لم يُحمَّل ملف التنسيق.

والسمة lang تفيد قارئات الشاشة أيضًا، فتنطق النص بصوت عربي صحيح. وفي ووردبريس يُضاف الاتجاه واللغة غالبًا حين تكون لغة الموقع «العربية»، لكن افتح مصدر الصفحة وتأكد بنفسك.

خصائص منطقية بدل اليمين واليسار

أكثر مشكلات القوالب المعرّبة سببها أن تنسيقها مكتوب بالجهات الثابتة: هامش من اليسار، وحشوة من اليمين، وأيقونة مثبتة في الزاوية اليسرى. حين يتغير الاتجاه تبقى هذه القيم في مكانها، فتلتصق الأيقونة بالنص من الجهة الخطأ. الحل الحديث هو الخصائص المنطقية في CSS، التي يشرحها مرجع MDN: بدل «هامش من اليسار» تكتب «هامش من بداية السطر» margin-inline-start، وبدل المحاذاة إلى اليسار تكتب text-align: start. في الصفحة الإنجليزية تعني البداية اليسار، وفي العربية تعني اليمين، دون سطر إضافي.

والخبر الجيد أن أنظمة التخطيط الحديثة مثل Flexbox وGrid تتبع اتجاه الصفحة تلقائيًا؛ فالصف الذي يبدأ من اليسار في الإنجليزية يبدأ من اليمين في العربية. لذلك اسأل من يبني موقعك: هل التنسيق مكتوب بالخصائص المنطقية، أم بملف يقلب القيم يدويًا؟ الطريقة الثانية تنكسر كلما أُضيف عنصر ونسي أحدهم أن يقلبه.

ما الذي ينعكس في الصفحة؟

القاعدة: كل ما يعبّر عن اتجاه القراءة أو ترتيب الخطوات ينعكس. وهذه أهم العناصر التي تفحصها في أي تصميم عربي:

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

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

ما الذي لا تعكسه أبدًا؟

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

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

الخطوط العربية: الاختيار والحجم وارتفاع السطر

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

كيف تختار الخط العربي؟

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

من الخطوط المجانية المتاحة في Google Fonts والمستخدمة كثيرًا في المواقع العربية: Tajawal وCairo وAlmarai وIBM Plex Sans Arabic وNoto Naskh Arabic وNoto Kufi Arabic. لا يوجد خط «صحيح» واحد؛ اختر خطًا أو خطين على الأكثر، وجرّبهما على نصك الحقيقي قبل الاعتماد. أما خطوط الخط العربي التقليدي كالثلث والديواني فجميلة في الشعار أو في عنوان مصمم كصورة، لكنها لا تصلح للنصوص ولا للقوائم.

الحجم وارتفاع السطر

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

نوع النص	حجم مقترح للبداية	ارتفاع السطر	ملاحظة
نص الفقرات	17 إلى 18 بكسل	1.7 إلى 1.9	لا يقل عن 16 بكسل على الجوال
العنوان الرئيسي	32 إلى 44 بكسل	1.3 إلى 1.4	وزن عريض، وسطران كحد أقصى
العناوين الفرعية	22 إلى 26 بكسل	1.4 إلى 1.5	فرق واضح عن النص لا يعتمد على اللون
الأزرار والقوائم	16 إلى 18 بكسل	1.4	وزن متوسط، ومساحة لمس مريحة
الملاحظات الصغيرة	14 إلى 15 بكسل	1.6	لا تستخدمها لمعلومة مهمة كالسعر

وطول السطر يهم أيضًا: اجعل عمود النص بعرض محدود على الشاشات الكبيرة، فالسطر الممتد يُتعب العين.

ما لا يناسب العربية من عادات التصميم الإنجليزي

• التباعد بين الحروف: العربية خط متصل، والحروف المتصلة لا يُباعد بينها. تشير متطلبات W3C للتخطيط العربي إلى أن تقريب الحروف المتصلة أو إبعادها يعطي نتائج غير مرغوبة. احذف أي تباعد ورثته من عناوين القالب الإنجليزي.
• الخط المائل: لا يوجد في معظم الخطوط العربية شكل مائل حقيقي، فيميل المتصفح الحروف آليًا فتبدو مشوهة. للتأكيد استخدم الوزن العريض أو اللون.
• ضبط النص من الطرفين: في المطبوعات العربية تُستخدم الكشيدة لملء السطر، لكن دعمها في المتصفحات محدود، فيُملأ السطر بمسافات واسعة بين الكلمات. المحاذاة إلى بداية السطر أنظف على الشاشة.
• التطويل اليدوي: كتابة «مـــرحبًا» بحرف التطويل لتجميل العنوان تكسر البحث والنسخ وقراءة قارئات الشاشة، ولا تُعرض بالشكل نفسه في كل خط.

الخط والسرعة

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

النص المختلط: العربية والإنجليزية في سطر واحد

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

أمثلة تراها كثيرًا

• جملة «خبرة في C++ وPHP» قد تظهر فيها علامتا الزائد قبل الحرف C بدل أن تأتيا بعده.
• رقم الجوال الدولي يبدأ بعلامة الزائد ثم 966، لكنه في سطر عربي قد يظهر والعلامة في آخره.
• اسم باقة إنجليزية بين قوسين مثل (Pro Plan) قد تنقلب أقواسه أو تبتعد عن الكلمة.
• عنوان إنجليزي ينتهي بعلامة استفهام داخل فقرة عربية قد تنتقل علامته إلى الجهة الأخرى من العبارة.

الحل الذي توصي به W3C أن تُحاط كل عبارة معاكسة الاتجاه بوسم يحدد اتجاهها، مثل عنصر span بالسمة dir="ltr"، أو عنصر bdi الذي يعزلها عما حولها. أما الرموز غير المرئية التي تتحكم في الاتجاه فتُستخدم فقط حيث لا يمكن استخدام الوسوم، كعنوان الصفحة الذي يظهر في تبويب المتصفح، لأنها خفية ويصعب تتبعها وصيانتها. وعمليًا، اطلب أن يُضبط اتجاه العناصر الثابتة كرقم الجوال والبريد في القالب نفسه، حتى لا تتذكر ذلك كل مرة.

الحقول والنماذج

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

1. عناوين الحقول ورسائل الخطأ بالعربية وفي جهة اليمين، بما فيها الرسائل التي يعرضها المتصفح افتراضيًا؛ فهي تظهر بلغة المتصفح لا بلغة موقعك ما لم تُخصَّص.
2. حقول البريد والجوال والروابط من اليسار إلى اليمين، مع بقاء عنوان الحقل عربيًا. فالبريد يُكتب ويُقرأ باللاتينية، وكتابته في حقل عربي الاتجاه تجعل المؤشر يقفز بشكل مربك.
3. الحقول الحرة مثل الاسم والملاحظات بالسمة dir="auto" كما تنصح W3C، فيتبع الحقل لغة أول حرف يكتبه العميل، عربيًا كان أو إنجليزيًا.
4. نوع الحقل المناسب: حقل الجوال من نوع الهاتف يفتح لوحة أرقام على الجوال، وحقل البريد من نوع البريد يُظهر علامة @ في لوحة المفاتيح.
5. اقبل الأرقام بالشكلين: كثير من العملاء تكون لوحة مفاتيحهم عربية فيكتبون ٠٥٥ بدل 055. حوّلها في الخلفية إلى أرقام موحدة بدل أن ترفض الطلب برسالة خطأ.

البحث داخل الموقع بالعربية

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

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

التاريخ الهجري والميلادي والأرقام والعملة

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

أي الأرقام تستخدم؟

تذكر متطلبات W3C للتخطيط العربي أن الأرقام الأوروبية، أي 0 إلى 9، تُستخدم في البلدان العربية الغربية، وأن الأرقام العربية الهندية، أي ٠ إلى ٩، تُستخدم في المشرق العربي. وفي السعودية ترى الشكلين: الأرقام الهندية حاضرة في كثير من المطبوعات واللوحات، والأرقام اللاتينية منتشرة في الواجهات الرقمية. للموقع نقترح الأرقام اللاتينية في الغالب، لأنها ما يظهر في لوحات المفاتيح وفي تطبيقات الاتصال والخرائط، فينسخ العميل رقمك ويلصقه دون مشكلات. وإن اخترت الأرقام الهندية لأسباب تتعلق بالهوية، فطبقها في كل مكان، واحرص على أن تكون روابط الاتصال في الخلفية بأرقام لاتينية.

والفواصل تتبع نوع الأرقام: مع الأرقام اللاتينية تُستخدم الفاصلة للآلاف والنقطة للكسور، مثل 2,990 و1.5، ومع الأرقام الهندية فاصل الآلاف العربي ٬ وفاصل الكسور ٫. والخلط بينها يربك القارئ، فقد يقرأ 1.500 على أنها ألف وخمسمئة أو واحد ونصف.

الهجري أم الميلادي؟

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

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

جدول صيغ مقترحة

البيان	صيغة العرض المقترحة	ملاحظة
الجوال للعرض المحلي	05X XXX XXXX	مسافات تسهل القراءة والحفظ
الجوال للعرض الدولي	966 5X XXX XXXX مسبوقة بعلامة الزائد	في مقطع محدد الاتجاه حتى لا تقفز العلامة
رابط الاتصال والواتساب	الصيغة الدولية بلا مسافات ولا صفر أول	لا يراه الزائر لكنه ما يستخدمه الجوال
السعر	39 ريالًا، أو 39 ر.س في الجداول	وضّح هل يشمل ضريبة القيمة المضافة
الوقت	9:30 ص و4:00 م	أو صيغة 09:30 و16:00، والمهم ألا تخلط بين الصيغتين
التاريخ الميلادي	20 أكتوبر 2026م	اسم الشهر أوضح من الرقم وحده
المساحة والمسافة	450 م² و12 كم	وحدات عربية مختصرة ثابتة في كل الصفحات

لاحظ أن العملة تأتي بعد الرقم في العربية، وقبله غالبًا في الإنجليزية: SAR 39.

الموقع ثنائي اللغة: البنية والروابط وhreflang

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

رابط مستقل لكل لغة

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

وسوم hreflang: كيف تعرّف جوجل بالنسختين

وسم hreflang يخبر جوجل أن هذه الصفحة لها نسخة بلغة أخرى، وأين تجدها، فيعرض لكل باحث النسخة المناسبة للغته. وتشرح وثائق Google Search Central قواعده بوضوح، وأهم ما فيها:

• يمكن إعلان النسخ البديلة بإحدى ثلاث طرق: وسوم في رأس الصفحة، أو ترويسات HTTP، أو خريطة الموقع. وجوجل يعاملها بالتساوي، فاستخدام أكثر من طريقة لا يضيف فائدة.
• يجب أن تذكر كل نسخة نفسها وكل النسخ الأخرى. إن أشارت الصفحة العربية إلى الإنجليزية ولم تشر الإنجليزية إليها، فقد يتجاهل جوجل الإشارة.
• رمز اللغة وفق معيار ISO 639-1، أي ar للعربية وen للإنجليزية، ويمكن إضافة رمز الدولة مثل ar-SA إن كان المحتوى موجهًا للسعودية تحديدًا. أما رمز الدولة وحده فغير صالح.
• القيمة x-default تحدد الصفحة التي تُعرض لمن لا تطابق لغته أي نسخة، وتكون غالبًا النسخة الرئيسية أو صفحة اختيار اللغة.

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

زر تبديل اللغة

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

محتوى متكافئ، لا ترجمة حرفية

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

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

أخطاء شائعة وقائمة اختبار قبل الإطلاق

تسعة أخطاء تتكرر في المواقع العربية

1. تصميم بنص وهمي إنجليزي ثم صب المحتوى العربي فيه، فتنكسر العناوين وتضيق الأزرار.
2. قلب الصفحة بالكامل عبر التنسيق بدل إعلان الاتجاه في وسم html، فتنعكس الشعارات وتنقلب الأرقام في بعض المتصفحات.
3. أسهم لم تُعكس، فيشير زر «التالي» إلى الخلف، ويبدو مسار التنقل معكوس المعنى.
4. خط النظام بدل خط محدد، فيختلف شكل الموقع بين جهاز وآخر.
5. نص عربي صغير ومتزاحم لأن الأحجام وارتفاع السطر نُقلت من النسخة الإنجليزية.
6. رقم جوال تقفز علامته، أو بريد إلكتروني يظهر مقلوب الأجزاء.
7. خلط الأرقام والتقويمين بين صفحة وأخرى دون قاعدة.
8. نسخة إنجليزية ناقصة: صفحات لم تُترجم، أو زر لغة يعيد إلى الرئيسية، أو نسختان على رابط واحد.
9. نماذج ترفض الأرقام العربية أو تعرض رسائل خطأ بالإنجليزية لعميل يكتب بالعربية.

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

قائمة اختبار تطبقها بنفسك

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

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

موقعك العربي والإنجليزي مع ويبنا

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

• موقع احترافي على ووردبريس بلوحة تحكم سهلة تعدّل منها نصوصك وصورك بنفسك.
• حتى 5 صفحات، كل صفحة بالعربية والإنجليزية، مع نموذج طلب أو استفسار، ومعرض صور، وموقع على الخريطة، وزر واتساب ورقم اتصال مباشر.
• تصميم سريع ومناسب للجوال، واختبار على الجوال والكمبيوتر قبل الإطلاق.
• الاستضافة وشهادة الأمان ودومين باسمك، وتهيئة لمحركات البحث وربط بـ Google Search Console وخريطة الموقع.
• تسليم رابط المعاينة خلال 24 ساعة كحد أقصى من اكتمال جميع المعلومات والمحتوى المطلوب منك، والدعم الفني وإصلاح الأعطال ضمن الاشتراك.

هذا الموقع من 5 صفحات بلغتين بـ 324 ريالًا شهريًا في الحاسبة، ومواقع ويبنا تبدأ من 39 ريالًا شهريًا، كلها بدون رسوم تأسيس، والسعر يُعرض شهريًا ويُدفع مقدمًا كل 6 أشهر، أو سنة كاملة بخصم 10%. ونعرض عليك التصميم على رابط معاينة قبل الإطلاق، فتستطيع أن تطبق عليه قائمة الاختبار في هذا الدليل بندًا بندًا، وإن لم يعجبك التصميم نعيد لك كامل المبلغ. تفاصيل الأسعار في حاسبة الأسعار، وخطوات العمل من أول رسالة إلى الإطلاق في صفحة كيف نعمل. وللتواصل المباشر: واتساب أو جوال 0599092427، أو البريد info@webnaa.com.

أسئلة شائعة

الخلاصة

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

المراجع: W3C: Structural markup and right-to-left text in HTML، وW3C: Inline markup and bidirectional text in HTML، وW3C: Arabic and Persian Layout Requirements، وMDN: CSS logical properties and values، وGoogle Search Central: Localized versions of your pages. ومن ويبنا: صفحة الأسعار لتفاصيل الاشتراك.