متغیر بودن رزولوشن نمایشگرها و ظهور سایزهای مختلف تبلت و موبایل، باعث شد تا طراحان وب به فکر ابداع روشی مبتنی بر CSSبرای نمایش صحیح سایت در کلیه سایزهای نمایشگرها بیفتند. این روش Responsive یا در فارسی واکنشگرا نامیده شد. اما این مدل طراحی، یک شبه ایجاد نشده است و در سالهای گذشته، راه طولانی ای طی شده تا ما امروز به طراحی ریسپانسیو رسیده ایم.
طراحی سایت ریسپانسیو چیست؟
مرحله اول : طراحی با پهنای ثابت
تا همین چند سال پیش، (و به دلیل محبوبیت ویندوز ایکس پی) رزولوشن نمایشگر اکثر کاربران روی ۸۰۰x600 تنظیم بود و سایتها نیز برای مطابقت با این اندازه طراحی می شدند. کسانی هم که مانیتور بزرگتری داشتند، می توانستند سایت را به درستی مشاهده کنند و فقط کمی فضای خالی در کناره های سایت می‌دیدند. کمی گذشت و با گسترش ویندوز۷ که رزولوشن مانیتورها افزایش پیدا کرد، سایز ۱۰۲۴x768 به سایز استاندارد برای طراحی رابط کاربری صفحات وب تبدیل شد. در این دوران معمولا پهنای صفحات وب، سایز ثابتی داشت.
مرحله دوم : طراحی شناور (fluid)
کم کم طراحان برای سازگار کردن سایز سایت با سایز صفحه به روش شناور (fluid) روی آوردند. در این روش width ستون های سایت بجای واحد پیکسل با واحد درصد مشخص میشد و هرچه کاربر عرض مرورگرش بزرگتر بود، ستون های سایت را نیز با پهنای بیشتری مشاهده می کرد. (طراحی شناور در اصل تلاشی بود برای هماهنگ سازی سایت با پهنای مرورگر کاربر و شاید بتوان ریشه طراحی ریسپانسیو را، طراحی شناور عنوان کرد.) با گسترش سخت افزارها و روند رو به رشد لپ تاپ ها کم کم سایز ۱۳۶۶x768جای سایز قبلی را گرفت. اما هنوز میشد با استفاده از طراحی شناور، سایتهای قابل قبولی برای پهنای صفحه ۸۰۰ پیکسل تا ۱۳۶۶پیکسل طراحی کرد.
مرحله سوم: ظهور موبایلها و صفحات کوچک
با گسترش انواع موبایل و تبلت ها و افزایش دسترسی موبایلها به اینترنت، چالش جدیدی برای طراحان وب ایجاد شد. اینک نمایش سایز در صفحاتی با پهنای ۲۴۰ تا ۴۸۰ پیکسل مدنظر صاحبان سایتها بود. دیگر نمیشد با طراحی شناور، سایت را جوری طراحی کرد که هم در سایز مانیتور خوب نمایش داده شود و هم در سایز موبایلها. راه حل چه بود؟ اولین راه حلی که استفاده شد، طراحی دو نسخه متفاوت برای سایت بود. یکی برای نمایش در موبایل و یکی برای نمایش در مانیتورهای معمولی.
این روش هنوز هم در برخی موارد استفاده میشود و کاربردی است. در این روش ، دو قالب مجزا برای سایت طراحی میگردد. برای هدایت کاربر هم از user-agent مرورگر کمک گرفته میشود. مثلا اگر سیستم عامل کاربر سیمبیان یا آی او اس یا اندروید بود، کاربر را به صفحه موبایل منتقل می کنیم و اگر سیستم عامل ویندوز یا مک یا لینوکس بود، او را به صفحه معمولی سایت می فرستیم. مزیت این روش این است که در نسخه موبایل سایت، می توان بسیاری از بخش هایی را که لازم نداریم حذف کنیم تا صفحه سبک تر شود. همچنین کنترل بیشتری در طراحی نسخه موبایل داریم . چون از پایه کلیه المان ها را چیدمان می کنیم. اما هزینه طراحی دو قالب، برای شرکت های کوچک به صرفه نیست.
شرکت های اینترنتی بزرگ (مانند گوگل، یاهو، فیسبوک) معمولا از این روش استفاده میکنند. زیرا تعداد کاربر آنها روی هر نسخه سایت، آنقدر زیاد است که طراحی دو یا سه قالب مجزا برای دستگاه های گوناگون، اصلا هزینه قابل توجهی به حساب نمی آید و ارزش داشتن رابط کاربری اختصاصی و مناسب را دارد.
طراحی سایت ریسپانسیو
مرحله چهارم: طراحی سایت ریسپانسیو، انقلابی در طراحی رابط کاربری
با افزایش سرعت دسترسی موبایل و ظهور تکنولوژی ۳G و ۴G ، اکثر کاربران بجای کامپیوتر، از موبایل یا تبلت خود برای گشت و گذار در وب استفاده میکنند. و متعاقبا دارندگان سایتها نیز ترجیح میدهند سایت آنها در موبایل و تبلت هم قابل استفاده باشد. در این زمان (حول و حوش ۲۰۱۰) اکثر کاربران نیز از مرورگرهای مدرن استفاده میکنند که تا حدی CSS را پشتیبانی میکند. همچنین در موبایل و تبلت ها، به دلیل ظهور دیروقت آنها در عرصه وبگردی، اکثرا مرورگرهای جدیدی وجود دارد که از مدیاکوئری های CSSبه خوبی پشتیبانی میکند. اینگونه شد که طراحان تصمیم گرفتند تا بجای تعریف یک CSS برای چیدمان هر صفحه، از چندین فایلCSS کمک بگیرند تا بتوانند جای المان ها را در سایزهای گوناگون صفحات و مرورگرها تغییر دهند.
برای اجرای طراحی ریسپانسیو شما نیاز جدی به جاوا اسکریپت ندارید و فقط با media query ها و تعریف CSS های گوناگون، می توانید یک رابط کاربری ریسپانسیو طراحی کنید. اما استفاده از جاوا اسکریپت کنترل بیشتری را روی المان های صفحه ممکن میسازد.
طراحی ریسپانسیو آنقدر پرطرفدار شد که در سال ۲۰۱۲ رتبه دوم در میان روشهای پرطرفدار طراحی را به خود اختصاص داد و در سال ۲۰۱۳ مجله محبوب ماشابل، سال ۲۰۱۳ را سال طراحی واکنشگرا نامید.
محبوب ترین فریمورک های موجود بوت استرپ و فاندیشین هستند.
مرحله پنچم: ظهور فریم ورک های ریسپانسیو
با گسترش طراحی ریسپانسیو، شرکتها و گروه های نرم افزاری، ابزارها یا فریمورک هایی برای تسریع طراحی ریسپانسیو ارائه کردند. از آنجایی که اکثر طرح های ریسپانسیو باید در سه سایز دسکتاپ، تبلت و موبایل اجرا شوند، این فریم‌ورک‌ها نیز روی همین سه سایز زوم کرده اند. یک فریمورک معمولا شامل یکسری CSS از پیش تعریف شده است هنگام طراحی، شما بجای تعریف classهای جدید، از نام های کلاس های این فریمورک ها استفاده میکنید. محبوب ترین فریمورک های موجود بوت استرپ و فاندیشینهستند.
مرحله ششم : زبان اسکریپت نویسی در CSS
زبان اسکریپتی SASS و همچنین LESS برای تغییر اندازه المانها
گاهی در طراحی المان های شناور صفحه یا در طراحی سایت ریسپانسیو، ما نیازمند این هستیم که اندازه یک المان را با جمع و تفریق از اندازه یک المان دیگر به دست بیاوریم یا یک شماره رنگ را بصورت متغیر تعریف کنیم و سپس آنرا در جاهای مختلف فایل CSS به کار بریم. یکی از مشکلات CSS این است که امکان تعریف متغیر و انجام عملیات ریاضی بین المانها ندارد. اینگونه بود که زبان اسکریپتی SASS و همچنین LESS برای تغییر اندازه المانها و تعریف متغیر و با امکانات محدود برنامه نویسی به CSS اضافه شد. حالا دست طراحان برای کدنویسی بازتر است و قالبهای واکنشگرای قدرتمندتری را می توانند ایجاد کنند.
