تصميم متوافق مع الأجهزة المحمولة ومتجاوب

قوالب مواقع ويب متجاوبة مع الجوال

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

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

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

قوالب مواقع ويب مخصصة للهواتف المحمولة

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

مواقع ويب منفصلة تمامًا للهواتف المحمولة

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

كيفية تحويل موقعك الإلكتروني الحالي إلى قالب متجاوب

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

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

كيفية اختيار قالب مخصص جديد للهواتف المحمولة

لدينا 8 قوالب مخصصة للهواتف المحمولة مختلفة، ولكن كل منها سيستخدم الألوان والخطوط من سمة سطح المكتب الخاصة بك.

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

تعديل ملف CSS الخاص بك ليكون متجاوبًا مع الأجهزة المحمولة

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

ابحث عن الأسطر في ملف أنماط CSS الخاص بك والتي تحتوي على أكبر الأبعاد وهي إما 600 بكسل أو 750 بكسل أو 900 بكسل:

#container { width: 750px; margin: 0 auto; }

وتغييرها لتكون مثل هذا، حيث تملأ 90٪ من عرض الشاشة حتى الحد الأقصى 960.

#container { width: 90%; max-width: 960px; margin: 0 auto; }

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

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }