مؤخرا لم نعد نعتمد لتصفحنا على الأنترنت على الكمبيوتر فقط، فقد شهدنا ثورة في عالم الأجهزة اللوحية والهواتف الذكية التي كذلك أضحينا نستعملها لكي نتصفح المواقع.
ولهذا فالضرورة تستدعي تصميم موقع تجاوبي!
فما هو التصميم التجاوبي؟ وما هي فائدته لي كصاحب موقع؟
هذا ما سنكتشفه خلال هذه التدوينة، لنبدأ في درسنا على بركة الله!
ما هو التصميم التجاوبي (Responsive Design)؟
بكل بساطة فتصميم الموقع يتغير بتغير مقاسات شاشة المتصفح، فمقاسات شاشة الهاتف النقال ليست نفس التي لدى الجهاز اللوحي وليست كالتي لدى الحاسوب المكتبي!
لاحظ الصورة لكي تفهم أكثر!
لماذا وجب عليك التفكير في استعمال قالب تجاوبي أو تصميم تجاوبي لموقعك؟
وجب عليك أن تعرف عزيزي القارئ أنه مؤخرا قد ارتفعت نسبة المتصفحين من الهواتف الذكية ومن الأجهزة اللوحية، أترك لك الصورة لترى الإحصائيات:
إليك 3 أسباب ستجعلك تفكر في تصميم موقع تجاوبي:
1-إذا سبق لك وتصفحت موقعا ذو تصميم غير تجاوبي، فقد لاحظت بطؤا في التصفح، مما جعلك تضجر من تصفح هذا الموقع.
2-معظم الزيارات لموقعنا تأتي من محركات البحث، ومؤخرا قامت جوجل باستعمال خوارزمية للكشف عن جهاز المتصفح، حيث أنها سوف تقوم بإظهار المواقع صاحبة التصميم التجاوبي هي الأولى نظرا لتصميمها الموافق لمقاسات هذه الشاشة (Screen Resolution) مما سيؤثر سلبا على ترتيب موقعك.
3-التصميم التجاوبي يسهل عملية القراءة لمتصفحي الموقع، وسيجعل إعلانات أدسنس تظهر تجاوبية، وهذه الخاصية لا تتوفر في المواقع ذات التصميم غير التجاوبي. مما سيضاعف أرباحك!
بعد أن تعرفنا على الأسباب التي ستجعلك تفكر في تصميم موقع تجاوبي، دعونا نمر الآن إلى آلية عمل هذا التصميم.
كيف يعمل التصميم التجاوبي؟ (كيف أجعل تصميم موقعي تجاوبيا)
لجعل التصميم تجاوبيا سوف نعتمد على خاصية Media Query بCSS3 (آخر إصدار من CSS) وهي لغة شهيرة في تنسيق موقعك.
لكن الأمر صعب قليلا خصوصا إذا لم تكن تستعمل إطار عمل يسهل عليك العمل ويختصر عليك الوقت، ومن بين أكثر إطارات العمل استعمالا وشعبية هو البوتستراب وما أدراك ما البوتستراب، هذا الأخير الذي أضحى معظم مصميمي المواقع (Web-Designers) يعتمدون عليه نظرا لسهولته في الاستخدام.
لنعد الآن لصلب الموضوع وهي خاصية الMedia Query. هذه الخاصية تعتمد على إدخال أقصى عرض للشاشة والتغييرات المصاحبة لها إلى جانب أصغر عرض والمتوسط (مقاسات الأجهزة)، لاحظ الصورة لتفهم أكثر:
وبالنسبة للتغييرات، فأنت تقوم بإدخال إسم العنصر <div class="top" مثلا وسوف تقوم بوضع التغييرات التي ستحصل عند مقاسات الكمبيوتر والتابلت والهاتف كذلك، وتقوم بنفس هذه العملية لكل عنصر حتى تكون قد جعلت القالب تجاوبيا بأكمله (من الهيدر إلى الفوتر)، لاحظ الصورة قرائي العزيز:
العملية تعتبر صعبة نوعا ما خصوصا إذا لم تكن أنت من صمم القالب لهذا في هذه الحالة أنصحك بتحميل قالب تجاوبي. وكنصيحة أوحهها لك أخي الكريم هي أن تركز على التجاوبية أكثر من أي شيء آخر، حيث أن الألوان والخطوط بإمكانك التعديل عليها كما تشاء، أما التجاوبية فوجب عليك أن تعرف اسم كل عنصر والعملية تستدعي الكثير من الوقت والخبرة كذلك.
وبالنهاية إن أصبت فمن توفيق الله عز وجل وإن أخطأت فمن نفسي ومن الشيطان، أستودعكم الله الذي لا تضيع ودائعه والسلام عليكم ورحمة الله تعالى وبركاته.
دمتم في رعاية الله وحفظه!
