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

الموقع المتجاوب :هو الموقع الذي يدعم جميع احجام الشاشات من الهاتف المحمول الى اجهزة الكمبيوتر، و بعد ان صار تصفح المواقع من خلال اجهزة الهاتف والأيباد وغيرها من الأجهزة المصغرة اكثر من اجهزة الكمبيوتر ، و صارت هذه الخاصية عامل اساسي لتقييم المواقع من قبل محركات البحث ومن ضمنها جوجل ، ما دعى اصحاب المواقع للبحث عن مصممين لإضافة هذه الخاصية الهامة الى مواقعهم ، ومادفعني لشرح الطريقة هو كثرة التساؤلات حول الطريقة الصحيحة لجعل الموقع متجاوب ، و لعمل ذلك :
اولا: يجب ان تضع خاصية عرض الطبقات بالنسبة المئوية (%) لتكون اكثر مرونة في الزيادة والنقصان ، وهذا التقسيم السائد لطبقات الموقع كما هو مبين بأكواد 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 ، وغيرها من المواقع مثل تويتر وجوجل بلس ، وتستخدم هذه الطريقة لزيادة الأداء في الهاتف المحمول ، بينما الطريقة السابقة كل شيء يتم تحميله الى جهازك وإنما يتم التغيير في ترتيب العناصر وعرضها وإخفاءها بعد التحميل ، ولكن بإمكانك استخدام هذه الطريقة ، حيث جميع لغات الويب تدعمها.
الى هنا انتهى الشرح واتمنى انه نال اعجابك اخي الكريم ، وإذا كان لديك اي استفسار حول الموضوع ضعه في تعليق.
مواضيع ذات صلة

0 اترك تعليقاً...