”مراحل طراحی سایت رسپانسیو“

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

مرحله اول : طراحی با پهنای ثابت

تا همین چند سال پیش، (و به دلیل محبوبیت ویندوز ایکس پی) رزولوشن نمایشگر اکثر کاربران روی 800×600 تنظیم بود و سایتها نیز برای مطابقت با این اندازه طراحی می شدند. کسانی هم که مانیتور بزرگتری داشتند، می توانستند سایت را به درستی مشاهده کنند و فقط کمی فضای خالی در کناره های سایت می‌دیدند. کمی گذشت و با گسترش ویندوز7 که رزولوشن مانیتورها افزایش پیدا کرد، سایز 1024×768 به سایز استاندارد برای طراحی رابط کاربری صفحات وب تبدیل شد. در این دوران معمولا پهنای صفحات وب، سایز ثابتی داشت.

مرحله دوم : طراحی شناور (fluid)

کم کم طراحان برای سازگار کردن سایز سایت با سایز صفحه به روش شناور (fluid) روی آوردند. در این روش width ستون های سایت بجای واحد پیکسل با واحد درصد مشخص میشد و هرچه کاربر عرض مرورگرش بزرگتر بود، ستون های سایت را نیز با پهنای بیشتری مشاهده می کرد. (طراحی شناور در اصل تلاشی بود برای هماهنگ سازی سایت با پهنای مرورگر کاربر و شاید بتوان ریشه طراحی ریسپانسیو را، طراحی شناور عنوان کرد.) با گسترش سخت افزارها و روند رو به رشد لپ تاپ ها کم کم سایز 1366×768 جای سایز قبلی را گرفت. اما هنوز میشد با استفاده از طراحی شناور، سایتهای قابل قبولی برای پهنای صفحه 800 پیکسل تا 1366 پیکسل طراحی کرد.

مرحله سوم: ظهور موبایل ها و صفحات کوچک

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

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

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

مرحله چهارم: طراحی سایت ریسپانسیو، انقلابی در طراحی رابط کاربری

با افزایش سرعت دسترسی موبایل و ظهور تکنولوژی 3G و 4G ، اکثر کاربران بجای کامپیوتر، از موبایل یا تبلت خود برای گشت و گذار در وب استفاده میکنند. و متعاقبا دارندگان سایتها نیز ترجیح میدهند سایت آنها در موبایل و تبلت هم قابل استفاده باشد. در این زمان (حول و حوش 2010) اکثر کاربران نیز از مرورگرهای مدرن استفاده میکنند که تا حدی CSS را پشتیبانی میکند. همچنین در موبایل و تبلت ها، به دلیل ظهور دیروقت آنها در عرصه وبگردی، اکثرا مرورگرهای جدیدی وجود دارد که از مدیاکوئری های CSS به خوبی پشتیبانی میکند. اینگونه شد که طراحان تصمیم گرفتند تا بجای تعریف یک CSS برای چیدمان هر صفحه، از چندین فایل CSS کمک بگیرند تا بتوانند جای المان ها را در سایزهای گوناگون صفحات و مرورگرها تغییر دهند.

برای اجرای طراحی ریسپانسیو شما نیاز جدی به جاوا اسکریپت ندارید و فقط با media query ها و تعریف CSS های گوناگون، می توانید یک رابط کاربری ریسپانسیو طراحی کنید. اما استفاده از جاوا اسکریپت کنترل بیشتری را روی المان های صفحه ممکن میسازد.

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

مرحله پنچم: ظهور فریم ورک های ریسپانسیو

با گسترش طراحی ریسپانسیو، شرکتها و گروه های نرم افزاری، ابزارها یا فریم‌ورک هایی برای تسریع طراحی ریسپانسیو ارائه کردند. از آنجایی که اکثر طرح های ریسپانسیو باید در سه سایز دسکتاپ، تبلت و موبایل اجرا شوند، این فریم‌ورک‌ها نیز روی همین سه سایز زوم کرده اند. یک فریمورک معمولا شامل یکسری CSS از پیش تعریف شده است هنگام طراحی، شما بجای تعریف class های جدید، از نام های کلاس های این فریمورک ها استفاده میکنید. محبوب ترین فریمورک های موجود بوت استرپ و فاندیشین هستند.

مرحله ششم : زبان اسکریپت نویسی در CSS

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