لا شك أن تطور عالم الأجهزة اللوحية وتوجه الكثير من الناس لتصفح المواقع اليوم من هواتفهم النقالة أو أي جهاز آخر يدعم الاتصال بالإنترنت جعلت أصحاب المواقع لجعل مواقعهم متجاوبة مع الجهّاز المشغل اليوم ضرورة لا خيار، أي أن تصميم المواقع سيتجاوب ويظهر بمظهر حسن وقابل للاستخدام على أي جهازٍ كان، وهو ما يُسمى في عالم تصميم المواقع بالمواقع المتجاوبة أو Responsive، كما هو الحال في “مدونة خارج الصندوق“.
ليس ذلك وحسب، قبل أيام أعلنت جوجل عن إعادة ترتيب المواقع في محرك بحثها “جوجل” لجعل المواقع المتجاوبة تحتل الأولوية في نتائج البحث، وهذا ما يعطي أصحاب المواقع سبب آخر للاهتمام بالتصاميم المتجاوبة وتخطي اختبارات جوجل بذلك.
هذه التدوينة لا تشرح الآلية، فعالم الانترنت موجود ويمكنك البحث هنا وهناك لدورات أو دروس. خلال عملي في مجال العمل الحر طُلبت مني العديد من المهام لتحويل العديد من المواقع إلى مواقع متجاوبة، لكن كانت هناك معضلة أساسية حيث أغلب المواقع تحتوي على “جداول” لعرض البيانات، وأغلبها تحتوي على أعمدة وصفوف كبيرة ممّا صعّب عليّ مهمة “ضغط” هذه الجداول حتى تحتويها شاشات الهاتف النقال الصغيرة:
لذلك وأثناء بحثي هنا وهناك عن بعض الحلول، وجدت هذه التدوينة الرائعة التي لخصّت عشر حلول رائعة تمكّنك من تجاوز هذه المعضلة وتظهر الجداول بمظهر حسن، بدءاً من حلول بسيطة عبر CSS أو من خلال مكاتب JavaScript مع jQuery وقليلاً من بهارات CSS…وأيضاً، هذه التدوينة غير مخصصة لشرح الطرق المتوفرة في تدوينة أخانا الكريم 🙂
توجهت إلى الحل التاسع وهو ما كان يناسبني، ويمكنك الاطلاع على الكود الخاص به من هنا مع نموذج عمله، وقمت بعمل تطوير خفيف على الطريقة، قمت بعمل مكتبة صغيرة بعنوان multiResponsiveTables وهي مكتبة jQuery مع كود بسيط في CSS ليدعم جداول متعددة في نفس الصفحة، يمكنك الاطلاع على كود المكتبة وتحميلها من هنا.
والآن، قمت باستخدام هذه المكتبة في “مدونة خارج الصندوق“، وهذه هي النتيجة الآن:
هذه من تدوينة بعنوان “مصطلحات في مجال العمل الحر” وكانت المشكلة أن الجدول غير متجاوب على غرار بقية المدونة، وقمت باستخدام المكتبة وكما ترون أنها نتيجة متواضعة وجدول قابل للقراءة.
يمكنك التطوير أكثر على هذه المكتبة ومشاركتنا اياها، وبالطبع لا تنسى مشاركة التدوينة مع أصدقائك 🙂
CC BY-NC-SA 4.0
التعليقات