طراحی وب واکنش‌گرا و تطبیقی چه تفاوت‌هایی با هم دارند؟

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

شکل 1

طراحی واکنش‌گرا

اولین سایتی که بر مبنای یک طرح سازگار با عرض مرورگرها کار خود را آغاز کرد سایت Audi.com بود که نخستین بار در سال 2001 میلادی به فضای مجازی وارد شد. در سال 2008 میلادی بود که واژه‌هایی شبیه به انعطاف‌پذیری، شناور بودن و ارتجاعی بودن به دنیای طراحی وب وارد شد. اما اصلاح طراحی واکنش‌گرا اولین بار از سوی طراح و توسعه‌دهنده معروف وب ایتان مارکت در کتابش به‌نام Responsive Web Design مورد بررسی قرار گرفت. طراحی‌های واکنش‌گرا به تغییر اندازه در عرض مرورگرها واکنش نشان داده و عناصر موجود در صفحه را متناسب با فضای آزاد در دسترس تنظیم می‌کنند. یک سایت واکنش‌گرا محتوا را بر مبنای فضای آزاد در دسترس مرورگرها نشان می‌دهد. (شکل 2) اگر شما یک سایت واکنش‌گرا را روی دسکتاپ باز کنید و در ادامه اندازه پنجره مرورگر را تغییر دهید، محتوا و عناصر به‌شکل پویا دومرتبه چینش می‌شوند (حداقل به‌لحاظ تئوری این‌گونه است) تا محتوا به‌شکل بهینه‌ شده‌ای در پنجره مرورگر قرار گیرد. در گوشی‌های موبایل این فرآیند به‌شکل خودکار انجام می‌شود، سایت فضای در دسترس را بررسی و در ادامه خود را با ایده‌آل‌ترین حالت هماهنگ می‌کند. طراحی واکنش‌گرا یک تکنیک پیاده‌سازی مستقیم است و بر مبنای رویکرد طراحی شناور (fluid) کار می‌کند. این حرف به این معنا است که کاربران می‌توانند متناسب با دستگاهی که از آن استفاده می‌کنند و درست مشابه با حالتی که پشت یک مانیتور بزرگ قرار گرفته‌اند، به محتوای شما دسترسی داشته باشند. در این حالت طراح به‌جای آنکه از مقادیر ثابت برای آرایش عناصر استفاده کند، با مقادیر پویا کار می‌کند. در نتیجه در طراحی واکنش‌گرا با مقادیری همچون پیکسل و پوینت سر و کار نداریم، بلکه طراحی ما بر مبنای واحدهای نسبی همچون درصد است. مقادیر پویا به شما اجازه می‌دهند بدون هیچ مشکل خاصی با کوچک‌ترین و بزرگ‌ترین صفحه ‌نمایش‌ها کار کنید. در کنار به‌کارگیری واحدهای نسبی شما باید از انعطاف‌پذیر نیز استفاده کنید. به ‌طوری که محتوای چندرسانه‌ای نیز باید با واحدهای نسبی به نمایش درآید. اگر نسبت به این موضوع بی‌توجه باشید، محتوای چندرسانه‌ای از عنصری که برای نمایش آن در نظر گرفته شده بیرون می‌زند. فراموش نکنید که در طراحی واکنش‌گرا دو عامل مدیا کوئری‌های CSS3 و نقاط شکست نیز نقش کلیدی دارند. مدیا کوئری‌ها به یک صفحه اجازه می‌دهند از قواعد سبک‌بندی مختلف CSS بر مبنای ویژگی‌های ذاتی دستگاهی که در حال نمایش یک سایت است استفاده کند. همچنین فراموش نکنید که به‌عنوان یک طراح وب باید به‌شکل درستی اطلاعات لازم در ارتباط با نیازها و درخواست‌های کاربران نهایی را در اختیار داشته باشید. 

شکل 2

طراحی تطبیقی

طراحی وب تطبیقی اولین بار در سال 2011 میلادی از سوی آرون گاستافسون در کتابش تحت عنوان:

Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement 

