ریسپانسیو چیست
طراحی سایت با تکنیک ریسپانسیو مستقل از سایز صفحه نمایش و نوع دستگاه کاربر می باشد. بنابراین طراحی ریسپانسیو روشی برای بهینه سازی شیوه نمایش سایت در دستگاه های مختلف با کمترین تغییر، سایز می باشد. منوی سریع، آسان و عدم اسکرول افقی از مزایای ریسپانسیو می باشد
اگر شما نیز هنوز با عبارت و اصطلاحاتی مانند “طراحی وب سایت واکنشگرا (responsive)” آشنا نیستید. در این مطلب تصمیم داریم هرآنچه که در مورد طراحی سایت ریسپانسیو لازم است بدانید را توضیح دهیم. تا بفهمید سایت ریسپانسیو یا واکنشگرا (responsive) چیست.
طراحی ریسپانسیو چیست؟
طراحی وب سایت ریسپانسیو(RWD)، فرآیندی در طراحی سایت به شمار می آید که با استفاده از این تکنیک شما می توانید صفحات وب را به خوبی بر روی انواع دستگاه ها با سایزهای متفاوت به راحتی مشاهده نمایید. زیرا چیدمان، محتوا و عملکرد سایت در تمام دستگاه ها مطابق با آن دستگاه خاص است.تعریف طراحی وب سایت واکنشگرا (responsive) ساده است – یک طراحی وب است که هم اندازه‌ی صفحه نمایش مرورگر دسکتاپ، تبلت، و گوشی های هوشمند طراحی می‌شود.
آیا تا بحال شده است که یک وب سایت را در گوشی هوشمند خود باز کنید و متوجه شوید که آن وب سایت نسخه بسیار کوچک از آن چیزی است که شما بر روی دسکتاپ دیده اید؟ به همین دلیل مجبور میشوید زوم کنید و سپس وب سایت را بگردید و نقاط مختلف را بزرگ و کوچک کنید تا به محل مورد نظر خود بروید و یا متن مورد نیاز خود را بخوانید یا قادر به کلیک کردن روی یک قسمت مشخص شوید؟ در یک وب سایت واکنشگرا (responsive) اوضاع اینطور نیست. برای یک وب سایت واکنشگرا (responsive) مهم نیست که شما سایت را بر روی یک گوشی، تبلت و یا دسکتاپ باز می‌کنید، به هرحال آن متناسب با سایز و اندازه صفحه مرورگر کار میکند. و سایزوب سایت مناسب است نیاز به زوم بیشتر نیست.
اگر نوشته‌ی پیتر Cashmore را که تقریبا در سال 2013 چاپ کرد خوانده باشید، متوجه میشوید که موضوع طراحی وب سایت واکنش گرا (responsive) جدید نیست و ممکن است از اینکه این موضوع خیلی قدیمی است شگفت زده شوید. البته شما خیلی هم دیر نکردید، چرا که به احتمال زیاد هنوز خیلی از رقبای شما از تاثیر این تکنیک برای رشد سایت بیخر هستند. سال 2013 معلوم شد که آن سال، سال برانداختن شرکت ها و صنایعی است که تمایل دارند همچنان در مرز ورشکستگی فعالیت کنند و کاری به بازاریابی آنلاین و طراحی وب سایت واکنش گرا (responsive) برای رونق دادن به کار خود ندارند. اکثر شرکت های تجاری فاصله‌ی خیلی کمی تا ورشکستگی دارند و ممکن است در فاصله یک سال چنین اتفاقی برای آنها رخ دهد. موقعیت شما در گذشته امن بود، اما اکنون رقبای شما اوضاع را تغییر دادند و شرایط به گونه ای تغییر پیدا کرده است که بازاریابی اینترنتی و آنلاین اهمیت بسیار زیادی پیدا کرده است.
در یک وب سایت با قابلیت ریسپانسیو ساختار صفحه و کدهای سایت در همه دستگاه ها یکسان بوده و تنها نمایش آنها متفاوت است.
در صفحه نمایش مهم نیست سایز صفحه شما چقدر است، در این طراحی المان های صفحه سایز خود را به صورت درصدی از صفحه نمایش تعیین می کنند. همچنین ممکن است قسمت هایی از سایت در سایزهای مختلف حذف یا پدیدار شود. مثلا اسلایدر در موبایل ظاهری زیبا ندارد و بهتر است در نسخه موبایل حذف شود. برای ریسپانسیو کردن سایت راه های مختلفی وجود دارد فریم ورک هایی مانند بوت استرپ و متریال دیزاین شناشخته شده ترین راه برای ریسپانسیو کردن سایت است.
چرا طراحی واکنش گرا اهمیت دارد؟
چرا که راه حل خوبی است و اکنون تمام افراد دیگر همین کار را انجام می‌دهند.
اگر وب سایت خود را چند سالی است که بازطراحی نکردید، لازم است فرایند طراحی مجدد را کاملا از ابتدا انجام دهید و قطعا در این حالت ایجاد این نوع تغییرات مقداری بیشتر هزینه به دنبال خواهد داشت، معمولا مقدار هزینه “بستگی به درخواست دارد”.برای مثال اگر شما یک فروشگاه دارید و یا با وب سایت خود کار می‌کنید، ابتدا تنها از طراحان بپرسید که آیا امکان ایجاد تغییرات اساسی در وب سایت فعلی شما و تبدیل آن به یک طراحی واکنشگرا (responsive) وجود دارد یا خیر، و اگر امکان پذیر است هزینه اش چقدر است.
آینده از آن ابزار های موبایلی است
حال که با وب سایت واکنشگرا (responsive) آشنا شدید، من به موضوع صحبت قبلی خود برمی‌گردم و دوباره می‌گویم بدون وب سایت واکنشگرا (responsive) تجارت آنلاین و آینده آن در معرض افول قرار می‌گیرد. اگر میلی به تهیه چنین وب سایتی ندارید ممکن است مشتریان شما به سراغ رقیبان شما که رفتن به وب سایت آنها آسان تر است بروند. همانطور که می بینیم آینده از آن ابزار های موبایلی است و مردم به طور فزاینده ای به دستگاه های موبایل خود بیش از کامپیوترهاشون علاقه دارند. نیلسن می گوید که بیش از 60٪ از صاحبان تلفن همراه از گوشی های هوشمند خود برای مرور صفحات وب استفاده می‌کنند. در یک مطالعه اخیر توسط واکر سندز دیجیتال مشخص شد که از سال 2011 ترافیک پایه‌ی موبایل مشتری ها 171 درصد بیشتر شده است. Statistaمی گوید که تا سال 2017، 5 میلیارد نفر از گوشی های همراه استفاده می‌کنند. ساختن وب سایت واکنشگرا (responsive) هزینه کمی را برای شما خواهد داشت و با پرداخت آن می‌توانید به راحتی به تمام این افراد دسترسی پیدا کنید.
ابعاد ریسپانسیو
ابعاد ریسپانسیو سایت شامل موارد زیر است. این ابعاد به صورت پیکسل ارائه شده است. شامل سایزهای دستگاه های مختلف جهت طراحی می باشد. توجه داشته باشید که اگر زیسپانسیو بودن سایت خود را به صورت درصدی کار کرده باشید به راحتی می توانید سایت خود را در تمام دستگاه ها با صفحه نمایش های مختلف را به اشتراک بگذارید.
۳۲۰px
۴۸۰px
۶۰۰px
۷۶۸px
۹۰۰px
۱۲۰۰px
بنابراین یک قالب ریسپانسیو باید دارای سه قالب با شرایط با ابعاد زیر باشد.
سایز کوچک:دستگاه های زیر600 پیکسل می باشد که شامل تافن های همراه می شود
سایز متوسط: دستگاه های بین 600 تا 900 پیکسل. این سایز مختص برخی تبلتها، نوت بوکها و موبایل های بزرگ است
سایز بزرگ: دستگاههایی با سایز صفحه نمایش بیش از 900 پیکسل. این سایز مخصوص کامپیوترهای شخصی و رومیزی می باشد.
طراحی سایت انطباقی چیست ؟
طراحی سایت Adaptive برخلاف طراحی Responsive از چندین ساختار بر اساس سایزبندی های پیش بینی شده برای نمایش سایت استفاده می کند. در این روش عموما طراح سایت برای دسکتاپ، تبلت و موبایل ساختارهای متفاوتی طراحی میکند؛ هنگام ورود کاربر به سایت بر اساس سایز صفحه نمایش دستگاه وی تصمیم گرفته می شود که کدام ساختار به کاربر نشان داده شود. بر خلاف طراحی ریسپانسیو در طراحی واکنش گرا از پیکسل به جای درصد استفاده می کنیم و برای هر بخش از ابعاد ثابت استفاده می شود این تکنیک بیشتر مناسب طراحی سایت شخصی و شرکتی است.
در طراحی سایت انطباق پذیر چندین نسخه از سایت را در سایزهای متفاوت طراحی می کنند که در صفحه نمایش ها با سایزهای متفاوت نسخه مربوط به آن صفحه به نمایش گذاشته می شود. مانند قابلیت ریسپانسیو انعطاف پذیر نیست
مقایسه Responsive Design با Adaptive Design
در این بخش دو تکنیک طراحی سایت ریسپانسیو با هم مقایسه شده است. و نقاط ضعف و قوت هر کدام از تکنیک ها به تفصیل بیان شده است. طراحی رسپانسیو نسبت به طراحی انطباقی سخت و زمانبر بوده زیرا برای ایجاد سایت با یک ساختار زیبا و کسب اطمینان از نمایش صحیح آن در همه سایزها نیازمند مهارت کدنویسی های دقیق و استفاده از دستورات پیچیده CSS است. اما در طراحی انطباق پذیر با طراحی 3 الی 4 نسخه متفاوت سایت را طراحی می کنند این کار را می توانید با کلاس دهی های جدید برای هر کدام استفاده نمایید. طراحی انطباقی انعطاف پذیری کمتری دارد.
طراحی انطباق پذیر گستره کمتری را پوشش خواهد داد
شما نهایتا از 6 سایز موفق به طراحی 3 الی 4 سایز می شوید. در حالیکه روزبروز بر تنوع سایز تلغن های همراه و تبلت ها افزوده می شود هر چه سایز صفحه نمایش فرد با سایز طراحی شده فاصله بیشتری داشته باشد امکان نمایش اشتباه و بروز خطا بیشتر خواهد بود. اما در طراحی ریسپانسیو شما به صورت درصدی کار می کنید و مطمئنا با یک طراحی اصولی یوه نمایش سایت در تمام گوشی های همراه با سایزهای مختلف یکسان است.
گردآوری :
قابلیت ریسپانسیو چیست
اگر شما در دستگاه های مختلف با سایزهای مختلف بتوانید یک سایت را به صورت اصولی ، بدون خطا مشاهده ، بدون نیاز به زوم و اسکرول افقی مشاهده نمایید. بدون شک به این تکنیک قابلیت ریسپانسیو گفته می شود.
