آموزش کامل ریسپانسیو سایت

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

سایت ریسپانسیو طراحی شده در دوره جامع طراحی سایت

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

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

تشخیص ریسپانسیو بودن وب سایت

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

• تست ریسپانسیو سایت با مرورگر
• تست ریسپانسیو سایت با ابزار گوگل
• تست ریسپانسیو سایت با ابزارهای آنلاین
• تست ریسپانسیو سایت با دستگاه مربوطه

چک کردن ریسپانسیو سایت با inspect مرورگر

خب ما در بالا چهار روش رو معرفی کردیم که البته روش آخر زیاد بهینه نیست اولین روش استفاده از خود مروگر هست که برای اینکار کافیه روی صفحه سایت کلیک راست کنید و گزینه inspect element رو انتخاب کنید این گزینه برای هر دو مرورگر فایرفاکس و گوگل کروم وجود داره که تصویر محیط ریسپانسیو ابزار inpect مرورگر رو در تصویر زیر مشاهده می کنید.

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

چک کردن ریسپانسیو سایت با ابزار گوگل

از اونجایی که مبنای اصلی ریسپانسیو کردن ما برای موتور جستجوی گوگل است پس چی بهتر از استفاده ابزار خودش، در واقع گوگل یک ابزاری داره که شما می تونید واردش بشید و آدرس وبسایت خود را برای بررسی ریسپانسیو بودن وارد کنید و نتیجه رو بعد از چند ثانیه مشاهده کنید برای وارد شدن به این ابزار به آدرس https://search.google.com/test/mobile-friendly مراجعه کنید بعد از اینکه وارد ابزار شدید آدرس صفحه ای که قصد بررسی ریسپانسیو آن را دارید وارد کنید و اینتر بزنید تا مانند تصویر زیر نتیجه رو به شما نمایش دهد.

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

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

یکسری ابزارهای دیگه هم در اینترنت وجود داره که معروف ترین آنها در دوره آموزش سئو معرفی شده برای پیدا کردن این ابزارها کافیه در گوگل عبارت responsive check online tools رو جستجو کنید تا کلی ابزار براتون نمایش داده شود.

چگونه سایتمان را ریسپانسیو کنیم؟

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

آموزش ریسپانسیو قالب وردپرس

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

ریسپانسیو سایت با افزونه WPtouch

یک افزونه ای برای وردپرس با نام WPtouch وجود دارد که کمک می کند یک سایت ریسپانسیو برای موبایل داشته باشید کار این افزونه این است که میاد کلاً یک قالب جدید رو برای موبایل برای سایت شما اضافه می کند که شاید مورد پسند بسیاری از کاربران نباشید چون افراد دوست دارند برای موبایل هم همون قالب قبلی نمایش داده شود پس این دوستان باید از روش بعدی استفاده کنند.

آموزش ریسپانسیو سایت با css

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

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

نکته

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

نکته

در بخش پایین کدهایی که برای ریسپانسیو کردن سایت نیاز داریم رو تک تک اضافه و توضیح خواهیم داد یکی از خوبی های css این است که شما می تونید استایل دهی های مختلفی رو در عرض های مختلف تنظیم کنید مثلا در بلاک کد زیر ما تمام کدهایی رو اضافه می کنیم که فقط می خواهیم تا عرض 1080 پیکسل نمایش داده شود یعنی حداکثر اعمال شدن کدهای داخل کروشه دستگاه های با عرض 1080 پیکسل است.

 @media screen and (max-width:1080px){

    //کدهای خود را اینجا اضافه کنید
 
}

حالا بریم با یک مثال دیگه این مورد رو توضیح بدیم پس به کدهای زیر دقت کنید

 @media screen and (max-width:360px){

	 .sub-menu li,.sub-menu ul{
		   width: 100%;
	 }
	 .mobile-menu{
		 display: block;
		 background-color: #101286;
		 width: 60%;
		 height: 100%;
		 position:fixed;
		 top: 0;
		 right: -100%;
		 z-index: 999;
		 transition-duration: 0.5s;
		 overflow: auto;
	 }
}

خب همونطور که در بالا مشاهده می کنید ما تمام کدهای خودمون رو داخل عرض حداکثر 360 پیکسل قرار دادیم که مربوط به موبایل می شود وقتی دستور media screen and (max-width:360px) رو می نویسیم منظورمون اینه که بگیم آقای مرورگر کروم یا فایرفاکس یا هر چیز دیگه ای، هر وقت کاربری وارد سایت من شد خودت بررسی کن و اگر اندازه عرض دستگاهش کوچیکتر از 360 پیکسل بود این اندازه ها و استایل های فلان رو که داخلش قرار دادیم رو اعمال کن حتماً هم حواستون باشه که کدها داخل یک کروشه قرار بگیره

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

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

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

جمع بندی طراحی ریسپانسیو سایت

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

سوالات متداول