در سال 2010 میلادی ، طراحی ریسپانسیو ، یک مفهوم مهم در دنیای وب ، شناخته شد  و آقای Ethan Marcotte  مقاله ای در مورد "وب سایت واکنش گرا" با الهام از معماری تطبیقی  ، ارائه داد.
وی گفت : به جای این که برای دستگاه های مختلف ، نسخه های متفاوتی  طراحی شود ، از مجموع و ترکیب شبکه های منعطف و مدیا کوئری ها  استفاده شود به گونه ای که به طور خودکار ، با اندازه هر صفحه نمایش تطبیق پیدا کند.
با افزایش تولید گوشی های هوشمند و تبلت ها از همان دهه ، این ایده بسیار محبوب و به یک استاندارد صنعتی تبدیل شد . 
گوگل در سال 2016 ، طراحی ریسپانسیو را برای  موقیت در دنیای وب معرفی کرد و ضروری دانست . این طراحی از الگوریتم Mobile-first-indexing استفاده میکرد. 
این الگوریتم به صورت پیوسته پیشرفت های جدید کرد و تکامل یافت.

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

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

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

1- انطباق با تغییرات آینده 
در آینده با آمدن دستگاه های هوشمند جدید ، وب سایت های ریسپانسیو ، به راحتی خود را با تغییرات جدید وفق می دهند.
2- دسترسی آسان برای کاربرانی که دارای محدودیت های جسمی هستند. 
به طوری که اگر از دستگاه هایی با صفحه نمایش کوچک یا تنظیمات خاصی استفاده میکنند ، خوانا باشد و بدون هیچ مشکلی به همه ی محتوا ها دسترسی داشته باشند.
3- کاهش هزینه و صرفه جویی در زمان 
به جای طراحی چندین نسخه از وب سایت ، وقتی از یک طراحی ریسپانسیو استفاده میشود علاوه بر کاهش زمان و هزینه ها ،  مدیریت وب سایت را آسان تر میکند.
4- کاهش نرخ برش ( Bounce Rate) 
هر کاربری ممکن است از یک دستگاهی وارد اینترنت شود و بخواهد نیاز هایش را تامین کند . اگر وب سایتی برایش به خوبی نمایش داده نشود ، اگر مجبور نباشد از آن سایت استفاده کند ، بی شک در همان لحظه سایت را ترک میکند و باعث  کاهش رتبه ی وب سایت در نتایج موتور های جست و جو می شود. 
5- تاثیر مثبت در سئو سایت 
گوگل و بقیه موتور های جست و جو وب سایت های ریسپانسیو را به سایر طراحی ها ترجیح میدهد  و آن را یک عامل مهم رتبه بندی معرفی کرده . و الگوریتم Mobile-First-Indexing برای نسخه ی موبایلی ،در اولویت قرار داده.
6- افزایش تجربه کاربری User Experience 
ریسپانسیو بودن وبسایت ، تجربه ی کاربری را بهبود میبخشد . هر چه کاربر راضی تر، کسب و کار شما موفق تر است و به هدف خود بیشتر نزدیک میشوید.
کاربر دوست دارد محتوای وب سایت را در هر دستگاهی که دارد ، بدون هیچ مشکلی ، ببیند و از آن استفاده کند.

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

1- Media Queries
فرض کنید میخواهید شرط برای مرورگر قرار دهید. این شروط در css  قابل تنظیم است و این امکان را میدهد که برای اندازه های متفاوت صفحه های نمایش ، تنظیمات متفاوت و طراحی خاص ،  صورت بگیرد. با این تنظیمات کنترل دقیقی روی نمایش محتوا هایمان در وب سایت ، خواهیم داشت. 

کاربر از چه دستگاه هایی استفاده میکند ؟ 
موبایل – دسکتاب – تبلت 
پس نیاز به 3 استایل و تنظیم آن در css  داریم.

• 
  انواع شرایط Media Queries :
  1- صفحه نمایش 
  2- بر اساس پیکسل
  3- نوع دستگاه 
  بهتر است مدیا کوئری ها را بر اساس ترتیبی منطقی بنویسید تا به درستی تغییرات اعمال شود .
  مثلا اول استایل های عمومی را بنویسید . سپس استایل  های خاص تر را ، اعمال کنید .
