تست ریسپانسیو بودن سایت با کامپیوتر؛ ۲ روش ساده و کاربردی

اکثر ما بعد از اینکه سایتمون رو ریسپانسیو می‌کنیم، گوشی رو برمی‌داریم، آدرس سایت رو می‌زنیم، یه نگاه می‌ندازیم و میگیم «خب، مشکلی نداره». تموم.

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

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

اهمیت ریسپانسیو بودن سایت در موبایل

استفاده اکثر کاربران از موبایل

این یکی رو احتمالاً بهتر از ما می‌دونین. بیشتر از نصف کسایی که وارد سایتتون میشن، از گوشی میان. دلیلشم واضحه: گوشی همیشه دم دسته. تو مترو، تو صف نونوایی، وسط ساعت کاری که کسی حواسش نیست؛ آدما هر جا باشن می‌تونن سایت شما رو باز کنن.

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

حساس بودن گوگل روی دیوایس موبایل

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

فقط قالب ریسپانسیو کافی نیست

اینجا یه تصور اشتباه رایج وجود داره. خیلی‌ها فک می‌کنن «من که قالب ریسپانسیو خریدم، پس کارم تمومه». نه، متأسفانه اینجوری نیست.

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

روش اول: تست ریسپانسیو بودن سایت از بخش سفارشی‌سازی وردپرس

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

مسیر دسترسی

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

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

پیش‌نمایش موبایل و تبلت و دسکتاپ

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

همان‌جا درستش کنید

مزیت اصلی این روش همینجاست: شما همزمان که پیش‌نمایش موبایل جلوتونه، می‌تونین از همون پنل کناری تنظیمات رو عوض کنین و بلافاصله نتیجه رو ببینین. مثلاً اندازه‌ی فونت هدر رو کم کنین یا فاصله‌ی بین بخش‌ها رو تنظیم کنین. لازم نیست هر بار ذخیره کنین و برین چک کنین.

روش دوم: تست ریسپانسیو بودن سایت با گوگل کروم

روش دوم که به نظر ما حرفه‌ای‌تر و دقیق‌تره، استفاده از ابزار Device Mode کرومه. حسن بزرگش اینه که باهاش می‌تونین هر سایتی رو تست کنین، نه فقط سایت خودتون. یعنی اگه خواستین ببینین رقیبتون تو موبایل چیکار کرده، از همین راه می‌تونین.

باز کردن Inspect مرورگر

صفحه‌ی موردنظرتون رو تو کروم باز کنین، رو صفحه راست‌کلیک کنین و گزینه‌ی Inspect رو بزنین. (اگه با کیبورد راحت‌ترین، F12 یا Ctrl + Shift + I هم همین کارو می‌کنه.)

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

Toggle Device Toolbar را بزنید

بالای همین پنل، یه آیکون کوچیک شبیه گوشی و تبلت می‌بینین. اسمش Toggle Device Toolbar ـه. روش کلیک کنین (یا Ctrl + Shift + M رو بزنین). همین که کلیک کردین، صفحه‌ی سایت جمع میشه و به شکل موبایل درمیاد.

از همینجا می‌تونین ببینین اندازه و جای اجزای سایت درست تغییر کرده یا نه. این کارو واسه تک‌تک صفحه‌های مهم سایتتون انجام بدین؛ یعنی صفحه اصلی، صفحه محصول، صفحه تماس و صفحه مقاله. معمولاً ایرادا تو صفحه‌هایی پیدا میشن که کمتر بهشون سر می‌زنین.

مدل گوشی را عوض کنید

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

کنارشم یه آیکون واسه چرخوندن صفحه هست. حتماً حالت افقی رو هم چک کنین؛ خیلی از ایرادا فقط تو حالت افقی خودشونو نشون میدن. درصد زوم رو هم می‌تونین از همون نوار بالا کم و زیاد کنین.

ترفندهای کوچک

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

• اگه کلید Shift رو نگه دارین و با موس بکشین، می‌تونین رو صفحه زوم کنین و جزئیات رو دقیق‌تر ببینین.

تست ریسپانسیو بودن سایت با افزونه

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

Responsive Viewer

این افزونه Responsive Viewer چند تا دستگاه رو همزمان و کنار هم نشونتون میده. یعنی به‌جای اینکه هر بار دستگاه رو از منو عوض کنین، تو یه نگاه می‌بینین سایت تو آیفون، پیکسل و تبلت سامسونگ چطور دراومده. واسه وقتی که دارین یه تغییر رو رو چند تا دستگاه چک می‌کنین، عالیه.

Mobile Simulator

اکستنشن Mobile Simulator کارش شبیه Responsive Viewer هست، با این فرق که لیست دستگاه‌های بیشتری داره و ظاهرش واسه بعضیا راحت‌تره. هر دوش رو نصب کنین، ببینین کدوم به کارتون میاد.

یک نکته‌ی مهم

همه‌ی گوشیا یه اندازه نیستن. اصلاً و ابداً. از گوشی‌های کوچیک ۵ اینچی گرفته تا اون فبلت‌های ۶.۹ اینچی، یه طیف خیلی گسترده وجود داره و شما عملاً نمی‌تونین کاری کنین که سایتتون رو تک‌تکشون بی‌نقص باشه.

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

فراتر از ریسپانسیو

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

صفحه فرود مخصوص موبایل

کاربر موبایل با کاربر دسکتاپ فرق داره؛ عجله داره، حوصله‌ی اسکرول طولانی نداره و معمولاً دنبال یه کار مشخصه. پس چرا باید دقیقاً همون صفحه‌ی دسکتاپ رو ببینه؟

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

پاپ‌آپی که کاربر را فراری ندهد

پاپ‌آپ تو موبایل شمشیر دولبه‌ست. درست اجرا بشه، نرخ تبدیلتون رو می‌بره بالا؛ بد اجرا بشه، کاربر همون لحظه صفحه رو می‌بنده و میره.

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

سؤالات متداول

جمع‌بندی

خلاصه‌ش این شد: واسه تست ریسپانسیو بودن سایت لازم نیست چند تا گوشی بخرین. با بخش سفارشی‌سازی وردپرس می‌تونین سریع یه نگاه بندازین و همونجا اصلاح کنین، با ابزار Device Mode کروم هم می‌تونین دقیق‌تر و رو دستگاه‌های مختلف تست بگیرین. افزونه‌هایی مثل Responsive Viewer هم کارو سریع‌تر می‌کنن.

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

امیدواریم این مقاله به کارتون اومده باشه. اگه شما هم روش یا ابزار دیگه‌ای می‌شناسین که تو کارتون جواب داده، خوشحال میشیم تو نظرات با بقیه به اشتراک بذارین. موفق باشید. 🙂

تیم تولید محتوا

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