از مهمترین اصول طراحی UI و UX دسترسی پذیری می باشد به این معنی که یک وبسایت می بایست در تمام دستگاهها به بهترین روش ممکن برای کاربر در دسترس باشد تا بهترین تجربه کاربری ممکن حاصل شود. یکی از ساده ترین اصولی که برای دسترسی پذیری کاربرد دارد، طراحی واکنش گرا (Responsive Web Design) می باشد که قطعا کمتر فردی را می توان یافت که با دنیای طراحی وب آشنا باشد اما این اصطلاح را نشنیده باشد. یک اصطلاح دیگر هم در خصوص بهبود دسترسی پذیری در دنیای طراحی وب وب به نام طراحی سازگار (Adaptive Web Design) وجود دارد که ممکن است کمتر به گوش شما خورده باشد. امروز آمده ایم تا در این مقاله از سری مقالات آموزش طراحی رابط کاربری و آموزش تجربه کاربری از مرجع آموزش UI و UX فارسی با مقایسه طراحی Responsive و Adaptive در خصوص این دو اصطلاح بیشتر صحبت کنیم.
هر دو اصطلاح یک هدف بسیار نزدیک به هم دارند.همان طور که قبلا گفتیم آنها به دنبال ارائه بهترین تجربه ممکن از یک وب سایت در زمان مشاهده آن در دسکتاپ، تلفن همراه یا تبلت هستند.
Ethan Marcote به عنوان معرف واژه طراحی واکنش گرا شناخته می شود. این واژه به معنای استفاده از کوئری های Media و قوانین آن در CSS است که به سایت اجازه می دهد تا هنگام قرارگیری در صفحه های نمایش با اندازه های مختلف، ظاهر خود را تغیییر دهد. بنابراین به شکل خلاصه می توان گفت که این کار تنها با کمک دستورات پیشفرض HTML و CSS به سادگی امکان پذیر است.
طراحی سازگار (Adaptive)عنوان کتابی از Aaron Gustafson است، بنابراین عموما او را به عنوان پیشگام معرفی طراحی سازگار می نامند. او طراحی سازگار را به شکل وجود طراحی واکنش گرا یا رسپانسیو در وبسایت که با عناصر جاوااسکریپت برای کنترل بیشتر روی محتوا تقویت شده است تعریف کرد.
در واقع طراحی سازگار نوعی طراحی رسپانسیو است که محتوای HTML آن با استفاده از جاوااسکریپت حرفه ای تر کنترل می شوند. طراحی سازگار یا Adaptive همچنین به نام “بهبود پیش رونده” (Progressive Enhancement) نیز نامیده می شود.
اگر بخواهیم طراحی سازگار را با یک مثال توضیح دهیم می توان آن را اینطور عنوان کرد : شما ممکن در نسخه دسکتاپ یک وبسایت یک نوار جانبی نویگیشن داشته باشید، و در هنگام مشاهده در گوشی هوشمند، برای ذخیره فضای موجود در رابط کاربری(UI) ، این فهرست به یک لیست ساده تر تبدیل می شود. مثال دیگر این است که ممکن است قابلیتی بر روی دستگاه تلفن همراه ارائه شود که در دسکتاپ وجود ندارد. وب سایت یک رستوران را در نظر بگیرید، هنگام استفاده در گوشی تلفن همراه مکان آن با GPS مشخص می شود؛ پنلی ظاهر شده که می گوید “دریافت مسیر رستوران ما از محل شما”. در مورد دسکتاپ چنین اتفاقی نمی افتد.
طراحی وب واکنش گرا (RWD)
عناصر کلیدی برای ایجاد یک وب سایت رسپانسیو عبارتند از CSS3، خصوصیت @media موجود در CSS و گرید های سیال (Fluid grids) که از درصد برای ایجاد یک اسکلت انعطاف پذیر استفاده می کنند. استفاده از تصاویر انعطاف پذیر، فیلم های انعطاف پذیر، تایپوگرافی سیال(fluid type) و اسفاده از واحد EM به جای پیکسل ها نیز ضروری است. تمام این نکات کلیدی وبسایت واکنش گرا را قادر می سازد تا طرح خود را با توجه به ابعاد صفحه نمایش دستگاه تغییر دهد.
طراحی واکنش گرا وابسته به سمت کاربر (client-side ) است، به این معنی که محتوای صفحه به مرورگر دستگاه (کاربر) ارسال شده، و سپس مرورگر ظاهر صفحه را بر طبق اندازه صفحه نمایش خود تغییر می دهد.
تعریف یک وب سایت واکنش گرا این است که به طور متناوب ترکیب خود را تغییر داده تا دسترسی به محتوا را بسته به اندازه صفحه نمایش پنجره مرورگر افزایش دهد.
طراحی وب سازگار (AWD)
طراحی وب سازگار از طرح های از پیش تعریف شده ای استفاده می کند که به دقت بر اساس اندازه های مختلف صفحات نمایش ایجاد شده اند. یعنی عموما برای یک وبسایت چندین فایل Stylesheet ایجاد می شود که هرکدام برای نمایش در دستگاه خاصی مناسب است. زمانی که این وبسایت در مرورگر باز شود، بسته به نوع دستگاه فایل Stylesheet مربوط به آن بارگذاری و اجرا خواهد شد.
طراحی سازگار عمدتا سمت سرور(server side) است. به این معنی که سرور وب تمام کارهای تشخیص دستگاه های مختلف و بارگذاری لیست مشخصات مناسب را طبق ویژگی های دستگاه انجام می دهد. این طراحی علاوه بر تغییر طرح بر اساس اندازه صفحه نمایش، بسته به شرایطی مانند وجود صفحه نمایش رتینا در دستگاه نیز تغییر می کند. سرور قادر به تشخیص نمایش گر رتینا بوده و تصاویر با کیفیت بالا را برای دستگاه هایی از قبیل iPad ارائه می دهد، در حالی که در نمایشگر های عادی تصاویری با کیفیت پایین تر نمایش داده می شود.
از معایب AWD می توان به پر هزینه بودن تولید ساختار اولیه اشاره کرد، چرا که نیاز به طراحی چند طرح مختلف دارد. همچنین حفظ و به روز رسانی تمام این طرح ها بسیار وقت گیر بوده که نهایتا به صرف هزینه های زیادی منجر خواهد شد.
پس به طور خلاصه یک وبسایت سازگار یا Adaptive، وبسایتی است که حاوی مجموعه ای از طرح های از پیش تعریف شده بوده که متناسب با نوع دستگاه های شناسایی شده و توسط سرور فعال می شوند.
مقایسه طراحی Responsive و Adaptive
شباهت آشکار هر دو روش این است که دسترسی به محتوای وب سایت را در دستگاه های تلفن همراه و اندازه های مختلف صفحه نمایش بهبود می بخشند. آنها همچنین تجربه کاربری(UX) بازدید کنندگان با استفاده از گوشی همراه را بهبود می بخشند.
این دو روش در شیوه ارائه طراحی واکنش گرا / سازگار به کاربر متفاوت هستند. RWD به گریدهای سیال(fluid) وابسته بوده و AWD بر طرح هایی با اندازه های از پیش تعریف شده متکی است. همچنین از تفاوت های دیگر آنها می توان به سمت سرویس یا سمت سرور بودن آنها اشاره کرد که قبلا راجع آن صحبت کردیم.
مزایای طراحی واکنش گرا یا Responsive:
- کاربر پسند و قابل انعطاف بودن در رزولوشن های مختلف صفحات نمایش.
- تجربه کاربری(UX) مناسب و یکپارچگی بصری در دستگاههای مختلف، با صرف هزینه کم جهت نگهداری.
- سازگاری بیشتر با اصول SEO به دلیل نبود تمایز در صفحات مختلف و شباهت ساختاری صفحات در دستگاههای مختلف.
- ارتباط بین نمایش محتوا در تلفن همراه و دسکتاپ بدون انجام ریدایرکت.
مزایای استفاده از طراحی سازگار یا Adaptive:
- سازگاری با پروژه های پیچیده
- کارایی و کاربرپسندی بیشتر
- انجام آزمون بسیار ساده تر و عملیات نسبتا دقیق تر
از طراحی سازگار استفاده کنیم یا طراحی واکنش گرا؟
با توجه به رتبه، طراحی وب واکنش گرا تقریبا همیشه گزینه ای امن و ارزان برای استفاده در سایت است. چرا که بدون در نظر گرفتن اندازه های صفحات نمایش جدید، همیشه به خوبی عمل می کند، زمان بارگذاری را بهبود می بخشد، و معمولا ارزش تلاش بیشتر برای ایجاد آن را دارد. علاوه بر این وجود فریمورک های مختلف انجام دادن فرایند طراحی Responsive را بسیار ساده کرده اند.
با این حال، برای بعضی از سایت ها طراحی سازگار احتمالا گزینه بهتری است. سایت هایی که می خواهند بهترین تجربه کاربری(UX) را در تعامل با کاربر داشته باشند و سرعت بارگزاری سریعتری داشته باشند و کنترل کامل و دقیقی روی تک تک المان های موجود در صفحه داشته باشند و در مقابل از پس هزینه های توسعه طرح های سازگار بر می آیند می توانند از این نوع طراحی استفاده کنند.
امیدواریم طی مطالعه این مقاله از مرجع آموزش طراحی UI و آموزش UX، اطلاعاتی در مورد دو نوع طراحی واکنش گرا و سازگار کسب کرده باشید.
