خلال تجربتي مع ووردبريس كان ضمان ظهور موقعي بشكل مثالي على جميع الأجهزة والشاشات يشكل تحديًا كبيرًا، فقد كنت أعتمد على الطرق التقليدية والغير فعالة بشكل كبير (مثل أدوات المطور في المتصفح) لأختبر طريقة ظهور موقعي على الأجهزة الأخرى، وهذا ما كان يتطلب كثيرًا من الوقت والجهد، وانطلاقًا من ذلك بدأت أبحث عن حل فعال لهذه المعاناة، وبعد قليل من البحث وجدت أداة Responsively App التي مكنتني من اختبار موقعي على عدد كبير من الأجهزة بأحجام شاشات مختلفة وبشكل متزامن.
في هذه المقالة سأشاركك تجربتي العملية مع أداة Responsively App وأوضح لك كيف مكنتني من معاينة موقعي في وقت واحد على عدد من الأجهزة.
ما هي أداة Responsively App؟
أداة Responsively App هي أداة مجانية ومفتوحة المصدر تتيح لأصحاب المواقع ومطوريها معاينة مواقعهم واختبارها على عدد كبير من الشاشات والأجهزة المختلفة، حيث يمكن للمستخدم اختيار أنواع الأجهزة التي يريد اختبار موقعه عليها ومعاينتها معًا في شاشة واحدة بسهولة ودون الحاجة لاستخدام أدوات المطور في المتصفح.
تعرض الأداة الموقع في جميع الأجهزة التي تم اختيارها جنب إلى جنب وأي نشاط أو تفاعل ينفذ على إحدى الشاشات يتم تطبيقه تلقائيًا على البقية، مما يساعد على فهم تجربة المستخدم واكتشاف أخطاء التصميم أو عدم التوافق مع بعض الأجهزة ببساطة ودون عناء.
تتميز أداة Responsively App بعدد كبير من المميزات مثل المعيانة المتزامنة وإمكانية إضافة أجهزة جديدة بأبعاد شاشات مخصصة وتوفر أدوات تطوير متكاملة، بالإضافة إلى واجهة استخدام سهلة وبسيطة تمكن أي شخص من استخدام الأداة بدون مشاكل، وهذا ما يجعلها حلًا مثاليًا لاختبار تصميم مواقع ووردبريس وضمان ظهوره بشكل مثالي لدى جميع المستخدمين.
اقرأ أيضًا: كيف تجعل موقعك متجاوبًا وصديقًا للهواتف الذكية.
تجربتي مع أداة Responsively App لاختبار موقعي على مختلف الأجهزة
بداية توجهت إلى الموقع الرسمي لأداة Responsively App ونزلتها عن طريق النقر زر (Download Now) الموجود في أعلى يمين الصفحة الرئيسية للموقع.
تنزيل أداة Responsively App
بعد ذلك ثبتت الأداة على حاسوبي الشخصي بالطريقة الإعتيادية وفتحتها لتظهر لي صفحة الأداة الرئيسية متضمنة مجموعة من الأدوات مع معاينة لمحرك البحث جوجل على ثلاث أجهزة مختلفة.
الصفحة الرئيسية لأداة Responsively App
من أجل أن أختبر تصميم موقعي على الأداة وضعت رابطه ضمن الحقل الموجود في أعلى الصفحة الرئيسية ونقرت على (Enter) ليظهر موقعي ضمن جميع الشاشات بدلًا من محرك جوجل.
وضع رابط الموقع بالحقل الخاص به
بعد ذلك تصفحت موقعي ضمن الأداة ولاحظت أن أي نشاط أقوم بها على إحدى الشاشات يتم تطبيقه تلقائيًا على البقية، وهذا ما أفادني كثيرًا في اختبار تصميم الموقع.
بعد أن تصفحت موقعي على الأجهزة الافتراضية في أداة Responsively App بدأت أستكشف الإعدادات والميزات التي توفرها، وأول ما لفت انتباهي كان مجموعة من الأزرار الموجودة فوق كل شاشة من شاشات العرض.
استطعت من خلال هذه الأزرار إعادة تحميل الموقع وأخذ لقطات شاشة للقسم الظاهر في إحدى الشاشات أو للصفحة كاملة ضمن أحد الأجهزة.
كما تمكنت من فصل معاينة إحدى الشاشات عن البقية (أي أن التصفح الذي أقوم بها ضمنها لا يطبق على البقية)، وفتح أدوات المطور (DevTools) الخاصة بالجهاز الذي أريده وتحويل وضع الأجهزة إلى الوضع الأفقي بدلًا من العمودي، وهذا ما ساعدني على اختبار تصميم موقع الووردبريس على جميع السيناريوهات الممكنة.
بالإضافة إلى ذلك كان يوجد زر استطعت من خلاله العودة إلى أعلى صفحات الموقع وز آخر من أجل عرض الأبعاد حول كل شاشة، وقائمة منسدلة يمكن من خلالها اختبار طريقة ظهور الموقع للأشخاص الذين يعانون من مشاكل في الرؤية.
الأزرار الموجودة أعلى كل شاشة
بعد أن اختبرت تصميم موقعي على الأجهزة الافتراضية لأداة Responsively App أردت اختباره على شاشات وأجهزة مخصصة، ولذلك نقرت في أعلى يمين الصفحة الرئيسية على زر (+) لتظهر لي صفحة تتضمن ثلاثة أقسام أساسية.
القسم الأول باسم (MANAGE SUITS) يمكن من خلاله إنشاء مجموعة جديدة من الأجهزة التي يتم معاينة طريقة ظهور الموقع فيها جنبًا إلى جنب، والقسم الثاني باسم (DEFAULT DEVICES) يستخدم لتحديد الأجهزة التي ستتم معاينتها، أما القسم الأخير باسم (CUSTOM DEVICES) فهو من أجل إنشاء أجهزة بأحجام شاشات مخصصة.
صفحة تحديد أجهزة المعاينة
نقرت في قسم MANAGE SUITS على (Add Suite) لإنشاء مجموعة أجهزة جديدة، فطلب مني تحديد اسم لها، اخترت الاسم الذي أريده ونقرت على (Add).
إنشاء مجموعة أجهزة جديدة
عند إنشاء مجموعة جديدة تكون متضمنة لجهازًا افتراضي فلا يمكن أن تكون المجموعة فارغة من الأجهزة، ولذلك من قسم DEFAULT DEVICES حددت الأجهزة التي أريد اختبار تصميم موقعي عليها، ثم ألغيت تحديد الجهاز الافتراضي الذي تضيفه الأداة إلى المجموعة وهو iphone 12 pro.
اختيار الأجهزة التي ستتم معاينة الموقع عليها
بعد ذلك لإنشاء جهاز جديد بأبعاد شاشة مخصصة نقرت على زر (Add Custom Devices) في قسم CUSTOM DEVICES، فظهرت لي نافذة تتضمن عددًا من الحقول التي يجب ملؤها لإنشاء الجهاز.
النقر على Add Custom Devices
ضمن هذه النافذة حددت اسم الجهاز وعرض شاشاته وطولها ونوعه (هاتف محمول، جهاز لوحي، حاسوب) ثم نقرت على (Add).
ملئ الحقول والنقر على Add
رتبت الأجهزة ضمن المجموعة التي أنشأتها بالشكل الذي أريده وعدت إلى الصفحة الرئيسية للأداة ووجدت أن موقعي قد ظهر على جميع الأجهزة الجديدة وتمكنت من اختبار تصميمه عليها بسهولة.
معاينة الموقع على الأجهزة الجديدة
بفضل هذه المعاينة، تمكنت من رصد مشاكل في التصميم لم أكن لألاحظها بسهولة بالطرق التقليدية، مثل تداخل النصوص مع الصور على الشاشات الصغيرة أو عدم ظهور أحد الأزرار بشكل صحيح على الأجهزة اللوحية.
خلاصة تجربتي مع أداة Responsively App
بعد استخدامي لأداة Responsively App لفترة، يمكنني القول بأنها من أفضل الحلول التي يمكن الاعتماد عليها لاختبار توافق تصميم موقع الووردبريس مع مختلف الأجهزة والشاشات، فمن خلال الميزات التي توفرها تمكنت من إجراء اختبار متكامل يغطي عددًا كبيرًا من السيناريوهات التي يمكن رؤية موقعي فيها بسهولة ووقت قصير دون الحاجة لاستخدام الطرق التقليدية الضعيفة والمملة.
وبالإضافة إلى المميزات التي ذكرتها ضمن التجربة العملية توفر الأداة إمكانية اختبار المواقع المحلية والتحكم بطريقة عرض الأجهزة ضمن الصفحة الرئيسية (أعمدة، شبكة) وتوفر أيضًا وضع ليليًا رائعًا.
في الختام إذا كنت مطورًا أو صاحب موقع تبحث عن طريقة فعالة لضمان ظهور موقعك بأفضل شكل ممكن على جميع الشاشات، فإنني أنصحك بشدة بتجربة Responsively App التي أثبتت فعاليتها العالية ووفرت علي كثيرًا من الوقت والجهد.
معاذ ملص
30 أغسطس، 2025