چرا سایت واکنش گرا؟
تو این مقاله میخوام دو تا جواب به این سوال بدم. اول، واکنش گرا بودن سایت دیگه داره تبدیل به یکی از استانداردهای سایت ها میشه و یه جورایی واجبه که سایتمون واکنش گرا باشه. هرچند، ریزه کاری های زیادی هست که باید قبلش درباره طراحی واکنش گرا بدونید.
طراحی واکنش گرا چیست؟
اگه بخوام سادش کنم، طراحی واکنش گرا یه روشیه که با استفاده از سیستم مدیریت محتوا، قالب سایت رو به طور خودکار با اندازه صفحه نمایش هماهنگ می کنه. اول قرار بود برای سایت های شخصی که افراد نمونه کارهاشونو توش به نمایش میذارن استفاده بشه، اما کم کم فراگیر شد و الآن دیگه تقریبا تو هر نوع سایتی با اهداف و کارایی های مختلف میتونید ببینید.
اگه کاربر با تبلت یا موبایل وارد سایتی بشه که طراحیش واکنش گراست، قالب سایت واکنش نشون میده و خودشو با اندازه صفحه نمایش هماهنگ می کنه. فهرست هم بالای سایت جمع میشه و به صورت یک دکمه درمیاد و با کلیک کاربر باز میشه. عکسی که معمولا بالای سایت ها میذارن، کوچیک تر میشه و با صفحه تبلت و موبایل هماهنگ میشه. عرض نوشته زیر عکس هم با عرض صفحه نمایش منطبق میشه. اما وقتی همین سایت با کامپیوتر باز بشه، فهرست بدون نیاز به کلیک قابل مشاهدست و عکس و نوشته فضای بیشتری رو اشغال می کنند. راز کار طراحی های واکنش گرا همینه: تو هر دستگاهی نسبت به اندازه صفحه نمایشش، به اندازه ای اطلاعات سایت رو نشون میده که صفحه بهم ریخته نشه و خاطره بدی تو ذهن کاربر نذاره.
طراحی واکنش گرا چطور کار می کند؟
سایت های واکنش گرا با استفاده از CSS تنظیم می کنن که بسته به اندازه صفحه نمایش، کدوم مطالب کجای صفحه نمایش داده بشن. به عبارت دیگه جای مطالب، عکس ها و فهرست های جهت یاب رو تغییر میده تا با تعداد پیکسل های موجود هماهنگ بشن. حتی لوگو و عناصر گرافیکی هم می تونن از صفحه نمایش های معمولی کامپیوتر تا تبلت و موبایل تغییر اندازه بدن.
همونطور که گفتم الآن خیلی از سایت ها واکنش گرا شدند، ولی اگه بخوام براتون یه مثال عالی از سایت های واکنش گرا رو معرفی کنم، میتونید سایت BostonGlobe.com رو ببینید. توسعه دهنده این سایت آقای Ethan Marcotte، همون کسیه که برای اولین بار واژه responsive design یا طراحی واکنش گرا رو بکار برد.
طراحی های واکنش گرا، به جز عکس های با اندازه مشخص، از عکس های تطبیقی هم استفاده می کنن. بنابراین هر وقت با موبایل سایتی رو باز کنید، عکس ها کوچیکتر دیده میشن و اگه همون سایت رو با مرورگر کامپیوتر باز کنید، عکس هارو بزرگتر میبینید. اینطوری عکس ها فضای صفحه نمایش بزرگ کامپیوتر رو بهتر می تونن پر کنن.
مزایای تغییر سایت به یک سایت واکنش گرا
چون معمولا عناصر تجملاتی کنار طراحی های واکنش گرا قرار میگیرن، اسم این طراحی ها خیلی ها رو میترسونه و فکر می کنن فقط بهترین و گرون ترین سایت ها از پس هزینه های اجرای این طراحی برمیان. درسته که طراحی واکنش گرا کار آسونی نیست، اما با این وجود میبینید که بیشتر شرکت ها هم طراحی سایت هاشون واکنش گراست. به علاوه کل دنیای وب داره به سمت استفاده از طراحی های واکنش گرا پیش میره، پس شما هم نباید از دنیا عقب بمونید. چون قطعا برای مشتری هاتون هم مهمه.
معمولا قیمت طراحی برای شرکت هایی که بودجه محدودی برای بازاریابی دارن خیلی اهمیت داره. اما اگه میخواهید مشتری هاتون خاطره خوبی از سایت تو ذهنشون بمونه و راحت بتونن باهاش کار کنن (به عبارت دیگه سایتتون تجربه کاربری خوبی داشته باشه)، باید حداقل هر دو تا نسخه موبایل و دسکتاپ رو توسعه بدید. که اینطوری اگه حساب کنید، طراحی واکنش گرا براتون مقرون به صرفه تر درمیاد.
اگه الان دارید به این فکر می کنید که رقیب هاتون طراحی واکنش گرا ندارن و بنابراین شما هم لازم نیست برای طراحی واکنش گرا پول خرج کنید، شک نکنید که در اشتباهید. چه فرصتی از این بهتر که بنیان گذار این طرح جدید بشید و خودتون هدایت بقیه رو به عهده بگیرید تا اینکه فقط پیرو و دنباله روی رقبا باشید.
