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

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

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

موبایل

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

اراده کردن

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

وسیله Xrespond

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

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

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

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

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

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

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

Am I Responsive

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

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

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

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

گستردگی سایزبندی دستگاه ها و توانایی تغییر ابعاد به صورت دستی موجب شده تا ابزاری موثر و سریع در اختیار شما قرار داده شه.

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

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

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