چگونه تست ریسپانسیو سایت را انجام دهیم

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

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

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

تست ریسپانسیو سایت با گوگل کروم یافایرفاکس

برای اینکه بدون وارد شدن در سایت خاصی ، تست ریسپانسیو سایت را انجام دهید ، میتوانید درداخل گوگل کروم یا فایرفاکس با زد کلید F12 وارد قسمت Developer شوید ( یا میتوانید داخل مرورگر راست کلیک نموده و روی گزینه inspect کلیک کنید ) . همانطور که در تصویر زیر مشاهده می‌کنید ، هنگام بازکردن قسمت Developer با ابزارهای زیادی روبرو خواهید شد که البته نباید ترسی داشته باشید . در این بخش کافیست تا یک کار بسیار کوچک را انجام دهید . اگر بالای قسمت Developer را نگاه کنید ، قسمتی وجود دارد که عرض صفحه شما را نمایش میدهد . اگر نمیتوانید این گزینه را پیدا کنید تنها کافیست کلید های ترکیبی Ctrl + Shift +M را روی کیبورد فشار دهید تا وارد حالت واکنشگرا شوید !

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

• عرض 0 تا 575 پیکسل برای موبایل است
• عرض 576 تا 767 برای عرض موبایل های افقی و تبلت های عمودی
• عرض 768 تا 991 برای تبلت های افقی
• عرض 992 تا 1199برای لپتاپ و مانیتور های متوسط
• عرض 1200 تا 1400 و 1400 به بالا برای نمایشگرهای بزرگ و بسیار بزرگ

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

نکات مهم در تست ریسپانسیو سایت

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

• تصاویر

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

• منو سایت

یکی دیگر از گزینه های مهم دیگر بخش منو سایت است که در حالت های موبایل و تبلت به حالت همبرگری نمایش داده می‌شوند یعنی همان علامت 3 خط (  ) که در بالای وب سایت ها نمایش داده می‌شود و با کلیک روی آن ، منوی سایت برای شما باز می‌شود .

• المان های غیرضروری

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

• تصاویر اضافی

نکته بعدی حذق تصاویر اضافی در گوشی است . برای مثال اسلایدر های بالای سایت ممکن است در گوشی و با توجه به عرض کم ، به درستی نمایش داده نشوند ، و بهتر است که این المان ها در عرض های گوشی موبایل مخفی شوند ( البته این موارد بستگی به خود شما دارد ) !

• مودال و پاپ آپ

مودال ها و پاپ آپ ها مواردی هستند که در گوشی های موبایل کمی اذیت کننده هستند و بهتر است تا حد ممکن مواردی مثل پا آپ و مودال های نمایش را در گوشی موبایل تا حد ممکن کنترل کنید .

• اندازه فونت ها

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

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

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

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

سایت ui.dev

شما میتوانید از طریق ” این آدرس ” وارد سایت ui.dev و قسمت واکنشگرایی شده و با وارد کردن آدرس سایتتان یک نمایش کلی در 4 حالت مشاهده کنید که البته میتوانید داخل هر باکس ، اسکرول نیز بکنید و کل سایت را مشاهده کنید . دقت کنید که در انتهای آدرس سایت علامت / وجود نداشته باشد .

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

ابزارهای دیگری همچچون Browserstack یا CrossBrowser و … نیز وجود دارند که نیاز به ثبت نام داشته و برخی محدودیت ها دارند اما ابزار گوگل بدون دردسر و بسادگی برای شما کار خواهد کرد . امیدواریم این مقاله و توضیحات آن برای شما مفید واقع شود .