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

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

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

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

مثل هذه الشركات موقع التواصل الإجتماعي فيسبوك ، حيث عند الدخول من الهاتف يوجهك مباشرة الى الدوماين الفرعي m.facebook.com ، وغيرها من المواقع مثل تويتر وجوجل بلس ، وتستخدم هذه الطريقة لزيادة الأداء في الهاتف المحمول ، بينما الطريقة السابقة كل شيء يتم تحميله الى جهازك وإنما يتم التغيير في ترتيب العناصر وعرضها وإخفاءها بعد التحميل ، ولكن بإمكانك استخدام هذه الطريقة ، حيث جميع لغات الويب تدعمها.
الى هنا انتهى الدرس واتمنى انه نال اعجابك اخي الكريم ، وإذا كان لديك اي استفسار حول الموضوع ضعه في تعليق.
مواضيع ذات صلة
2 اترك تعليقاً...
  1. تصميم مواقع
    اجعل مقر شركتك علي الانترنت من خلال خدمة تصميم مواقع التي تقدمها لك شركة ميكسيوجي لخدمات الويب حيث ان لديها فريق عمل متخصص في جميع طرق تصميم وانشاء المواقع الالكترونية باحدث التقنييات والادوات المبتكرة التي تجعل الموقع متميز عن غيره ويتميز بالشكل الجذاب وسهول الاستخدام
    للاتصال من داخل مصر 00201010116604
    للاتصال من داخل السعودية 535296718
    http://mixseogy.com/web_design/

    ردحذف
  2. الأن يمكنك تملك فيزا مجانية تصلك ألى البيت لدفع وإستلام الأموال من أى مكان فى العالم وبالدولار


    https://share.payoneer.com/nav/0m3iz8T0N7ASn0YX0jV-ji1F9g6j5R7_AI8EthWpo3CEakQkoPT-pWN2B8H9NNMXbQvv9lJWiNhycdBbjpNFJQ2

    ردحذف