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

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

فکر می‌کنم این تجربه‌ی تلخ را شما هم دارید. چون خیلی‌ از ما بیشتروقت‌ها کارهای آنلاین را با موبایل یا تبلت انجام می‌دهیم. برای شما هم پیش آمده که سایتی را با موبایل باز می‌کنید و با خودتان می‌گویید: ای کاش این صفحه را باز نمی‌کردم! چون همه‌چیز به‌هم ریخته است و هیچ المانی در صفحه سر جای خودش نیست. می‌دانید دلیل این به‌هم‌ریختگی چیست؟ سایت واکنش گرا طراحی نشده است.

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

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

یک راه‌حل این است که چند نسخه از یک سایت برای دستگاه‌های مختلف طراحی شود. یعنی مثلا یک نسخه برای دسکتاپ و یک نسخه برای موبایل با URL متفاوت. ناگفته پیداست که این راه‌حل پرهزینه و نه‌چندان کاربردی است. البته راه‌حل‌های دیگری نیز پیشنهاد شده است که هرکدام درعمل مشکلات دیگری را ایجاد می‌کنند و مشکل را نیز کاملا حل نمی‌‌کنند. در سال ۲۰۱۰ بود که Ethan Marcotte ایده‌ای جدید را به دنیای وب دیزاین معرفی کرد: Responsive Design. او ایده‌ی طراحی سایت ریسپانسیو را از مفهومی مشابه در معماری (Responsive Architecture) گرفته بود. ریسپانسیو‌بودن وب دیزاین یا واکشن گرا کردن سایت کامل‌ترین و بهترین راه‌حل است. 

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

اصل دوم این است که طراح و توسعه‌دهنده باید به‌دنبال بهترین شیوه‌ها و تکنیک‌هایی باشد که به طراحی واکنش گرا کمک می‌کند. نکته اینجاست که از سال ۲۰۱۰ تا امروز پیشرفت‌های زیادی در وب دیزاین و تکنیک‌های لازم برای ریسپانسیو‌بودن سایت اتفاق افتاده است. این درست است که مجموعه تکنیک‌های اساسی در طراحی واکنش گرا ۳ تکنیک است، اما هر طراح و توسعه‌دهنده‌ای براساس پروژه‌ای که دارد می‌تواند و ممکن است از تکنیک‌های دیگر هم استفاده کند. 

ضرورت طراحی سایت واکنش گرا
برای آن که با ضرورت واکنش گرایی در یک وب سایت حرفه ای بیش تر آشنا شوید به مزایای واکنش گرایی اشاره می کنیم. از طرفی آثار زیان بار عدم واکنش گرایی مناسب را نیز در ابعاد گوناگون شرح می دهیم تا به اهمیت موضوع بیش تر پی ببرید.

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

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

میزان بازدید و رتبۀ سایت‌ تان افزایش می‌یابد
هدف از واکنش گرایی این است که سایت شما از تمامی جهات کاربردی باشد. اساساً طراحی واکنش گرا خود را با هر دستگاهی سازگار می کند. این طراحی صرفا شامل یک طراحی واحد، یک وب سایت واحد و یک دامین واحد است. این طراحی به منظور تعامل و سازگاری با نیاز مخاطبان در پلتفرم های مختلف است. طراحی واکنش گرا از طریق جذب کاربران تلفن همراه باعث افزایش نرخ تبدیل می‌شود. دلیل آن هم روشن است. اگر یک سایت برای بازدید‌کنندگان از طریق تبلت یا تلفن همراه به خوبی نمایش داده نشود، کاربرانی که از این دستگاه ها استفاده میکنند قادر به مشاهده محصولات نخواهند بود و خرید و سفارشی صورت نخواهد گرفت. به عبارت دیگر طراحی واکنش گرا باعث می شود مخاطبان بتوانند به راحتی با وبسایت شما ارتباط برقرار کنند. در نتیجه به مرور میزان ترافیک وب سایت شما افزایش خواهد یافت.

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

می دانیم که همیشه “وقت” یکی از الویت های مشتریان است. زمانی که فقط در یک نوبت قالبی طراحی می شود که در تمام دستگاه‌ها با سایزهای مختلف به خوبی نمایش داده می شود، زمان صرف شده به شدت کاهش خواهد یافت.

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