مع هذا الموقع المميز يمكنك الآن أن تعرف هل تصميم موقعك متجاوب مع مختلف الأجهزة والشاشات والمقاسات أم لا ؟
مما لا شك فيه أن مقاسات أجهزة الهواتف النقالة ليست هي نفسها مقاسات أجهزة التابلت وليست هي نفسها مقاسات الحواسيب وهكذا... هل تساءلت يوما كيف يظهر تصميم مدونتك أو موقعك على مختلف الحواسيب والأجهزة اللوحية والهواتف الذكية ؟
أضع لك في هذه التدوينة موقعا رائعا يجعلك تتحقق من مدى تجاوب موقعك أو مدونتك مع مختلف الأجهزة والشاشات والمقاسات.
هل تصميم موقعك متجاوب مع مختلف الأجهزة والشاشات والمقاسات أم لا؟
1- ما معنى التصميم المتجاوب؟
يستلزم التصميم المتجاوب لمواقع الويب أو مايطلق عليه اختصارا ب RWD = Responsive Web Design يتطلب هذا التصميم أن تجعله مثاليا للعرض والتنقل على مجموعة كبيرة من الأجهزة، بما في ذلك أجهزة الكمبيوتر التقليدية والهواتف الذكية والأجهزة اللوحية وعموما يجب أن يظهر تصميم موقعك متجاوبا مع جميع الشاشات والمقاسات.2- آلية عمل التصميم المتجاوب؟
يستخدم تصميم الويب المتجاوب طلبات البحث عن الوسائط، والتي تمكن الصفحة من استخدام قواعد نمط CSS3 المختلفة؛ بالإضافة إلى شبكات القوائم والصور المرنة، بحيث يعدل موقع الويب نفسه تلقائيا ويستجيب لمقاسات مجموعة متنوعة من الأجهزة المحمولة وشاشاتها.3- تحديات التصميم المتجاوب؟
التصميم المتجاوب هو نعمة لمطوري مواقع الويب المتحركة، ومن بين التحديات التي يطرحها التصميم ما يلي:
- يمثل تحويل مواقع الويب القديمة تحديا كبيرا لمطوري الويب. ربما يتطلب ذلك منهم إعادة النظر في تصميم الموقع بأكمله وإعادة تقديمه من البداية.
- لا يمكن تركيب جداول البيانات والهياكل المعقدة الأخرى، التي تحتوي على عدة صفوف وأعمدة، بشكل صحيح للعرض على الأجهزة المحمولة الصغيرة مثل الهواتف الذكية.
- تعتبر إعلانات البانر ومقاطع الفيديو عناصر أخرى غير مائعة وبالتالي لا يمكن تغيير حجمها لتلائم أجهزة معينة وطبعا يتم حل هذه المشكلة إذا كان المعلنون أنفسهم يقدمون إصدارات مختلفة من إعلاناتهم بما يتناسب مع مواصفات الأنظمة المتنقلة المختلفة.
ويعمل المطورون على حل بعض القضايا الأكثر شيوعا التي تنشأ مع التصميم المتجاوب وهناك تطورات تحدث في هذا المجال. تبقى الحقيقة أن التصميم المتجاوب هو مستقبل تصميم الويب للجوال.
4- هيا لنكتشف هل تصميم موقعك متجاوب؟
أولا ادخل إلى الموقع الذي وضعت لك رابطه أسفل التدوينة واتبع ما كتبته لك في الصورة أدناه ( فقط استبدل رابط مدونتي برابط مدونتك ) :
اختر أي جهاز لترى تصميم مدونتك عليه كما في الصورة أدناه
لاحظ التصميم الجديد للمدونة على iphone 5 وكيف تم تخزين أقسام المدونة في قوائم كما في الصورة أدناه يمكنك أيضا التبديل إلى أجهزة أخرى
شاهد كيف تم ضبط التجاوب على عناوين المواضيع كما في الصورة أدناه
لنختر جهازا جديدا وليكن ipad بمقاس 2048 × 1536 كما في الصورة أدناه
هكذا يظهر تصميم مدونتك على ipad كما في الصورة أدناه
وأخيرا قم بالتبديل على جميع الأجهزة بمختلف مقاساتها وأحجامها وفي حالة لاحظت أن بعض روابط موقعك لا توجد في أماكنها المحددة أو النص يبدو ضخما على حجمه المألوف أو أن الصور متداخلة مع بعضها البعض... فهذا يعني أن تصميم موقعك غير متجاوب.
رابط الموقع : responsivetesttool
اترك تعليقك