• مزایای استفاده از Media Queri ها:
  تجربه ی کاربری بهتر  - بهبود سئو - انعطاف پذیری بالا

2- طراحی   Mobile-First 
در مرحله ی اول وب سایت برای دستگاه های کوچک طراحی میشود .سپس برای دستگاه های بزرگ تر ، استایل های مربوطه ، اضافه میشود . این روش ، روی کاربرانی تمرکز دارد که از موبایل استفاده میکنند که خود درصد زیادی است . 
3- فریم ورک های ریسپانسیو 
فریم ورک های  آماده ای مانند Foundation  و Bootstrap   که سرعت ریسپانسیو شدت را افزایش میدهد که شامل سیستم های گرید و کامپوننت های آماده هستند .
کامپوننت در طراحی سایت ، یک بخش مستقل از رابط کاربری  است به طوری که به صورت جدا گانه طراحی ،توسعه و مدیریت میشود . طراحی هر کامپوننت باید یه گونه ای باشد که  در اندازه های مختلف صفحه نمایش ، استاندارد باشد و به درستی کار کند .
هر کامپوننت باید : 
• مقیاس پذیر باشد 
• قابل استفاده در قسمت های مختلف سایت باشد 
• با تغییرات سایز ها و شرایط متفاوت، انعطاف پذیر باشد  و بشود به راحتی آن را مدیریت کرد .
کامپوننت ها شامل موارد زیر است :
• Navigation Menu  یا منوی ناوبری 
• کارت محصول یا Product Card
• Buttons  یا دکمه ها 

اهمیت کامپوننت ها در ریسپانسیو :

طراحی مدولار دارد . یعنی به صورا جداگانه و مستقل قابل تغییر و بهینه سازی است .
تغییرات در آن ، تاثیری روی بخش های دیگر ندارد .
قابل استفاده مجدد است . یعنی در صفحه های مختلف سایت بدون نیاز به نوشتن دوباره، استفاده میشود . 
4- استفاده از فریم ورک های ریسپانسیو :
ابزار های آماده ای  شامل سیستم های گرید و(Grid System) هستند که طراحی ریسپانسیو را انجام میدهند و باعث سرعت بخشیدن به کار میشوند . 
Bootstrap و Foundation  نمونه ای از این نوع نرم افزار است .
5-استفاده از فونت ها و دکمه های قابل تغییر 
اندازه ی دستگاه ها برای هر کاربر متفاوت است .پس در نتیجه اندازه متون ، دکمه ها و فاصله ها برای کاربرانی که دستگاه های کوچک تر دارند باید بهینه شود .
به این منظور از واحد های نسبی rem  و em  استفاده میشود .

6-تست و ارزیابی ریسپانسیو 
برای تست و ارزیابی از 2 مدل ابزار استفاده میکنیم .
• ابزار های مرورگر در کروم مثل DevTools  
• ابزار های آنلاین مانند  BrowserStack  و Responsinator
مهم است بدانید که ریسپانسیو بودن فقط به طراحی محدود نمیشود ، باید در کنار تمامی مراحلی که گفته شد ، عملکرد وب سایت نیز بهینه باشد .
این عملکرد شامل :
فشره سازی تصاویر:که با ابزار هایی مثل TinyPNG حجم تصاویر کم میشود .
محتواهایی با حجم زیاد مانند ویدیو ها را زمانی بارگذاری کنید که کاربر به آن نیاز داشته باشد .
برخی مواقع کد های غیر ضروری وجود دارد که از ابزار هایی مانند PurifyCSS برای حذف کد هایcss استفاده نشده نیز استفاده میشود .
توجه به هر مرحله باعث میشود شما وب سایتی داشته باشید که هر کاربر بتواند در هر دستگاهی از آن استفاده کند و تجربه ی کاربری بسیار خوبی داشته باشد و شما به هدف خود که بالا بردن رتبه ی سایتتان است ، نزدیک تر میشوید .

تاریخ انتشار: