7 ابزار تست ریسپانسیو ,

طراحی سایت واکنشگرایی که بتواند در صفحات موبایل و تبلت به خوبی نمایش داده شود قطعا دشوارخواهد بود.

زمانی که صرف انجام این کار می‌شود بسیار با ارزش است زیرا از ۷۰ درصد از کاربران اینترنت با گجت های هوشمند مشغول وبگردی و بازدید از صفحات شما می‌باشند. در دانستنی قبلی در مورد سایت ریسپانسیو صحبت کردیم پیشنهاد می‌کنم « ریسپانسیو بودن یعنی چی؟» را بخوانید.

در حال حاضر طراحی وب سایت و نحوه نمایش آن درموبایل از اهمیت ویژه ای برخوردار است

چنانچه بعضی از سایت ها ابتدا نسخه مو بایل را طراحی می‌کنند و بر اساس آن نسخه دسکتاپ را نیز طراحی می‌کنند

برای اینکه بتوانیم نتیجه عملکرد نسخ واکنش گرا سایت را بررسی کنیم باید شناخت دقیقی از سایزهای موجود صفحه نمایش داشته .
باشیم.
و سایت را در همه این سایتها بررسی و عیب یابی کنیم به همین جهت ابزارهایی در فضای اینترنت برای بررسی هر چه سریعتر سایزهای مختلف صفحه نمایش وجود دارد.

1)ابزار Xrespond

خودش را یک تب مجازی در مرورگر معرفی میکند و نحوه نمایش سایت شما در سایزهای مختلف را در یک صفحه ارایه میکند. در این صفحه با اسکرول افقی میتوانید سایزهای استاندارد صفحات نمایش و نحوه نمایش سایت در آنها را مشاهده نمایید.

عنوان بالای هر پنجره سایز صفحه نمایش آن پنجره و پرطرفدارترین دستگاهی که با این سایز روانه بازار شده است را به شما نشان میدهد. این سایت تعداد زیادی از دستگاه ها موجود را پوشش میدهد و به شما کمک میکند نحوه نمایش در هر یک از آنها را بررسی کنید. همچنین میتوانید ابعاد دلخواه خود را به صورت دستی وارد کنید.

2)تست ریسپانسیو سایت با Responsinator

این ابزار در سایز های مختلف دستگاه‌های اپل مورد توجه قرار گرفته و با استفاده از کادری بسیار زیبا در اطراف قاب حال و هوای نمایش در موبایل و تبلت را برای کاربر بیشتر تداعی می‌کند
این ابزار شبیه ابزار قبلی است با این تفاوت که در سایز های مختلف در زیر هم نمایش داده شوند.

3) ابزار تست Google Mobile Test

به جرات میتوان گفت قویترین و معتبرترین ابزار موجود برای تست ریسپانسیو سایت ابزار معرفی شده توسط گوگل یا همان Mobile Friendly Test است. تفاوت اصلی آن به ابزارهای دیگر این است که در اینجا نمایی از سایت در سایزهای مختلف نمایش داده نمیشود بلکه براساس استانداردهای گوگل تجربه کاربری در موبایل بررسی میشود.

به طور مثال اگر در صفحه شما اسکرول افقی ایجاد شده باشد، سایز نوشته ها مناسب نباشد یا دکمه ها بیش از اندازه به هم نزدیک باشند این ابزار به شما اطلاع خواهد داد. اگر در این تست نمره قبولی بگیرید گوگل صفحه شما را ریسپانسیو خواهد شناخت.

4) ابزار تست Am I Responsive

در این ابزار  بعد از آنکه آدرس سایت را وارد کردید نحوه نمایش سایت شما را در چهار صفحه موبایل تبلت لپ تاپ و دسکتاپ با چیدمانی مناسب در کنار هم نمایش می‌دهد

این ابزار با سایر ابزارهای معرفی شده متفاوت بوده و برای برای تست نسخه ریسپانسیو سایت کارایی ندارد

این ابزار برای ایجاد اسکرین شات از نمونه کار طراحی سایت بسیار مناسب بوده و میتوانید خروجی را برای مشتریان خود ارسال کنید یا تصویر آن را در بخش نمونه کارهایتان قرار دهید.

نکته جالب در این ابزار آن است که شما میتوانید به راحتی جای هریک از این دستگاه ها را تغییر داده و چیدمان متفاوتی برای خود ایجاد نمایید. همچنین این ابزار میتواند سایت هایی که بر روی localhost خود طراحی کرده اید را بررسی کرده و خروجی مناسب را به شما نمایش دهد.

5) ابزار تست chrome Inspect Element

همه ابزارهای معرفی شده تا اینجا بر روی آدرس های اینترنتی و سایت های دیگر بودند ولی شما ابزاری در اختیار دارید که همواره در دسترس است، گوگل کروم! برای استفاده از این ابزار کافیست روی صفحه راست کلیک کرده و گزینه Inspect Element را بزنید. در این مرحله یک پنجره به شما نمایش داده میشود که در گوشه ای از آن آیکون موبایل را مشاهد میکنید. با انتخاب این آیکون نحوه نمایش سایت در موبایل و تبلت را مشاهده خواهید کرد.

این ابزار قابلیت تعیین سایز به صورت دستی، انتخاب از سایزهای پیش فرض و پرکاربرد و تغییر نحوه نمایش از افقی به عمودی و برعکس را در اختیار شما قرار میدهد. همچنین ممکن است برخی از سایت ها امکان نمایش به صورت آی فریم را غیرفعال کرده باشند که در این صورت هیچ یک از ابزارهای معرفی شده کاربردی برای شما نخواهند داشت ولی با استفاده از گوگل کروم میتوانید به راحتی هر سایتی را بررسی کنید.

6)ابزار تست Designmodo:

یکی دیگر از ابزارهای تست ریسپانسیو بودن سایت، ابزار Designmodo است.
این ابزار رایگان به شما اجازه می‌دهد سایت خود را در مرورگر بر اساس عرض خاصی، ببینید. قابلیت عالی دیگری که در این ابزار گنجانده شده است، تنظیم صفحه مبتنی بر گرید( شبکه) است.

شما می‌توانید صفحه و پیکسل های آن را بررسی کنید و حتی گرید صفحه را به کمک این اپلیکیشن بخوانید.

در کنار عرض های از پیش تعریف شده قادرید صفحه پیشن نمایش را درگ کنید تا به عرض دلخواه و مدنظر شما برسد.

اگر مجبورید عرض یا ارتفاع را وارد کنید نگران نباشید.

این ابزار ورودی عرض و ارتفاع را هم در اختیار شما قرار داده است.

آیکون دستگاه در گوشه سمت راست و بالای صفحه، به شما اجازه می‌دهد از ده ها اندازه رایج استفاده کنید

و بر اساس آن سایت خود را مورد بررسی قرار دهید.

7) ابزار تست responsive design checker

این ابزار سه دسته اصلی را شامل می‌شود: تبلت، تلفن و دسکتاپ. از این میان، اندازه و رزولوشن مختلف صفحه نمایش را برای هر دستگاه ارائه می‌دهد و ریسپانسیو بودن صفحه شما را آزمایش می‌کند.