أفضل ممارسات تصميم موقع عربي أولًا: من الخطّ إلى تجربة المستخدم

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

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

ما معنى “عربي أولًا” ولماذا لا تكفي الترجمة المعكوسة

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

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

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

الخطّ العربي: القلب التقني للتصميم

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

في مشاريعي أبدأ باختيار خطّ نسخي حديث واضح، بأوزان متعدّدة، صُمّم أصلًا للقراءة على الشاشات. خطوط مثل IBM Plex Sans Arabic و Noto Naskh Arabic و Cairo توفّر هذا، وكلّها متاحة عبر Google Fonts بترخيص حرّ. القاعدة التي ألتزمها: حمّل الأوزان التي تستعملها فعلًا فقط. موقع يحتاج وزنين، عاديًا وعريضًا، لا داعي لأن يحمّل ستّة أوزان يدفع الزائر ثمن ثقلها دون أن يراها.

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

الاتجاه من اليمين إلى اليسار: أبعد من قلب الصفحة

كثيرون يظنّون أن دعم العربية يعني إضافة dir="rtl" على الصفحة وانتهى الأمر. هذه الخطوة ضرورية فعلًا: تضبط سمة lang="ar" و dir="rtl" على عنصر الصفحة الجذري، فيعرف المتصفّح ومحرّك البحث أن المحتوى عربي ويُقرأ من اليمين. توثيق W3C ومراجع MDN يؤكّدان أن هذا الإعلان هو الأساس الصحيح للنص ثنائي الاتجاه. لكنه البداية لا النهاية.

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

الطريقة التي أبني بها هذا دون تكرار الشيفرة هي الخصائص المنطقية في CSS. بدل أن أكتب margin-left ثم أعكسها يدويًا للعربية، أكتب margin-inline-start، فتنعكس تلقائيًا حسب اتجاه الصفحة. هكذا أدعم العربية والإنجليزية من ملفّ أنماط واحد، دون أوراق أنماط منفصلة ودون أخطاء يدوية. هذه الخصائص مدعومة في كل المتصفّحات الحديثة منذ سنوات، وتوثّقها MDN بالتفصيل.

التعامل مع الأرقام والنص المختلط

أكثر ما “يكسر” المواقع العربية بصريًا هو خلط العربية بالإنجليزية أو بالأرقام في السطر نفسه: اسم منتج بالإنجليزية، رقم هاتف، عنوان بريد، نسبة مئوية. حين لا يكون اتجاه الصفحة معلنًا بوضوح، يطبّق المتصفّح خوارزمية الاتجاه الثنائي (bidi) باجتهاده الخاص، فتتزحزح الأرقام وعلامات الترقيم إلى مواضع غريبة، وقد ينقلب ترتيب رقم الهاتف أمام عينيك.

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

نقطة ثانية تخصّ الأرقام: لك أن تعرض الأرقام بالصيغة الهندية (٠١٢٣) أو العربية الغربية (0123). كلاهما صحيح، والاختيار يتبع جمهورك وهوية علامتك. المهمّ أن تكون متّسقًا عبر الموقع كلّه، لا أن تخلط الصيغتين في صفحة واحدة.

تجربة المستخدم على الجوّال: حيث يعيش جمهور الخليج

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

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

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

الأداء: لماذا يبدأ التصميم العربي من سرعة الخطّ

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

علاج هذا أن أضبط الخطّ على إظهار النص فورًا بخطّ احتياطي، ثم يحلّ الخطّ النهائي محلّه حين يجهز، عبر خاصية font-display: swap التي توصي بها web.dev في إرشادات الخطوط. هكذا يقرأ الزائر المحتوى من اللحظة الأولى بدل أن ينتظر. كما أحمّل ملفّات الخطّ بصيغة WOFF2 المضغوطة، وأقتصر على نطاق المحارف الذي يحتاجه الموقع فعلًا.

البنية التي أعتمدها تخدم هذا الهدف. أبني مواقعي بإطار Astro الذي يرسل أقل قدر ممكن من جافاسكربت إلى المتصفّح، وأنشرها صفحاتٍ ثابتة عبر Netlify على شبكة توزيع طرفية قريبة جغرافيًا من الزائر. هدفي الرقمي في كل مشروع واضح: نتيجة Lighthouse فوق 95 على الجوّال، ووزن صفحة تحت 500 كيلوبايت، وزمن أكبر عنصر مرئي تحت 2.5 ثانية. من خبرتي في أكثر من 40 موقعًا سلّمتها منذ 2021، هذه الأرقام واقعية حين يُبنى الموقع، عربيًا كان أو غيره، بشكل صحيح من البداية.

منهج عملي: قائمة الموقع العربي أولًا

أختصر ما سبق في خطوات أطبّقها على كل مشروع عربي:

أولًا، أعلن لغة الصفحة واتجاهها على العنصر الجذري بـ lang="ar" و dir="rtl". ثانيًا، أختار خطًّا عربيًا صُمّم للشاشة، بأوزان محدودة أحتاجها فعلًا، وأضبط ارتفاع السطر بين 1.7 و 1.9 وحجم النص عند 17 إلى 18 بكسل على الجوّال. ثالثًا، أبني التخطيط بالخصائص المنطقية في CSS كي ينعكس تلقائيًا دون شيفرة مكرّرة. رابعًا، أعالج النص المختلط والأرقام بعزل المقاطع المخالفة للاتجاه. خامسًا، أصمّم من الجوّال أولًا بأزرار لمس كبيرة ونماذج قصيرة واضحة. سادسًا، أضمن الأداء بخطّ يظهر النص فورًا وبنية خفيفة.

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

أبرز ما يجب تذكّره

1. “عربي أولًا” يعني تصميم الموقع منذ الصفحة البيضاء على أن العربية لغته الأساسية، لا بناءه بالإنجليزية ثم قلبه. الترتيب يصنع الفرق الذي يشعر به الزائر.
2. الخطّ هو أهمّ قرار: اختر خطًّا عربيًا صُمّم للشاشة بأوزان محدودة، واضبط ارتفاع السطر بين 1.7 و 1.9 وحجم النص عند 17 إلى 18 بكسل على الجوّال.
3. الاتجاه من اليمين إلى اليسار أبعد من dir="rtl": استعمل الخصائص المنطقية في CSS لينعكس التخطيط والأيقونات والهوامش تلقائيًا من شيفرة واحدة.
4. عالِج النص المختلط والأرقام بإعلان lang و dir وعزل المقاطع المخالفة للاتجاه، حتى لا ينقلب رقم الهاتف أو يتزحزح أمام الزائر.
5. صمّم من الجوّال أولًا لأن جمهور الخليج هناك، واضمن الأداء بخطّ يظهر النص فورًا عبر font-display: swap وبنية خفيفة تحت 500 كيلوبايت.

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