طراحی سایت شرکتی
طراحی سایت شرکتی
ژوئن 12, 2020
طراحی سایت واکنشگرا

طراحی سایت واکنشگرا

طراحی سایت واکنشگرا با پیشرفتی که تکنولوژی در چند سال اخیر داشته است و تبلت

و گوشی های هوشمند به بازار عرضه شدند این سیستم ها در استفاده از اینترنت هم

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

سال قبل شاید کمتر سایتی را می دیدید که نسخه موبایل داشته باشد شما وقتی که

با سیستم هایی که با ابعاد کوچکتری نسبت به مانیتور کامپیوتر یا لپتاپتان دارد مثل موبایل

یا تبلت سایتی را باز کنید مجبور می شوید که برای اینکه یک دکمه ای را انتخاب کنید یا

یک متنی را بخوانید زوم کنید همین موضوع باعث می شود که طراحان به وسیله طراحی

واکنشگرا سایت را انعطاف پذیر کنند تا سایت روی انواع سیستم ها به خوبی بدون نیاز به

زوم کردن و بدون مشکل و به خوبی قابل استفاده باشد .

طراحی ریسپانسیو:

یک فرآیند طراحی سایت برای نمایش مناسب در تمام مرورگرها و انواع دستگاه ها

و صفحات نمایش کاربران است در این روش ظاهر سایت ، محتوا و عملکرد آن با توجه

به ابعاد صفحه نمایش کاربر تغییر کرده و سایر بخش ها متناسب با آن تنظیم می شوند.

در گذشته که اثری ازگوشی های موبایل هوشمند ، تبلت و گجت های متنوع نبود نیازی

به طراحی سایت ریسپانسیو احساس نمی شد ولی با ورود مدل ها و برندهای متنوع و استقبال

کاربران از این دستگاه ها طراحی سایت نیز دچار تغییراتی اساسی و مهم شد.

امروزه استفاده از دستگاه های هوشمند و تلفن همراه ، تبلت و … افزایش یافته است و

طراحی سایت واکنشگرا به صورت فزاینده ای مهم شده است و کاربران بیشتر از طریق

تلفن همراه سایت ها را می بینند.

گوگل از سال 2015 طراحی سایت ریسپانسیو (RWD) را یکی از عوامل مهم رتبه بندی اعلام

کرده است و امروزه یکی از فاکتورهای مهم گوگل برای رتبه بندی وب سایت ها ، طراحی سایت

واکنشگرا است توجه به این طراحی بسیار ضروری شده است و لازم است که توجه داشته

باشید که سایت شما با توجه به طراحی ریسپانسیو موبایل و… بهینه سازی شده است.

چرا ریسپانسیو بودن سایت مهم است؟

علاوه بر متناسب بودن سایت با صفحه نمایش ، کابران بتوانند با سایت ما تعامل برقرار

کنند و خسته نشوند . طراحی سایت ریسپانسیو به نفع کاربران سایت شما است چون

این گونه طراحی روی همه دستگاه ها ظاهرش را حفظ می کند و کاربر به راحتی و بدون

نیاز به زوم کردن و اسکرول صفحه به راست و چپ می تواند محتوایی که نیاز دارد را به

دست آورد و بخواند . یک امتیاز برای نشان داده شدن سایت شما در نتایج اولیه جستجو

است و اگر سایت شما ریسپانسیو نباشد گوگل آن را جریمه می کند چون می خواهد

بهترین تجربه کاربری را برای کابرانش فراهم کند.

به تصویر زیر نگاه کنید این یک نمونه از طراحی سایت واکنشگرا است در نمایشگر تلفن

همراه و تبلت چیدمان عناصری که در نمایشگر مانیتور کامپیوتر بوده تغییر کرده است تا

برای کاربران رابط کاربری مناسبتری ایجاد کند.

طراحی سایت واکنشگرا

تست Responsive بودن سایت:

یکی از بهترین ابزارها برای تست Responsive بودن سایت ابزار گوگل است که می توانید

برای تست سایت خود به لینک زیر مراجعه کنید و آدرس سایت خود را در قسمت

Enter a URL to test وارد کرده و سپس روی دکمه TEST URL کلیک کنید تا به شما بگوید

سایتتان ریسپانسیو است یا نه.

تست Responsive بودن سایت

روش های ریسپانسیو کردن سایت:

استفاده از  media @ در  css

{;h2{font-size:28p

}(media (max-width:500px@

{;h2{font-size: 23px

{

استفاده از W3.css

یک فریمورک CSS است که برای ریسپانسیو کردن سایت به کار می رود

و به صورت پیش فرض Mobile-first است.

استفاده از Bootstrap 

 یک فریمورک معروف است که با استفاده از HTML , CSS , JQuery

صفحات وب را ریسپانسیو می کند.

ریسپانسیو کردن سایت های وردپرسی

افزونه WPtouch

افزونه را دانلود و نصب کنید و در قسمت تنظیمات روی آن کلیک کنید و وارد قسمت

تنظیمات شوید می بینید که نیازی به انجام تنظیمات ندارید و به صورت پیش فرض

تنظیم شده است و فقط کافی است آن را فعال کنید تا تمامی قسمت های سایت

ریسپانسیو شود.

طراحی سایت ریسپانسیو

افزونه SiteOrigin

این افزونه کل وب سایت را ریسپانسیو می کند.

این افزونه امکاناتی چون Drag and Drop دارد و با تمامی قالب های وردپرس سازگار

است و شما می توانید با این افزونه صفحات واکنشگرا و ریسپانسیو بسازید.

افزونه را دانلود و نصب کنید و بعد از فعالسازی مشاهده می کنید که هیچ گزینه ای

در قسمت تنظیمات اضافه نشده است.

در قسمت زیر منوی برگه ها روی افزودن جدید کلیک کنید و گزینه Page Builder را انتخاب کنید.

قالب ریسپانسیو
Responsiveبودن سایت
طراحی سایت واکنشگرا

تعداد ستون و ردیف ها را مشخص کنید و در منوی going from سایز ستون ها را تنظیم کنید

و در اخر روی دکمه Insert کلیک کنید و وارد صفحه زیر شوید و از قسمت تنظیمات رنگ و …

را تنظیم و با کلیک بر روی ستون ها در داخل آن ها محتوای خود را وارد کنید.

طراحی سایت ریسپانسیو

مشاهده می کنید با استفاده از افزونه های بالا به آسانی می توانید صفحات ریسپانسیو بسازید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *