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

طراحی سایت

..چک لیست ریسپانسیو (واکنش گرا) بودن سایت ۲۰۲۰..
طراحی سایت

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

برای اینکه از طراحی ریسپانسیو بودن سایت مطمئن شوید، باید ۳.۹ میلیارد کاربری را در نظر بگیرید که تا سال ۲۰۱۹ سعی می کنند با تلفن همراه خود به اینترنت دسترسی پیدا کنند و موارد مورد نیاز را در گوگل جستجو کنند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پایان

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

44
20 خرداد 1399
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

18817
24 فروردین 1398
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

3937
27 آذر 1398
سئو

چگونه ویدیو کلاس های آنلاین (وبینار) را ضبط کنیم؟| آموزش ۳ روش

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

3786
08 اردیبهشت 1399