كيف تصمم موقع متجاوب ؟ وماهي الطريقة التي تستخدمها كبرى الشركات؟

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

كيف تصمم موقع متجاوب؟

اولا: يجب ان تضع خاصية عرض الطبقات بالنسبة المئوية (%) لتكون اكثر مرونة في الزيادة والنقصان

وهذا التقسيم السائد لطبقات الموقع كما هو مبين بأكواد HTML التالية:
<html>
<head>
</head>
<body>
<div class='container'>
<div class='header'>
  header
</div>
<div class='main'>
Main
</div>
<div class='sidebar'>
  Sidebar
</div>
<div style='clear:both;'></div>
<div class='footer'>
  Footer
</div>
</div>
</body>
</html>
وهذه اكواد CSS لتنسيق الطبقات لأجهزة الكمبيوتر:
<style>
div{text-align:center;border-radius:7px;}
.container{
max-width:1080px;
background:#eee;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.header{
width:100%;
height:50px;
background:#1144ff;
margin-bottom:10px;
}
.main{
width:64%;
min-height:450px;
background:#ff4411;
float:right;
}
.sidebar{
width:34%;
min-height:450px;
background:#f90;
float:left;
}
.footer{
width:100%;
height:40px;
background:#11ff44;
margin-top:10px;
}
</style>
وهذه الصورة تبين ناتج ذلك :

ثانيا : بعد تصميم الموقع الان يجب ان تجعله متجاوبا

وذلك بواسطة الخاصية الجديدة في CSS3 التي تدعى (media query) ، هذه الخاصية تستكشف أبعاد شاشة الجهاز وتطبق التنسيق المحدد ضمن هذا البعد.
في كود CSS التالي جعلنا التصميم السابق متوافق مع اجهزة الهاتف المحمول حيث سيطبق هذا التصميم للشاشات ذات العرض 480 بكسل وماتحت ذلك ،
// for Phones
@media screen and (max-width : 480px) {
.main{
float:none;
width:100%;
}
.sidebar{
float:none;
width:100%;
margin-top:10px;
}
}

تبقت الخطوة الأهم وهي اضافة كود الميتا الخاص بال viewport اضف هذا الكود في رأس الصفحة اي داخل الوسم <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
الى هنا تمت العملية بنجاح وهذا الشكل الناتج على الهاتف المحمول:
حيث سيكون بإمكانك تقسيم الأبعاد كيف ماتشاء وتضع لكل بعد تنسيقه الخاص ومثال ذلك كالتالي:
//for large Tablets
@media screen and (max-width : 820px) {
    // غير في اكواد سي اس اس بما يتناسب مع هذا المقاس واصغر منه
}
//for mini Tablets
@media screen and (max-width : 640px) {
    // غير في اكواد سي اس اس بما يتناسب مع هذا المقاس واصغر منه
}
هذا مثال مصغر لإيصال الفكرة ولكن سيكون لديك الكثير من العمل على جميع العناصر المتواجدة امامك لتجعلها متناسقة مع مقاس الشاشة المحدد .

دورة لتصميم قالب HTML/CSS3  متجاوب 

في هذه الدورة ستتعلم كيف تصمم قالب متجاوب من دون استخدام اي فريم ورك ، ولكن ايضا يمكنك الاستعانة بالبوتستراب لتصميم مواقع متجاوبة بوقت اقصر، ولتعلمها اقرأ هذا الموضوع  تعلم تصميم المواقع بالبوتستراب من الصفر حتى الاحتراف 
اقرأ ايضا: كيفية تصميم موقع متجاوب بمساعدة الجافا سكربت
كيفية تصميم موقع متجاوب بمساعدة الجافا سكربت
اهم خصائص التصميم المسطح وكيف تحول تصميماتك الى مسطحة

الطريقة التي تستخدمها كبرى الشركات والمواقع الضخمة:

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

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

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة !
2 - أن لا تضع أي روابط خارجية!
3 - أي سؤال خارج محتوى التدوينة يتم حذفه !
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
موافقة ملفات تعريف الارتباط
نحن نقدم ملفات تعريف الارتباط على هذا الموقع لتحليل حركة المرور وتذكر تفضيلاتك وتحسين تجربتك.