خانه / آموزشی / چطور ریسپانسیو بودن سایتمون رو تست کنیم
چطور ریسپانسیو بودن سایتمون رو تست کنیم

چطور ریسپانسیو بودن سایتمون رو تست کنیم

طراحی ریسپانسیو یا واکنش گرا اولین بار توسط Ethan Marcotte در سال ۲۰۱۰ با ارسال مطلبی تو سایت A List Apart تحت عنوان (همانطور که انتار می رفت) طراحی ریسپانسیو (Responsive Web Design) معرفی شد.

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

از همون موقع طراحی ریسپانسیو ( واکنشگرا ) به آرومی پیشرفت کرد و مورد استفاده قرار گرفت.

اما یه سری مشکلاتی تو اون زمان وجود داشت مثلا اینکه اکثرا فقط می خواستن تا وب سایت تو دستگاه مورد نظرشون دیده بشه و اهمیتی به باز شدن درست حسابی لینک ها نمی دادند و یا  اکثر وب سایت ها بخاطر کدهای زیادشون و عکس های سنگین تو دستگاه های موبایل دیر باز می شدن و دردسرهای زیادی داشتن !

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

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

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

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

گوگل این خبر رو تو ماه فبریه اعلام کرد:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.

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

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

یه طراحی خوبِ ریسپانسیو چیه ؟

good-responsive-design

طراحی ریسپانسیو با همه جور صفحه و رزولیشنی سازگارِ

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

بطور معمول چهار نوع صفحه نمایش داریم:

  • desktop
  • laptop
  • tablet
  • smartphone

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

آیا شما به یه وب سایت ریسپانسیو نیاز دارید ؟

جواب سریع: صد در صد ! اصلا شک نکنید تو این کار و حتما پیشو بگیرید تا انجام بشه.

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

برای انجام این کار به گوگل آنالیز خودتون ورد بشید وب سایتتون رو انتخاب کنید و بعد به این قسمت برید: Audience > Mobile > Overview

اینجا شما می تونید آنالیز های کاربرانی که با سیستم معمولی، موبایل یا تبلت اومدن رو ببینید.

بهتر امتیاز هایی که از طرف مردم نسبت به سایت شما داده شده رو از قسمت های زیر ببینید:

  • Bounce Rate
  • Pages/Session
  • Avg Session Duration
  • Goal Conversion Rate

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

 

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

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

به زودی چندتا از این تست ها رو انجام میدیم اما قبلش بزارید یه تست ساده روی وب سایت انجام بدید تا ببینیم تو چه وضعیتی هست:

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

اگر هم خودتون از گوشی می تونید استفاده کنید به راحتی وب سایتتون رو باهاش باز کنید اگر دیدید وب سایت بهم ریختست و منظم نیست بدونید که وب سایتتون ریسپانسیو نیست !

چطور دستگاه ها مختلف رو با یک تست آنلاین تست کنیم

با تست بالا خیلی راحت تونستید متوجه بشید که ریسپانسیو هستید یا نه اما فقط تو ۲ تا دستگاه هنوز شما درباره دیده شدن سایتتون تو دستگاه های دیگه مثل iPads ، Google Nexus’ ،Samsung Galaxy و گوشی های هوشمند دیگه خبر ندارید.

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

بریم که داشته باشیم چندتا از این وب سایت ها رو:

۱- MobileTest.me

mobiletestme

 

این وب سایت سایت شما رو روی ۶ نوع دستگاه تست می کنه.

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

استفاده از MobileTest.me

 

۲- Responsinator

responsinator

 

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

استفاده از Responsinator

 

۳- Am I Responsive

amiresponsive

 

مثل قبلی ها آدرس رو وارد کنید و اینتر رو بزنید، این دفعه برای دیدن وب سایت تو دستگاه مورد نظر بعد از لود شدن روی دستگاه کلیک کنید تا کامل سایت رو ببینید.

استفاده از Am I Responsive

 

۴- Google’s Mobile Friendly Test

این یکی از همه بهتره، ابزار خود گوگل برای انجام این کاره

google

استفاده از Google’s Mobile Friendly Test

 

بعدش چی ؟!

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

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

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

۱- طرح فعلی وب سایتتون رو به ریسپانسیو تغییر بدید. این یکی از سخت ترین روش هاست که واقعا وقت گیر و دردسر سازه

۲- از یک قالب موبایل استفاده ببرید. این می تونه کاربردی تر و بهتر باشه.

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

 

در آخر بهتر بدونید که ما همیشه تو اینجور شرایط آماده همکاری هستیم و می تونید به راحتی وب سایتتون رو به ا بسپارید تا مشکلاتش رو حل کنیم 🙂

 

امید وارم این مطلب نیز برای شما دوستان عزیز مفید بوده باشه. مشتاقانه منتظر نطرات و تجربیاتتون در اینباره تو قسمت نظرات همین مطلب هستم.

 

درباره هادی صفرزاده

هادی صفرزاده هستم، برنامه نویس و طراح سایت از سال 86 در دنیای وب مشغول هستم. PHP - PYTHON - MYSQL - UI/UX

نظر بدهید

آدرس ایمیلتان منتشر نمیشودگزینه های الزامی ستاره دار شده اند *

*

برو بالا !