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

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

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

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

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

از مزایای روش اول این است که شما، به عنوان طراح می توانید مدیریت بهتر و بیشتری بر روی ظاهر وب سایت برای نمایشگرهای مختلف داشته باشید. هرچند، در این روش وب سایت شما نمی تواند، خود را با تغییر اندازۀ مرورگر هماهنگ کند و به آن واکنش نشان دهد. اگر زمانی نیاز داشته باشید که دو پنجره را همزمان و در کنار یکدیگر باز کنید، متوجه ایراد روش اول خواهید شد.

در روش دوم یا همان Layout مشبک شناور، به جای تغییر رفتار بر اساس پیکسل ها، بر اساس بخش ها عمل خواهد شد. به این ترتیب، محتوای وب سایت متناسب با اندازۀ مرورگر تغییر می کند و با توجه به سایز دستگاه های تلفن همراه یا تبلت، قابل انعطاف است. محتوای وب سایت، به عنوان درصدی از صفحۀ نمایش یا مرورگ تعریف می شود. به این ترتیب با تغییر سایز پنجره، محتوا با مرورگر هماهنگر می شود. این درصد محتوا با یک الگوریتم ساده قابل محاسبه بود: مجموع پیکسل ها تقسیم بر پیکسل های محتوا = درصد

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

برای اینکه مطمئن شوید که وب سایت شما و محتوای آن به کلی واکنش گرا هستند، باید برای تصاویر وب سایت خود نیز چاره ای بیاندیشید. تصاویر شناور می توانند با ساختار مشبک تغییر اندازه دهند. این راه حل به راحتی با کدهای CSS امکان پذیر است:

img { max –width:100%;}

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

در سال 2015، "موبایل-محور" بودن وب سایت ها، نکته ای بود که همواره بر آن تاکید شد. پیش بینی می شود تا پایان سال 2016 تزدیک به 90% از وب سایت ها، ریسپانسیو شده باشند. واکنش گرایی روشی است که طراحان وب سایت آن را بر روی تلفن های همراه امتحان کردند، سپس این روش را در مقیاس های بزرگتر اجرا نمودند. دلیل واکنش گرا شدن وب سایت ها، افزایش آمار جستجو از طریق تلفن همراه نسبت به رایانه های شخصی است. این آمار مخاطبان شما را مشخص می کند.

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

شاید این سوال پیش بیاید که اگر طراحی وب سایت را از گزینۀ "موبایل-محور" شروع کنیم، احتمالا به یک معادلۀ اپلیکیشن موبایل نیز نیاز خواهیم داشت. ما در پرتال، پیشنهاد می کنیم که وب سایت خود را به صورت واکنش گرا طراحی کنید تا با استانداردهای فعلی جهانی مطابقت داشته باشد. با رقابت سختی که در بین سیستم عامل های Android و iOS وجود دارد، دنیای اپلیکیشن ها را می توان ناپایدار دانست. داشتن وب سایتی ریسپانسیو تضمین می کند همۀ افرادی که با دستگاه های مختلف به اینترنت دسترسی دارند، می توانند از وب سایت شما بازدید کنند. با استفاد از فریم ورک های Foundation و Bootstrap می توانید به راحتی وب سایتی واکنش گرا ایجاد نمایید.

بهتر است بدانید که تمام وب سایت های ایجاد شده توسط سامانۀ پرتال واکنش گرا هستند و شما نیازی نیست که برای این کار اقدامی انجام دهید. در صورت داشتن سوالاتی در این زمینه شما می توانید با شماره 63404-021 تماس بگیرید.