تست ریسپانسیو بودن سایت با ۶ ابزار رایگان

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

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

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

ابزار Xrespond

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

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

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

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

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

بررسی گوگل موبایل

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

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

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

آیا من پاسخگو هستم

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

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

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

تست پاسخگو Designmodo

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

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

عنصر بازرسی کروم

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

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

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

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