ریسپانسیو به زبان ساده

اول یه کم از گذشته ها بگیم .

در گذشته طراحی سایت ها این طور بود که طراحی فقط با درنظر گرفتن یک عرض پرکاربرد انجام میشد.

به عنوان مثال ده سال پیش عرض رو معمولا 800 و ارتفاع رو 600 پیکسل در نظر میگرفتن و کمی بعدتر سایت ها معمولا با عرض 990 و در ارتفاع های مختلف بسته میشد .

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

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

[(quote)|به همین خاطر چند سالی است که طراحی "ریسپانسیو" یا "واکنش گرا" برای حل این مشکل به کمک برنامه نویس ها اومده تا کاربران به همون راحتی که تو کامپیوتر صفحات سایت رو میبینن تو گوشی های هوشمندشون هم از این شرایط برخوردار باشن .]

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

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

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

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

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

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

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