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

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

یکی از دلایل مهم این است که ۷۰ در صد کاربران اینترنت از گوشی های موبایل و دیگر دستگاه‌های قابل حمل برای بازدید از سایت‌ها استفاده می‌کنند. حالا یک موضوع دیگر را هم در نظر بگیرید: یک کاربر تنها چند ثانیه صبر می‌کند تا سایت شما بارگذاری شده و در بهترین حالت خود نمایش داده شود، منظورمان از بهترین حالت این است که ظاهر سایت، منظم باشد و کاربر را گیج نکند.
با این حساب بدیهی است که ریسپانسیو بودن سایت، امتیازی مهم و ضروری است. شاید اغراق نباشد اگر بگوییم در حال حاضر نحوه نمایش سایت روی گوشی‌های موبایل، مهم‌تر از نمایش آن، روی لپتاپ‌ها است.

حتی بعضی از سایت ها اولین اولویت خود را، کاربران گوشی می‌دانند و روی Mobile user’s friendly بودن سایت بیشتر سرمایه گذاری می‌کنند. البته ما پیشنهاد نمی کنیم که همه سایت‌ها اولویت را با کاربران گوشی بدانند ولی سایت‌هایی که ذاتا در موبایل بیشتر مورد استفاده قرار می گیرند، باید این کار را انجام دهند.

ابزار Xrespond

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

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

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

تست ریسپانسیو بودن سایت: ابزار Responsinator

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

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

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

وقتی دکمه RUN TEST را فشردید در ادامه منتظر آنالیز می‌شوید .و اگر سایت ریسپانسیو بود تصویری مانند تصویر زیر خواهید دید.

Am I Responsive

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

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

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

Designmodo Responsive Test

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

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

Chrome Inspect Element

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

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

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

جمع بندی

هر کدام از ابزاری که برای شما نام بردیم به نوعی کارآمد هستند و در موقعیت‌های گوناگون به کمک شما می‌آیند. اگر به سئوی سایت بسیار اهمیت می‌دهید می‌توانید از گوگل استفاده کنید .اگر دقت در تست ریسپانسیو برای شما مهم است از ابزار Xrespond استفاده کنید. و اگر لازم است شمایی از سایت به مشتری ارائه بدهید Am I responsive بهترین گزینه است. اگر ابزار‌های بهتر و جالب‌تری برای تست ریسپانسیو بودن سایت، می شناسید.، لطفا در قسمت نظرات با ما در میان بگذارید.