بسم الله الرحمن الرحيم
السلام عليكم , مع تطور التكنولوجيا اصبحت الهواتف و التابلت من اهم الوسائل المستخدمة في تصفح الانترنت , حيث انها اصبحت منافسا قويا لاجهزة سطح المكتب , لذلك ركزت اغلب محركات البحث على استخدام خوارزميات فحص التجاوب , التي تحدد اذا ماكان الموقع متجاوب مع جميع الشاشات ام لا , ومن اهم هذه المحركات " محرك بحث جوجل " الذي جعل من التجاوب عاملا رئيسيا لضمان عرض موقع ضمن نتائج البحث , كما ان شركات الاجهزة اللوحية مثل " آبل Apple " تعاقب اصحاب المواقع غير المتجاوبة باخبار المستخدم بان هذا الموقع غير متجاوب ولايمكن عرضه على الهاتف , وبالتالي سيخسر الموفع زائرا .
اليوم سنتحدث عن التجاوب ومبادئ التعامل معه وطريقة التعديل على القالب ليصبح متجاوبا , فهذا الامر مهم جدا كما ذكرنا سابقا , التجاوب و نموذج الهاتف مصطلحان يختلفان عن بعضهما كل الاختلاف , ويمكن تلخيص اوجه الاختلاف في نقطتين اساسيتين هما :
السرعة :
حيث ان نموذج الهاتف يتميز بسرعة تحميل ممتازة وقصيرة نسبيا لانه في نموذج الهاتف يتم حذف اكواد الجافا سكريبت وضغط اكواد css وتقليل جودة الصور ليتم التصفح بسهولة , فقد اكدت الاحصائيات ان مستخدم الهاتف يمكنه الانتظار مدة 5 ثواني كحد اقصى لانتظار تحميل موقع بعكس مستخدم جهاز سطح المكتب الذي يمكنه الانتظار ضعف هذا الرقم 3 مرات .
جمال التصميم :
النموذج المتجاوب يتميز بمحافظته على الوانه و جميع اكواده و التصاميم الخاص به , فهو مجرد ضبط لمقاسات العرض , اي انه يتم عرض القالب بكامل ادواته و تصميماته ولكن بمقاس اصغر بقليل من مقاس نموذج سطح المكتب , وهذا الامر يؤثر على سرعة التحميل ولكن ليس الى حد كبير .
طريقة جعل القالب متجاوبا
اولا يمكن ان نعرف التجاوب على انه " جعل قالب الموقع متغير الحجم بحيث يتناسب مع جميع شاشات الهواتف و الاجهزة اللوحية و شاشات العرض الكبيرة " LCD " وشاشات التابلت " , ولجعل القالب متجاوبا سنقوم بالقيام بالخطوة الاولى وهي التوجه الى لوحة التحكم في بلوجر > المظهر > ونضغط على علامة المسنن الظاهرة اسفل نموذج الجوال > ونعلم على خيار " لا، إظهار مظهر سطح المكتب على أجهزة الجوال. " .
بعد ذلك سنضغط على زر " تحرير HTML " ونضغط Ctrl+f ونبحث عن الوسم <head> ونضيف الكود التالي فوقه مباشرة :
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
بعد ذلك يتم العمل عل الكود التالي , نبحث عن الوسم ]]></b:skin> ونلصق فوقه الكود التالي :
@media screen and (max-width : 790px) {
اكواد الـ CSS
}
اكواد الـ CSS
}
ومعنى هذا الكود انه عندما يكون حجم الشاشة 790 قم بعرض اكواد ال css الاتية كما يلي , حيث انه سيتم استبدال عبارة " اكواد ال css " بمجموعة من الاكواد الرئيسية في قالبك , فمثلا يمكن اضافة كود الهيدر ليصبح بحجم 690px وبالتالي سيتناسب مع الشاشات ذات الحجم 790px وهكذا ..
يمكنك تكرار الكود مع تغيير حجم التجاوب ومقاس الاجزاء الرئيسية في قالبك , واشهر احجام التجاوب المستخدمة هي 980px , 790px , 400px ويمكنك استخدام كود مقاس العرض width و الارتفاع height لضبط مقاسات الاجزاء الرئيسية في قالبك .
الخلاصة
التجاوب جانب مهم من القالب يجب الاهتمام به و اخذه بعين الاعتبار فزوارك يحتاجون الى قالب يسمح لهم بتصفح موقعك في اي مكان وبأي جهاز , فحاول ان توفر لهم مايحتاجونه , واذا كنت مبتدئا في التعامل مع اكواد css فجرب ان تتعلمها من تتعرف على كيفية التعامل معها , لتصنع في المستقبل قالبك الخاص .
ودمتم في حفظ الله ورعايته
اللهم ارزقنا شربة من حوض نبيك يوم تحشر عبادك
2 التعليقات
بارك الله فيك
جمعااا ي رب ,, :)
اظهر الابتساماتإخفاء