7 أدوات مجانية لاختبار تخطيطات مستجيبة
يجب تصميم كل موقع على الويب باستخدام منهج سريع الاستجابة. لإبقائك على المسار الصحيح ، سيضمن لك الاختبار في وقت مبكر وفي كثير من الأحيان ، باستخدام أيٍّ من أدوات الاختبار المتجاوبة هذه ، أن التصميم سيبدو على جميع المتصفحات وعلى جميع أحجام مرات العرض.
كل موقع حديث يحتاج تصميم سريع الاستجابة . هذا يتطلب المزيد من الجهد ولكن النتيجة النهائية جديرة بالاهتمام.
إنني في الواقع أنصح باختبار أفكارك باستخدام أدوات التصميم المتجاوبة لمعرفة كيف ينظر موقعك في كل مرحلة. يمكنك البحث عن مشكلات سهولة الاستخدام على أحجام مختلفة للشاشة من خلال أداة واحدة سهلة الاستخدام.
وهذه الأدوات المجانية هي أفضل الخيارات للاختبارات سريعة الاستجابة حيث إنها جميعها سهلة الاستخدام للغاية. والأفضل من كل ذلك هو دعم العديد من أحجام الأجهزة حتى يمكنك الحصول على شعور جيد لكيفية ظهور التصميم من الهواتف الذكية إلى أجهزة الكمبيوتر المكتبية.
1. XRespond
ال التطبيق XRespond يطلق على نفسه "مختبر الجهاز الظاهري" وأود أن أقول هذا هو المكان المناسب على.
مع هذا الموقع يمكنك معاينة كيف يبدو أي موقع على مجموعة متنوعة من الأجهزة. يعمل الموقع بأسلوب أفقي طويل ، حيث يتعين عليك التمرير الجانبي لمشاهدة جميع تنسيقات الشاشة.
يخبرك الملصق الموجود فوق كل شاشة بالحجم الدقيق وأي جهاز يطابقه. بالإضافة إلى القائمة المنسدلة ، هناك مجموعة واسعة من الهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة لاختبار أجهزة محددة.
حتى أن القائمة المنسدلة تدعم إعدادًا مخصصًا للعرض / الارتفاع إذا كنت تريد معرفة كيف يظهر موقعك على شاشات محددة. أداة اختبار ممتازة للتصميم سريع الاستجابة وتدعم الكثير من التنوع في أنماط الأجهزة.
2. المقيم
تطبيق واحد مماثل قد تستمتع أيضا هو Responsinator .
بدلاً من استخدام شريط تمرير أفقي يسرد هذا الموقع كل معاينة جهاز في عمود رأسي. وبهذه الطريقة يمكنك التمرير لأسفل عبر كل جهاز ومعاينة الموقع على كل جهاز.
تشتمل الأجهزة على أجهزة iPhones وأجهزة Android Nexus الأكثر شيوعًا ، مع كل من معاينات الصورة والأفقية. ستجد أيضًا معاينات جهاز iPad أيضًا في الوضع الرأسي والأفقي.
ميزة أخرى رائعة هي التبديل بين HTTP و HTTPS. يقدم المقيم كلا النوعين لمعاينة المواقع حسب عنوان URL الذي تقوم بإدخاله. سيطابق تلقائيًا أي موقع تقوم بمعاينته لتجنب أخطاء SSL.
3. مدقق التصميم المستجيب
هل تحتاج إلى التحقق بسرعة مما إذا كان موقع الويب يستجيب فعلاً؟ ثم حاول استخدام هذا مدقق التصميم المستجيب مصنوعة خصيصًا لأحجام الشاشات المخصصة.
بمجرد إدخال عنوان URL ، يمكنك التحكم الكامل في مساحة الاختبار المتجاوبة. يمكنك تغيير العرض / الارتفاع بالطريقة التي تريدها وحتى استخدامها لمطابقة نسب شاشة معينة إذا كنت تستخدم أداة نسبة العرض إلى الارتفاع .
في الشريط الجانبي ، ستجد عددًا كبيرًا من أحجام الشاشات المحددة مسبقًا للأجهزة الشائعة مثل Nexus tablets و Kindles ، وحتى الهواتف الأحدث مثل Google Pixel.
يدعم الموقع أيضًا أحجام الشاشة الكبيرة مع شاشات سطح المكتب التي تصل إلى 24 بوصة . من المفاجئ أن هذه الأحجام الكبيرة تعمل بشكل جيد حتى على الشاشات الصغيرة نظرًا لأن جزء المعاينة يتغير حجمه استنادًا إلى النسبة ، وليس عرض البكسل الكلي.
لذلك إذا كنت تحاول اختبار شاشات 1920px على شاشة MacBook الصغيرة ، فإن هذه الأداة تستحق وضع إشارة مرجعية.
4. اختبار Google Mobile
جوجل مليء بأدوات عظيمة لمشرفي المواقع و اختبار التناسب للجوّال هو مثال واحد من هذا القبيل.
أداة الاختبار هذه ليست في الواقع أداة معاينة ولا تساعدك في تحديد أخطاء واجهة المستخدم. وبدلاً من ذلك ، فهي أداة مخصصة للجوّال لتحديد المشكلات في موقعك على الجوّال.
بعد تشغيل الاختبار ، ستتمكن من المرور أو الفشل كموقع متوافق مع الجوّال. هذا النوع صغير جدًا جدًا بالنسبة إلى المصممين ، لكن Google تقدم نصائح استنادًا إلى مجالات المشكلات وعناصر الصفحة التي يمكن أن تستخدم التحسين.
حافظ على هذا محفوظًا كأداة اختبار متحركة جديرة بالثقة. إنه ليس موردًا كاملاً للاختبار سريع الاستجابة ، ولكنه مكان رائع لجمع المعلومات ، وقد يأتي من ربما الشركة الأكثر موثوقية على الويب.
5. أداة مات كرسلي المستجيبة
مصمم ومطور مات كيرزلي صدر له الخاصة الحرة أداة اختبار للتخطيطات المتجاوبة. هذا واحد أبسط بكثير من الآخرين وليس لديه الكثير من الرتوش.
وبدلاً من ذلك ، هو عبارة عن أداة معاينة موقع مضمنة بسيطة مع 5 عرض ثابت: 240 بكسل ، و 320 بكسل ، و 480 بكسل ، و 768 بكسل ، و 1024 بكسل.
تعرض أجزاء المعاينة أشرطة التمرير بحيث يمكنك التنقل عبر المحتوى دون جهد. ومع ذلك ، لا يمكنك النقر فوق أي ارتباطات أو استعراض صفحات أخرى داخل الأجزاء ، لذلك هذا هو الأفضل حقًا لاختبار الصفحات المفرد.
ولكن بالنسبة لأداة بسيطة تعمل على إنجاز هذه المهمة ، فإنها تعد واحدة من أدوات الاختبار القليلة التي تقدم عرضًا بمقدار 240 بكسل بشكل افتراضي.
6. هل أنا مستجيبة؟
ربما لن تحتاج إلى هذه الأداة إذا كنت تبحث عن دقة مثالية للبيكسل.
بدلا من ذلك هل أنا مستجيبة؟ يعمل موقع الويب بشكل أفضل لإجراء عمليات تحقق ومعاينة سريعة على بعض أنواع الأجهزة الشائعة.
ما عليك سوى إدخال عنوان URL لموقع الويب وسيتم تحميله إلى أربعة أجزاء معاينة للأجهزة: هاتف ذكي وجهاز لوحي وكمبيوتر محمول وسطح المكتب. هذه ليست على نطاق بحيث كنت تبحث فقط في الموقع كنسبة.
ولكن هذا أمر رائع حقًا للحصول على لقطات شاشة لموقعك لعرض كيفية ظهوره في العديد من الأجهزة. يكون العرض دقيقًا للتدرج ويعتمد على متصفحك في عملية العرض الصحيحة.
بالإضافة إلى أن هذه الأداة تسمح لك بتشغيل عناوين المضيف المحلي حتى يمكنك التحقق من المشاريع التي تريدها بناء محليا على حاسوبك.
7. Designmodo استجابة مستجيبة
أداة أخرى أنا حقا أحب هو اختبار تصميم الويب سريع الاستجابة تم إنشاؤها بواسطة Designmodo. تتيح لك هذه الأداة المجانية مرة أخرى معاينة موقع في متصفحك بناءً على عروض معينة.
لكن الإضافة الرائعة إلى هذه الأداة هي إعداد الصفحة المستند إلى الشبكة. يمكنك التحقق من صفحتك للحصول على نقاط البكسل وحتى الدراسة شبكة الصفحة باستخدام هذا webapp.
إلى جانب عروض الأجهزة المحددة مسبقًا ، يمكنك أيضًا سحب جزء المعاينة لملاءمة عرض الشاشة الذي تختبره. يحتوي على مدخلات للعرض / الارتفاع إذا كنت بحاجة إلى إدخال الأحجام يدويًا أيضًا.
ولكن كل رمز جهاز في الزاوية العلوية اليمنى يتيح لك الاختيار من بين العشرات من أحجام الشاشات الشائعة مما يجعل هذه الأداة مثالية للتحقق من أي جهاز يمكنك تخيله.
