كيف تجعل محتوى موقعك متوافق مع جميع الشاشات إنه السؤال الذي شغل مطوري مواقع الويب مع بدء انتشار استخدام الإنترنت على الأجهزة الذكية ذات الأحجام المتفاوتة للحصول على التصميم المتوافق مع كافة الشاشات. في الواقع، لم يكن الأمر مهمًّا عندما كان استخدام الإنترنت محصورًا ضمن أجهزة الحاسوب المكتبية، إذ يكفي تصميم الموقع الإلكتروني ليتوافق مع حجم شاشة سطح المكتب الثابتة. لكن مع التطور التكنولوجي وبدء استخدام الويب على أجهزة الموبايل والأجهزة الذكية المختلفة، كان لا بد من التفكير في طريقة مناسبة لجعل محتوى المواقع متوافق مع جميع أحجام الشاشات، فمن غير المنطقي تصميم نسخة جديدة من الموقع في كل مرة يظهر فيها حجم جديد لشاشات هذه الأجهزة.
كيف تجعل محتوى موقعك متوافق مع جميع الشاشات
في الواقع، لا يتطلب التصميم المتوافق أو جعل محتوى الموقع متوافقًا مع أحجام الشاشات المختلفة سوى بعض التعديلات على الأكواد الموجودة في ملفات HTML وCSS الخاصة بالموقع، حيث يعد هذا الأمر من اختصاص مطوري مواقع الويب. بشكل عام، إذ يمكن جعل محتوى موقعك متوافق مع جميع الشاشات باستخدام الأكواد التالية:
- في ملف HTML:
يوضع الكود التالي ضمن القسم الخاص برأس الصفحة، أي في السطر الذي يسبق تعليمة الإغلاق </head>:
<meta name = “viewport” content = “width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″/>
لاحظ أن عرض المحتوى قد حدد حسب عرض الجهاز من خلال “content = “width=device-width.
- في ملف CSS:
لا بد من إضافة بعض الأسطر حسب عرض شاشة الجهاز المستخدم لتصفح الموقع:
- شاشة بعرض 1024 بكسل media screen and (max-width:1024px) { CSS FOR Max WIDTH 1024Px }@
- شاشة بعرض 768 بكسل media screen and (max-width:768px) { CSS FOR Max WIDTH 768Px }@
- أجهزة بعرض 640 بكسل media screen and (max-width:640px) { CSS FOR Max WIDTH 640Px }@
- شاشات بعرض 480 بكسل media screen and (max-width:480px) { CSS FOR Max WIDTH 480Px }@
- للأجهزة بعرض 320 بكسل media screen and (max-width:320px) { CSS FOR Max WIDTH 320Px }@
كما يفضل أن يحدد حجم الخط الخاص بالمحتوى بين 16 و18 بكسل، إذ يعتبر الحجم الأمثل لكافة الشاشات.
كيفية تصميم موقع متوافق مع كافة الشاشات
تعرف خاصية Responsive أو التوافق مع كافة الشاشات كواحدة من أهم المبادئ المتبعة في تصميم مواقع الويب، حيث يعتمد المصممون عادةً على الخطوات التالية لتحقيق التوافق مع كافة الشاشات:
- تحديد أدنى دقة للشاشة: بشكل عام، يستخدم معظم الأشخاص شاشات بدقة 600*800 بكسل وما يزيد عنها. لذلك، غالبًا ما يتم تجاهل الدقة الأقل، إذ لا تتجاوز نسبة مستخدمي الشاشات ذات دقة 480*640 قيمة 0.5%.
- وضع المخطط الأولي للموقع.
- تصميم الموقع بواسطة HTML، اللغة المستخدمة في تصميم مواقع الويب. في هذه الخطوة، لا بد من تصميم الموقع باستخدام النسب المئوية لوضع القياس النسبي حسب حجم الشاشة، إذ يحدد العرض والارتفاع عند تصميم جدول المحتوى بقيمة 100% أو 95%. بمعنى آخر، يجب الابتعاد عن استخدام وحدات ثابتة محددة بالبكسل، وإلا فإن الموقع لن يتوافق إلا مع دقة أو حجم محدد من الشاشات. على سبيل المثال، إذا قمت بتحديد الوحدات وأدخلت الحد الأدنى للدقة الذي اخترته في الخطوة الأولى، ستكون قد صممت موقعًا متوافقًا مع الأجهزة التي تمتلك شاشات بدقة منخفضة. بالتالي، ستظهر الصفحة فارغة قليلًا عند عرضها على الشاشات ذات الدقة الأعلى وسيزداد الأمر سوءًا كلما ارتفعت دقة الشاشة.
- أما الخطوة التالية فهي وضع قياس ثابت للخلايا ما عدا خلية المحتوى، ويحدد بالبكسل.
- في النهاية، أصبح من الممكن إدخال المحتوى واختبار الموقع.
كيف تجعل محتوى موقعك البلوجر متوافق مع كافة الشاشات
في الواقع، إن كنت تتعامل مع البلوجر، فيمكنك ببساطة اتباع الخطوات التالية لتجعل محتوى موقعك متوافق مع كافة الشاشات:
- افتح الموقع الذي ترغب في إضافة هذه الميزة له.
- توجه إلى لوحة التحكم.
- اضغط على خيار “المظهر”.
- اختر “تعديل”.
- ابحث عن ]] ></b:skin> داخل القالب باستخدام خيار البحث.
- أضف الكود التالي فوق السطر السابق مباشرةً:
كيف تجعل محتوى موقعك على الوورد بريس متوافق مع جميع الشاشات
بشكل عام، يمكنك استخدام أداة Device Detector أو كاشف الجهاز لمعرفة أنواع الأجهزة التي تصل إلى موقع وورد بريس الخاص بك، وبالتالي تحديد أحجام الشاشات التي يجب تحقيق التصميم المتوافق معها. كما تسمح هذه الأداة بإضافة بعض الفئات أو التعديلات على ملف CSS الخاص بالموقع. أما طريقة استخدام هذه الأداة فهي:
- تحميل أداة Device Detector
- زيارة موقع ووردبريس الخاص بك.
- تسجيل الدخول.
- أما الآن، اضغط على Plugins.
- انقر على Add New.
- اضغط على Upload Plugin.
- اختر الأداة.
- اضغط على خيار تفعيل الأداة.
طرق معاينة الموقع على مختلف الشاشات
بشكل عام، لا بد من التحقق من نجاح الكود أو الطريقة المستخدمة لتصميم الموقع بحيث تجعل المحتوى متوافق مع الشاشات المختلفة، إذ تتوفر عدة طرق للمعاينة قبل نشر المحتوى، وهي:
- استخدام جوجل اناليتكس Google analytics: لا يتطلب الأمر سوى الدخول إلى حساب جوجل اناليتكس وطلب التقرير الشهري المطلوب لمعرفة أنواع الشاشات الأجهزة التي تتصفح موقعك.
- المعاينة من خلال الموقع نفسه: على سبيل المثال يقدم وورد بريس طرق لعرض المحتوى على أجهزة الكمبيوتر والأجهزة المحمولة.
- استخدام أداة المتصفح inspect: بعد الدخول إلى الموقع، اضغط على الزر الأيمن للماوس واختر inspect. بعد ذلك، يمكنك الضغط على Responsive واختيار نوع الجهاز الذي ترغب بمعاينة الموقع من خلاله.
أهم النصائح لتحسين الموقع بحيث يتوافق مع كافة الأجهزة
بعد التعرف على إجابة سؤال كيف تجعل محتوى موقعك متوافق مع جميع الشاشات، إليك أهم الإرشادات لتحسين موقعك على وورد بريس والمواقع الأخرى فيما يتعلق بخاصية التصميم المتوافق:
- اختيار القالب المتجاوب المناسب للمحتوى وتحديثه بشكل مستمر.
- الابتعاد عن تحميل الإضافات والإعلانات غير المتجاوبة مع الموقع.
- متابعة التحديثات الخاصة بالووردبريس.
- إضافة الأكواد الخاصة بخاصية التوافق مع الشاشات المختلفة.
في الختام، باتت الإجابة عن سؤال كيف تجعل محتوى موقعك متوافق مع جميع الشاشات أو ما يعرف بالتصميم المتوافق مع الأجهزة المختلفة أحد أهم مبادئ تطوير مواقع الويب، إذ يؤدي إهمال التحقق من هذه النقطة إلى بعض المشاكل من حيث انخفاض عدد زوار الموقع.