طراحی سایت ریسپانسیو چیست؟

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

پیدایش نسخه موبایل پیش از طراحی ریسپانسیو

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

چرا طراحی وب سایت ریسپانسیو مهم است ؟

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

مزایای طراحی سایت ریسپانسیو چیست ؟

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

نکات مهم طراحی سایت واکنش گرا

• برای اینکه توسط گوگل و کاربران کنار گذاشته نشوید دو گام اساسی را باید طی کنید :
• گام اول : تست ریسپانسیو بودن سایت
• گام دوم : پیدا کردن عناصر غیر ریسپانسیو

گام اول

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

• • Responsinator : استفاده از این ابزار رایگان بوده و با سرچ اسم آن در گوگل می توانید سایت خود را تست کنید و ببینید که در صفحات مختلف چگونه نمایش داده می شود .
  • Screenfly : این هم یک ابزار رایگان است که به تازگی عرضه شده و شما با وارد کردن آدرس سایت و نام دستگاه (گوشی موبایل ،کامپیوتر،تبلتو تلویزیون های هوشمند) ،خروجی سایت خود را مشاهده کنید.
  • google DeTools Device Mode : با استفاده از مرورگر گوگل کروم هم می توان ریسپانسیو بودن سایت خود را چک کرد به این صورت که روی صفحه سایت خود در گوگل کروم راست کلیک کرده و با انتخاب inspect در بخش ریسپانسیو می توان با انتخاب نوع دستگاه خروجی بگیرید.
  • Google Resizer

• Ghostlab
• Browser Stack
• CrossBrowserTesting

گام دوم

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

• نوار Navigation

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

• ستون ها

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

• استفاده از px %

به جای استفاده از حداقل و حداکثر اندازه ها برای طول و عرض و ارتفاع بهتر است از px % استفاده کنید تا مؤلفه های نام برده به جای یک اندازه مشخص با تناسب تعریف شوند .

• توجه به تایپوگرافی (Typography Optimization)

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

• بهینه سازی تصاویر

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

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