1- تست ریسپانسیو بودن سایت با ابزار Xrespond:

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

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

تست ریسپانسیو بودن سایت با ابزار Xrespond

2-تست ریسپانسیو بودن سایت باResponsinator

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

ظاهر جذاب این سایت به شما کمک می‌کند که حتی از تصویر ساخته شده به عنوان یک نمونه از سایت خود در موبایل استفاده کرده و در طراحی های خود از آن استفاده کنید. بعلاوه برای هر دستگاه باید در صفحه اسکرول کنید و به این صورت، شمای دقیق‌تری از سایت به شما ارائه می‌شود. یکی از امکانات جالب دیگر ابزار Responsinator این است که سایت را برای هر دستگاه در دو حالت عمودی و افقی نمایش می‌دهد.

3- تست ریسپانسیو بودن سایت با Google Mobile Test

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

چرا Google Mobile Test  را معتبرترین و بهترین ابزار تست ریسپانسیو سایت می‌دانیم؟

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

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

در ابزار گوگل وب مستر فضایی برای تست موبایل فرندلی دیده شده‌است و همزمان با ورود ربات گوگل به صفحات شما تست نیز برای آنها انجام‌می‌شود و هر صفحه ای که استانداردهای طراحی ریسپانسیو را نداشته‌باشد درآنجا برای شما لیست خواهدشد. به‌عبارت دیگر خود گوگل همه صفحات را بررسی‌می‌کند و شما تنها صفحاتی که دارای ایراد هستند را بازبینی می‌کنید و نیازی به بررسی تعداد زیادی از صفحات نخواهیدداشت. برای استفاده از این ابزار کافیست در جستجوی گوگل عبارت Google Mobile Test را واردکنید و سپس آدرس سایت موردنظر خود را در داخل کادر واردکنید(بطور مثال avinagency.com):

تست ریسپانسیو بودن سایت با Google Mobile Test

سپس دکمه TEST URL را کلیک کنید و منتظر آنالیز بمانید. اگر سایت ریسپانسیو بود تصویری مانند تصویر زیر با محتوای page is mobile friendly خواهیددید.

تست ریسپانسیو بودن سایت با Google Mobile Test

4- Am I Responsive

این ابزار کارایی کاملا متفاوتی نسبت به سایر ابزارهایی که تاکنون معرفی کرده‌ایم دارد بعد از آنکه آدرس سایت خود را واردکردید، ابزار Am I Responsive نحوه‌ی نمایش آن را در چهار سایز موبایل، تبلت، لپ تاپ و دسکتاپ با چیدمانی مناسب و در کنارهم نمایش‌می‌دهد. البته این ابزار برای تست نسخه ریسپانسیو سایت کارایی ندارد ولی با نحوه نمایش جالبی که ایجاد می‌کند به شما اجازه‌می‌دهد یک اسکرین شات زیبا از نحوه نمایش سایت داشته‌باشید.
این ابزار برای ایجاد اسکرین شات از نمونه کار طراحی سایت بسیارمناسب بوده و می‌توانید خروجی را برای مشتریان خود ارسال‌کنید یا تصویر آن را دربخش نمونه کارهایتان قراردهید.

5. Designmodo Responsive Test

ابزار Designmodo Responsive Test تنها یک پنجره از سایت را نمایش می‌دهد ولی با پیکسل بندی افقی و عمودی. بدین معنی که این ابزار در سمت راست صفحه، یک صفحه شطرنجی براساس تعداد پیکسل نمایش می‌دهد که شما می‌توانید بصورت دستی و به راحتی ابعاد موردنظرتان را واردکرده و ابعاد صفحه را تغییردهید.

Designmodo Responsive Test

همچنین همانطور که در تصویر می‌بینید، می‌توانید انواع دستگاه‌ها و برند‌های پرطرفدار را انتخاب کرده و ریسپانسیو بودن سایت را چک کنید.

Designmodo Responsive Test

Chrome Inspect Element- 6

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

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

Chrome Inspect Element

جمع بندی

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

  • اگر به سئوی سایت اهمیت زیادی می‌دهید، می‌توانید از گوگل استفاده کنید.
  • اگر دقت در تست ریسپانسیو برای شما مهم است، از ابزار Xrespond استفاده کنید.
  • و اگر لازم است نمایی از سایت به مشتری ارائه دهید Am I responsive بهترین گزینه است.