معرفی شد. طراحی واکنش‌گرا بر تغییرات الگوی طراحی به‌منظور دستیابی به حداکثر تناسب ممکن اشاره دارد، در حالی که در طراحی تطبیقی شما با طرح‌های چندگانه اما با اندازه ثابت سر و کار دارید. در این طرح زمانی که سایتی فضای آزاد در دسترس را شناسایی کرد، مناسب‌ترین طرح ممکن برای صفحه ‌نمایش را انتخاب می‌کند. در نتیجه زمانی که شما در مرورگر دسکتاپی خود سایتی را باز می‌کنید، سایت بهترین لایه ممکن برای نمایش روی صفحه دسکتاپ را نشان می‌دهد. در این حالت زمانی که اندازه مرورگر را تغییر می‌دهید، هیچ تأثیری روی طراحی به وجود نخواهد آمد. بعضی از سایت‌ها به‌سرعت رویکرد طراحی تطبیقی را قبول کردند و آن ‌را به کار گرفتند. آمازون، اپل، About.com و... از جمله شرکت‌هایی بودند که خودشان را با این الگوی طراحی هماهنگ کردند و به پیکربندی مجدد سایت‌های خود پرداختند، به ‌طوری که سایت‌ها با رویکرد بهینه‌سازی ‌شده برای موبایل در اختیار کاربر نهایی قرار گیرد. نکته‌ای که باید به آن توجه داشته باشید این است که طرح به نمایش درآمده از یک سایت موبایلی که بر پایه طراحی تطبیقی طراحی شده ممکن است متفاوت از نسخه دسکتاپی آن باشد. به‌واسطه آنکه طراحان از یک لایه متفاوت برای صفحه ‌نمایش موبایل استفاده و در نتیجه برای چینش عناصر از بازطراحی متفاوت استفاده کرده‌اند. در طراحی تطبیقی مرسوم است که شش طرح برای شش صفحه ‌نمایش با عرض‌های 320، 480، 760، 960، 1200 و 1600 پیکسل آماده کنید. 

طراحی برنامه‌های موبایل مستقل

گزینه دیگری برای ساخت سایت‌ها وجود دارد که در این رویکرد سایت‌ها تنها برای گوشی‌های موبایل طراحی می‌شوند. اگر به نشانی اینترنتی این‌گونه سایت‌ها نگاهی داشته باشید، پیشوند m. را به‌خوبی مشاهده می‌کنید. این حالت طراحی نیز رویکرد جذابی است. برخی طراحان تمایل دارند تا سایت‌هایی را مختص دستگاه‌های موبایلی طراحی کنند، به‌ طوری که عناصر و طرح‌بندی در قالب یک فرمت اختصاصی آماده ‌شود. در گذشته گوگل رتبه‌بندی خاصی برای این سایت‌ها در نظر می‌گرفت، اما امروزه با سایت‌های واکنش‌گرا، تطبیقی و سایت‌های ویژه دستگاه‌های همراه به یک شکل برخورد می‌کند. عیب بزرگی که این رویکرد دارد در این است که شما نیاز دارید یک سایت جدا را طراحی کنید که این موضوع فرآیند ویرایش و نگهداری سایت را بیش از پیش سخت می‌کند. به‌واسطه آنکه شما باید دو نسخه از یک سایت را به‌طور مستمر مورد بازرسی و ویرایش قرار دهید. دلیل قابل قبولی برای به‌کارگیری چنین روشی نمی‌توان ارائه کرد و همچنین قابلیت‌های خاصی نیز در چند سال اخیر به این تکنیک افزوده نشده است. در نتیجه بعید به نظر می‌رسد در آینده نیز شاهد تحول خاصی در این زمینه باشیم.

کدام‌یک را انتخاب کنیم؟ طراحی تطبیقی یا واکنش‌گرا؟

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

