قائمة التصميم للموبايل أولا تتحقق من أن الموقع يعمل بأفضل شكل على أصغر الشاشات وأضعف الاتصالات قبل تحسينه للشاشات الأكبر: نص مقروء دون تكبير، أهداف لمس كبيرة بما يكفي، قائمة تنقل سهلة الفتح والإغلاق، نماذج قصيرة بلوحات مفاتيح مناسبة، بدون تمرير أفقي، تحميل سريع على بيانات الموبايل، وسلوك صحيح على سفاري في iOS وكروم في أندرويد.
في أغلب المتاجر ومواقع الخدمات التي أبنيها يصل معظم الزوار من الهاتف. وهذه القائمة تدعم دليل هيكل صفحة الهبوط.
ما معنى التصميم للموبايل أولا؟
يعني أن التصميم الأساسي وCSS مخصصان للشاشات الصغيرة، وتضاف التخطيطات الأكبر باستعلامات min-width. وهذا يفرض ترتيب الأولويات: على الهاتف توجد مساحة للمحتوى الأساسي وإجراء واحد واضح فقط، فتقرر ما يهم قبل إضافة الكماليات للكمبيوتر.
.grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
1. التخطيط
- لا تمرير أفقي في أي صفحة على عرض من 320 إلى 430 بكسل.
- المحتوى غير مقطوع عند الحواف مع هوامش جانبية متسقة.
- الكلمات الطويلة والروابط وأسماء المنتجات تلتف (
overflow-wrap: anywhereعند الحاجة). - الجداول تمرر داخل حاويتها أو تتحول إلى بطاقات.
- الصور والتضمينات تتكيف (
max-width: 100%وheight: auto). - البطاقات متساوية الارتفاع لا تخلق فراغات كبيرة.
طريقة سريعة لاكتشاف سبب التمرير الأفقي من كونسول المتصفح:
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);
});
2. الخطوط
- نص المحتوى حوالي 16px أو أكبر.
- طول سطر مريح وارتفاع سطر واسع (حوالي 1.5 للنص).
- العناوين تصغر بشكل منطقي، وتساعد
clamp()في ذلك:
h1 { font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem); }
- تباين النص يحقق متطلبات WCAG (4.5:1 للنص العادي).
- النص العربي له ارتفاع سطر كاف (راجع المتجر الإلكتروني العربي).
3. أهداف اللمس
- أزرار وروابط كبيرة بما يكفي ومتباعدة. تحدد WCAG 2.2 حدا أدنى 24 في 24 بكسل عند AA، وتوصي إرشادات المنصات بأكبر من ذلك، فاستهدف حوالي 44 بكسل.
- الروابط داخل النص مميزة دون الاعتماد على اللون وحده.
- لا تفاعلات تعتمد على التمرير بالماوس فقط، فشاشات اللمس لا تعرف hover.
4. التنقل
- زر القائمة واضح (أيقونة مع نص أو عنوان مخصص لقارئات الشاشة).
- القائمة تفتح وتغلق بثبات وتحصر التركيز أثناء فتحها.
- القوائم الفرعية تعمل باللمس لا بالتمرير.
- الإجراءات الأساسية (اتصال، واتساب، السلة، تواصل) سهلة الوصول.
- الهيدر الثابت صغير حتى لا يستهلك الشاشة.
5. النماذج
typeوinputmodeوautocompleteصحيحة في الحقول.- حقول بخط 16px أو أكبر لتجنب التكبير في iOS.
- عناوين ظاهرة وأخطاء واضحة بجوار الحقل.
- زر الإرسال ظاهر فوق لوحة المفاتيح أو سهل الوصول.
التفاصيل: أفضل ممارسات نماذج التواصل.
6. الصور والوسائط
- صور متجاوبة مع
srcsetلتنزل الهواتف ملفات صغيرة. - صيغ حديثة، راجع WebP وAVIF.
- صورة الواجهة غير محملة تحميلا كسولا.
- الفيديوهات لا تعمل تلقائيا بالصوت، وتجنب خلفيات الفيديو على الموبايل.
7. الأداء على الموبايل
الهواتف معالجاتها أبطأ والشبكات متفاوتة، فافحص:
- نتائج PageSpeed Insights للموبايل على القوالب الأساسية.
- جافاسكريبت محدود وتأخير الأدوات الثقيلة، راجع تقليل TBT.
- لا تحرك في التصميم أثناء التحميل.
الدليل الكامل: Core Web Vitals.
8. الطبقات والنوافذ المنبثقة
- لا نافذة منبثقة عند الدخول تغطي المحتوى.
- إشعار الكوكيز مختصر وقابل للإغلاق.
- الأزرار العائمة (دردشة، واتساب، العودة للأعلى) لا تغطي زر الإضافة للسلة أو الإرسال.
- كل طبقة قابلة للإغلاق بزر ظاهر سهل اللمس.
9. مشكلات سفاري على iOS
- ارتفاع الشاشة: قد يكون
100vhفي سفاري أطول من المساحة الظاهرة بسبب أشرطة المتصفح، فاستخدم100svhأو100dvhحيث يدعم مع بديل. - المناطق الآمنة: في الهواتف ذات النتوء ومؤشر الشاشة الرئيسية استخدم
env(safe-area-inset-bottom)للأشرطة الثابتة السفلية، معviewport-fit=coverفي وسم viewport. - تكبير الحقول: الحقول الأصغر من 16px تسبب التكبير.
- backdrop-filter و position: sticky تعملان غالبا في الإصدارات الحالية، لكن اختبر لأن إصدارات iOS القديمة ما زالت موجودة.
- لا تعطل تكبير المستخدم أبدا (
user-scalable=no)، فهذه مشكلة في إتاحة الوصول.
.bottom-bar {
position: fixed;
bottom: 0;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
10. الاتجاه والمقاسات غير المعتادة
- الوضع الأفقي على الهاتف ما زال قابلا للاستخدام.
- فحص الهواتف الصغيرة (حوالي 320 إلى 360 بكسل) والكبيرة.
- الأجهزة اللوحية لا تحصل على تخطيط هاتف ممطوط أو تخطيط كمبيوتر مزدحم.
11. الاختبار على أجهزة حقيقية
محاكاة المتصفح بداية جيدة لكنها لا تكشف سلوك اللمس والأداء الحقيقي ومشكلات سفاري. الحد الأدنى عندي:
- آيفون واحد مع سفاري.
- هاتف أندرويد متوسط مع كروم.
- بيانات الموبايل، لا واي فاي المكتب فقط.
- الوضع الفاتح والداكن إذا كان الموقع يدعمهما.
- للمواقع ثنائية اللغة، اتجاها اللغتين.
نفذ المهام الأساسية: ابحث عن منتج أو خدمة، اقرأ مقالا، أرسل نموذجا، أكمل الشراء.
أخطاء شائعة
- التصميم للكمبيوتر أولا ثم “ضغطه” للموبايل.
- إخفاء محتوى مهم على الموبايل بدلا من ترتيب أولوياته.
- أزرار إغلاق صغيرة جدا في النوافذ المنبثقة.
- الاختبار في شريط أجهزة كروم فقط.
تحتاج مراجعة موقعك على الموبايل؟ تواصل معي.
الأسئلة الشائعة
ما معنى التصميم للموبايل أولا؟
يعني تصميم وبناء الموقع للشاشات الصغيرة أولا بتنسيقات أساسية للموبايل، ثم إضافة تحسينات التخطيط للشاشات الأكبر باستعلامات min-width.
ما الحجم المناسب لأهداف اللمس؟
تحدد WCAG 2.2 حدا أدنى 24 في 24 بكسل CSS عند المستوى AA مع استثناءات، وتوصي إرشادات أبل وجوجل بأهداف أكبر بين 44 و48 بكسل تقريبا.
لماذا يكبر الموقع عند الضغط على حقل في الآيفون؟
يكبر سفاري على iOS الحقول التي يقل حجم خطها عن 16px، وضبط الحقول على 16px على الأقل يمنع ذلك دون تعطيل التكبير.
هل التصميم المتجاوب هو نفسه التصميم للموبايل أولا؟
التصميم المتجاوب يتكيف مع أي شاشة، أما الموبايل أولا فطريقة لبنائه تبدأ من الموبايل. ويمكن أن يكون الموقع متجاوبا دون أن يصمم للموبايل أولا.
