چک لیست ریسپانسیو (واکنش گرا) بودن سایت 2020

برای اینکه از طراحی ریسپانسیو بودن سایت مطمئن شوید، باید 3.9 میلیارد کاربری را در نظر بگیرید که تا سال 2019 سعی می کنند با تلفن همراه خود به اینترنت دسترسی پیدا کنند و موارد مورد نیاز را در گوگل جستجو کنند.

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

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

• یک سایت ریسپانسیو چه ویژگی دارد
• ریسپانسیو وب سایت فعلی خود را تست کنید
• عناصری و اشیائی که ریسپانسیو نیستند، برطرف شوند
• سرعت سایت باید در دستگاه های مختلف بررسی شود
• تب و دکمه های سایت درست کار کنند
• ناوبری (Navigation) را بررسی کنید
• از لحاظ بصری سایت ظاهر زیبا در همه دستگاه ها داشته باشد
• برای بررسی های بیشتر خود را جای بازدیدکنندگان سایت بگذارید

یک سایت ریسپانسیو چه ویژگی دارد

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

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

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

ریسپانسیو وب سایت فعلی خود را تست کنید

اگر از ریسپانسیو بودن سایت خود مطمئن نیستید، می توانید به کمک ابزار های رایگان ریسپانسیو بودن سایت خود را تست کنید. که به عنوان نمونه 4 تا از ابزارهای ریسپانسیو را آوردیم :

• Google’s Mobile-Friendly Tool
• CrossBrowserTesting
• Google Resizer
• Am I Responsive

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

مثلاً اگر از ابزار Resizer Google استفاده کنید، می توانید همزمان نسخه های موبایل و رایانه وب سایت را مشاهده و بین آنها جابه‌جا شوید تا راحت‌تر تغییرات در طراحی سایت ایجاد کنید.

عناصری و اشیائی که ریسپانسیو نیستند، برطرف شوند

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

• نوار پیمایش
• تصاویر
• قلم و فونت ها
• قالب
• دکمه ها

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

سرعت سایت باید در دستگاه های مختلف بررسی شود

سرعت صفحه یکی ازعوامل مهم در تجربه کاربران از سایت شما است که محبوبیت سایت یا عدم استفاده از سایت شما را نشان می دهد. حدود 83% کاربران انتظار دارند یک سایت در کمتر از 3 ثانیه باز شود. پس باید با صرف نظر از اینکه کاربر از چه دستگاهی برای مشاهده استفاده می کند، سرعت آپلود سایت خود را به کمتر از 3 ثانیه برسانیم.

در صورتی که سرعت سایت شما کم شده معمولاً یکی از موارد زیر اتفاق افتاده است:

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

اگر از سرعت سایت خود راضی نیستید، می توانید از ابزار PageSpeed Insights Google برای پیدا کردن دلیل کاهش سرعت استفاده کنید یا در نهایت به قسمت سئو سایت آی وحید مراجعه کنید تا خدمات بهینه سازی سایت را به شما ارائه کند.

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

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

• اندازه دکمه ها (Button)برای نمایش در تبلت ها به اندازه کافی بزرگ هست؟
• دکمه ها برای انتخاب اندازه مناسبی دارد؟
• استفاده از منوهای نوار پیمایشگر (Navigation) بر روی هر دستگاهی آسان است؟
• قلم ها، فرم های کاربران را پر می کنند؟

ناوبری (Navigation) را بررسی کنید

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

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

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

از لحاظ بصری سایت ظاهر زیبا در همه دستگاه ها داشته باشد

ششمین کاری که باید در چک لیست ریسپانسیو بودن سایت آن را درنظر داشته باشید، ظاهر سایت است. باید مطمئن شوید سایت شما از لحاظ بصری در تمام دستگاه ها جذابیت کافی برای مخاطب دارد. پس زمانی که سایتی را برای دسکتاپ طراحی می کنید باید اجزای سایت را برای تلفن های همراه و تبلت ها هم در نظر بگیرید ومطمئن شوید که:

• تصاویر کل صفحه را نمی گیرند.
• منوها قطع نمی شوند (به طور کامل نمایش داده می شود).
• جداول مرتب و منظم به نظر می رسند.
• لیست های خدمات به درستی ارائه می شوند.
• در هر یک از محصولات تصاویر و توضیحات به درستی در قالب خود هستند.
• فرم ها از نظر زیبایی شناختی خوشایند و مؤثر هستند.
• سبد خرید محصولات به درستی سازماندهی شده است و کار با آنها آسان است.

فرصتی که برای کاربران ایجاد می کنید، شما را مطمئن می کند که تمام صفحات از نظر زیباسناسی به چشم کاربران بسیار خوشایند هستند. 

برای بررسی های بیشتر خود را جای بازدیدکنندگان سایت بگذارید

در آخرین مرحله از انجام چک لیست، خود را جای بازدیدکنندگان سایت بگذارید و با چک کردن قسمت های مختلف سایت زحمت های طراحی خود را بررسی کنید. به عنوان مثال می توانید:

• تمام مراحل ارسال فرم را انجام دهید.
• مراحل خرید را تک تک امتحان کنید و مطمئن باشید تمام دکمه ها کار می کنند.
• بر روی لینک های منو (Navigation) در صفحات مختلف سایت کلیک کنید.
• حتی اگر مطمئن هستید مشکلی در صفحات شما وجود ندارد، به جاهای مختلف سایت برید بلاگ وصفحات محصول را امتحان کنید.
• رفتارهای کاربران را حدس بزنید وبا گردش در سایت اطمینان حاصل می کنید که هیچ شکافی در چک لیست رسپانسیو وجود ندارد.

پایان

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