به‌عنوان یک طراح شما می‌توانید به کاربران نشان دهید به آن‌ها احترام می‌گذارید و متناسب با دستگاه موبایلی که در حال استفاده از آن هستند یک رابط کاربری دوستانه را در اختیار آن‌ها قرار می‌دهید. در همین حال، می‌توانید کاربران دسکتاپ را نیز در اختیار داشته باشید. در این مدل شما شش طرح را در قالب استاندارد در اختیار دارید، اما بسته به داده‌های کاربری ممکن است به طرح‌های بیشتری نیاز داشته باشید. یک طراحی تطبیقی قدرتمند یک تجربه کاربری دلپذیر را در اختیار کاربران قرار می‌دهد، در حالی که طراحی واکنش‌گرا مبتنی بر دسکتاپ است. اغلب کاربران با دستگاه‌های هوشمندی که در اختیار دارند احساس راحتی می‌کنند. ما تمایل داریم دستگاه‌های هوشمندی که از آن‌ها استفاده می‌کنیم به‌درستی درک کنند که در حال انجام چه کاری هستیم. شما می‌توانید به‌منظور نمایش بهتر تبلیغات طراحی تطبیقی را بهینه‌سازی کنید. به‌واسطه آنکه شما برای تفکیک‌پذیری‌های مختلف طراحی می‌کنید، در نتیجه می‌توانید به نیازهای خاص کاربران نیز جامع عمل بپوشانید. متمرکز شدن بر رفتار کاربران و در ادامه طراحی دقیق آگهی‌ها و نمایش درست آن‌ها رویکردی است که طراحی تطبیقی به‌خوبی از عهده انجام آن برمی‌آید. آمارها نشان می‌دهند سایت‌های تطبیقی چیزی حدود 2 تا 3 برابر سریع‌تر از سایت‌های واکنش‌گرا هستند و به داده‌های کمتری در زمان بارگذاری نیاز دارند که همین موضوع روی تجربه کاربری تأثیر محسوسی می‌گذارد. طراحی تطبیقی مزایای قدرتمند خاص خود را دارد. با وجود مزایای متعدد، طراحی تطبیقی معایبی نیز دارد. اول آنکه در مقایسه با طراحی واکنش‌گرا به کار بیشتری نیاز دارد. به همین دلیل اکثر طراحی‌های تطبیقی به‌منظور تکمیل سایت‌های موجود و با هدف دسترسی دستگا‌ه‌‌های مختلف به یک سایت مورد استفاده قرار می‌گیرند. دوم اینکه طراحی‌های تطبیقی ممکن است در میانه راه کاربر را به حال خود رها کنند. کاربران تبلت یا نوت‌بوک ممکن است مورد توجه قرار نگیرند، به‌واسطه آنکه امروزه تمرکز اصلی طراحان روی کاربران دسکتاپ و گوشی‌های هوشمند قرار دارد. در نتیجه مهم است که یک لینک برای رفتن از یک نسخه به نسخه دیگر در اختیار کاربران قرار دهید. سرانجام، در حالی که عملکرد بات‌های مورد استفاده از سوی موتورهای جست‌وجو در مقایسه با گذشته بهتر بوده و به‌خوبی می‌توانند تفاوت میان سایت‌های .com و m.com را تشخیص دهند، اما هنوز هم اکثر موتورهای جست‌وجو این دو نشانی‌ اینترنتی را به یک شکل رتبه‌بندی نمی‌کنند. در نتیجه این احتمال وجود دارد که یک طراحی تطبیقی بر سئو شما تأثیر منفی بگذارد. توجه داشته باشید که گوگل نیز همانند کاربران، سایت‌هایی که به‌سرعت بارگذاری می‌شوند را دوست دارد. 

درنهایت

در مجموع باید بگوییم انتخاب یک طراحی واکنش‌گرا یا تطبیقی به توجه و بررسی دقیق نیاز دارد. در حالی که در ظاهر ممکن است منطقی به نظر برسد که طراحی واکنش‌گرا به‌لحاظ کاهش هزینه‌ها گزینه ایده‌آل‌تری است، سئو را بهبود می‌بخشد و یک تجربه کاربری بدون مشکل را ارائه می‌کند، اما بررسی مزایا و معایب این دو طرح کاملاً ضروری است. طراحی تطبیقی می‌تواند به بیشتر نیازهای کاربران پاسخ دهد و در مقابل تغییرات نیز انعطاف‌پذیر باشد. جمله معروفی است که می‌گوید: «جانورانی که در یک گونه زنده می‌مانند لزوماً قوی یا باهوش نیستند، بلکه آن‌ها که در مقابل تغییرات انعطاف‌پذیرتر هستند ماندگارند.» درباره محصول یا سرویس خود فکر کنید. آیا کاربران شما در یک محیط خاص از آن استفاده می‌کنند؟ از چه رویکردی برای مشارکت و آگاه‌سازی آن‌ها استفاده می‌کنید؟ به یاد داشته باشید که تنها گوشی‌های موبایل نیستند که به‌مرور زمان هوشمند می‌شوند. در خانه‌ها و ادارات نیز ما بیش از یک کامپیوتر دسکتاپ سنتی داریم. اکنون طیف گسترده‌ای از دستگاه‌های هوشمند که تحت عنوان اینترنت اشیا از آن‌ها نام می‌بریم قرار دارند. این محیطی است که اشیا به‌سرعت آن‌ را پر خواهند کرد. ما مجبور هستیم طراحی خود را متناسب با این تجهیزات پیاده‌سازی کنیم.