Posted on

سرفصل محتوا

  • تست ریسپانسیو بودن سایت
  • وسیله Xrespond
  • BrowserStack
  • تست ریسپانسیو سایت با Responsinator
  • Google Mobile Test
  • وسیله تست واکنشگرا بودن Matt Kersley
  • Am I Responsive
  • Designmodo Responsive Test
  • Chrome Inspect Element
  • FireFox Responsive Design
  • کلام آخر

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

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

موبایل

اگه هنوز با معنی ریسپانسیو یا عکس العمل گرا آشنا نشدین پیشنهاد میکنیم مقاله های موبایل فرندلی mobile-friendly وب چیه؟ و آموزش سئو موبایل رو بخونین.

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

اراده کردن

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

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

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

وسیله Xrespond

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

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

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

BrowserStack

یکی دیگه از ابزارای فوق العاده تست ریسپانسیو سایت BrowserStackه که می تونین سایت خود رو در ۱۳ اسمارت فون و گوشی موبایل و همینطور تبلت تست کنین.

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

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

این وسیله شباهت زیادی به به وسیله قبلی داره فرقش اینه که به جای اسکرول افقی سایزهای جور واجور رو زیر هم به شما نمایش می ده.

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

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

Google Mobile Test

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

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

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

در عکس زیر تست ریسپانسیو بودن سئو پارسیان با این وسیله واسه شما به نمایش دراومده.

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

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

وسیله تست واکنشگرا بودن Matt Kersley

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

۲۴۰px, ۳۲۰px, 480px, 768px, ۱۰۲۴px.

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

به عنوان یه وسیله ساده، این گزینه کار خود رو خوب انجام میده و یکی از تک و توک وسایل تستیه که عرض ۲۴۰ پیکسل رو به طور پیش فرض ارائه می کنه.

Am I Responsive

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

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

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

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

Designmodo Responsive Test

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

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

Chrome Inspect Element

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

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

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

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

FireFox Responsive Design

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

واسه فعال کردن این حالت فقط کافیه در فایر فاکس کلیدای ترکیبی Ctrl + Shift + M رو بزنین میبینین که یه وسیله پر سرعت و سبک جهت تست عکس العمل گرایی صفحه شما فعال شد این وسیله فایرفاکس امکانات امتیازات بسیاری داره و می تونین صفحه خود رو در چندین اندازه جور واجور تست کنین همینطور می تونین در بین تست کردن عکس هم بگیرین و به اشتراک بذارید …

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

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

کلام آخر

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

منبع: websima.com – wp-qaleb.ir – novinvision.com