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

چگونه سایت خود را ریسپانسیو کنیم؟ نحوه ریسپانسیو کردن سایت چگونه است؟ سایت واکنش گرا یا ریسپانسیو چه ویژگی هایی دارد؟ مزایای سایت ریسپانسیو چیست؟

از نظر گوگل یکی از مهمترین مواردی که این روزها می تواند در رتبه بندی صفحات مختلف سایت ما تاثیرگذار باشد، ریسپانسیو بودن سایت و همچنین موبایل فرندلی بودن آن است. به دلیل افزایش استفاده کاربران از گوشی های موبایل، ربات های گوگل اهمیت ویژه ای به این موضوع می دهند که سایت واکنش گرا باش و بتواند در تمام دستگاه های الکترونیکی و سیستم های مختلف به درستی نمایش داده شود.

اما سوال اصلی این است که نحوه ریسپانسیو کردن سایت به چه شکل است؟ و اینکه آیا یک قالب وردپرس ریسپانسیو به معنی تمام شدن کار است؟

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

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

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

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

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

• استفاده از متا تگ ViewPort
• استفاده از CSS Media Queries
• استفاده از Flexbox
• استفاده از افزونه WPtouch

اگر تازه کار هستید و تاکنون سایتی را ریسپانسیو نکرده اید، بهتر است از این لیست استفاده کنید. در ادامه هر یک از این موارد را به طور تخصصی تر با هم بررسی خواهیم کرد.

1. ریسپانسیو کردن سایت با متا تگ ViewPort

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

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

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

نکته: متا تگ ViewPort به طور کامل باعث ریسپانسیو شدن سایت نمی شود و فقط می تواند این روند را راحت تر کند.

2. استفاده از CSS Media Queries

همانطور که ممکن است تاکنون شنیده باشید، برای اعمال انواع مختلف اصلاحات و یا تغییرات در سایت می توانید از کدهای CSS و HTML بهره ببرید. برای این کار در قدم اول باید Media Query ها را بیاموزید. با استفاده از این کدها می توانید المان های مختلف موجود در صفحه را بر اساس عرض صفحه نمایشی که دارید، تنظیم کنید.

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

از Media Query می توان برای تنظیم اندازه grid layout ها، اندازه فونت، margin ها و padding ها و … بهره برد.

3. استفاده از Flexbox برای ساخت سایت ریسپانسیو

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

برای ایجاد یک چیدمان Flexbox، شما باید یک Flex Container بسازید. برای این کار، می‌توانید یک المان اصلی را به عنوان Flex Container انتخاب کنید و به آن خاصیت `display: flex;` را اعمال کنید. سپس فضاهای خالی بین المان‌ها را به صورت انعطاف پذیر مدیریت کنید. می‌توانید از ویژگی‌های `justify-content` و `align-items` برای تعیین چیدمان افقی و عمودی المان‌ها استفاده کنید.

المان‌های داخل این ابزار به عنوان Flex Items شناخته می‌شوند. شما می‌توانید ویژگی‌های `flex-grow`، `flex-shrink` و `flex-basis` را برای کنترل اندازه و انعطاف‌پذیری المان‌ها استفاده کنید.

در نهایت با استفاده از این روش‌ها و تکنیک‌های Flexbox، می‌توانید یک سایت ریسپانسیو و انعطاف‌پذیر بسازید که به درستی با اندازه‌های مختلف صفحه وب سازگار باشد.

4. استفاده از افزونه WPtouch

با استفاده از افزونه WPtouch، شما می‌توانید یک تجربه کاربری بهتر برای کاربران موبایل ارائه دهید و به آن‌ها امکان دسترسی به محتوای وب‌سایت شما را در یک صفحه‌ی ریسپانسیو برای دستگاه‌های موبایل فراهم کنید.

برای استفاده ابتدا باید افزونه WPtouch را از افزونه‌های وردپرس دانلود و نصب کنید. سپس افزونه را فعال کنید. پس از فعال‌سازی افزونه، می‌توانید به بخش تنظیمات WPtouch بروید و تنظیمات مورد نیاز خود را انجام دهید. این تنظیمات شامل تنظیمات مربوط به ظاهر و عملکرد نسخه موبایل وب‌سایت شما می‌شود. WPtouch به شما امکان می‌دهد تا ظاهر و عملکرد نسخه موبایل وب‌سایت خود را براساس نیازهای خود سفارشی‌سازی کنید. می‌توانید قالب و رنگ‌ها، ویژگی‌ها و تنظیمات دیگر را به دلخواه تغییر دهید.

با انجام این مراحل، شما می‌توانید از افزونه WPtouch برای ریسپانسیو کردن وب‌سایت خود برای دستگاه‌های موبایل استفاده کنید و تجربه کاربری بهتری برای کاربران موبایل ارائه دهید.

بیشتر بخوانید: افزونه WPML وردپرس، پلاگین چند زبانه سازی وبسایت

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

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

3 موردی که باید در روند واکنش گرا بودن سایت به آن ها توجه کرد، شامل موارد زیر است:

• چیدمان(Layout) المان های مختلف در سایت 
• ویدیو و عکس های موجود در صفحه
• تایپوگرافی (Typography)

1. چیدمان (Layout)

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

اولین کار برای ایجاد یک سایت ریسپانسیو، این است که کدهای زیر را در تگ هد (<Head>) سایت قرار دهید. با قرار دادن این کدها، تنظیمات صفحه نمایش در تمام مرورگرها، حذف خواهد شد. سپس ابعاد صفحه نمایش، در تمام دستگاه‌ها، در مقیاس 1*1 تنظیم خواهد شد. وقتی این کدها کپی شوند، کاربران به راحتی می‌توانند، بزرگنمایی صفحه را تغییر دهند.کد ریسپانسیو مربوط به layoutکد ریسپانسیو مربوط به layout

بعد از این مرحله باید کدهای مربوط به Media Query را به سایت خود اضافه کنید.  Media Query ویژگی‌های مربوط به نمایش صفحه در دستگاه‌های مختلف را بررسی می‌کند. در واقع با استفاده از Media Query، نمایش صفحه می‌تواند برای طیف وسیعی از دستگاه‌ها، تنظیم شود. البته این تنظیمات، به گونه‌ای است که تغییری در محتوای صفحه ایجاد نخواهد شد.

تنظیمات کدهای Media Query، کاملا به نوع چیدمان صفحه نمایش وابسته هستند. بنابراین استفاده از یک تکه کد یکسان، برای تمام وبسایت‌ها امکان پذیر نیست. با این حال در ادامه بخشی از کدهای مربوط به تنظیمات تبلت را قرار داده‌ایم. صفحه نمایش تبلت، می‌تواند در دو حالت عمودی و افقی قرار گیرد. بنابراین تنظیمات صفحه نمایش نیز می‌تواند با چرخش تبلت عوض شود. همانطور که مشاهده می‌کنید، کدهای مربوط به تنظیمات صفحه نمایش، در حالت افقی و عمودی قرار داده شده‌اند.کد ریسپانسیو مربوط به Media queryکد ریسپانسیو مربوط به Media query

2. ویدئو و عکس

در این مرحله باید روی تنظیمات پیشرفته‌ای برای عکس و ویدئو متمرکز شوید. این تنظیمات، در اکثر سایت‌های حرفه‌ای استفاده می‌شوند. تکه کد CSS که در ادامه آمده است، موجب می‌شود تا عکس‌های سایت، از عنصر والد خود بزرگتر نباشد. این کار را می‌توان برای اکثر سایت‌ها انجام داد. البته باید به خاطر داشته باشید که Max-Width که در کد قبل آمده است، توسط مرورگرهای قدیمی، تشخیص داده نمی‌شود. به همین دلیل، باید تکه کد زیر در استایل شیت CSS قرار داده شود.

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

همانطور که در کدهای بالا قابل مشاهده است، می‌توان از * – date برای ذخیره‌سازی آدرس عکس جایگزین استفاده کرد. سپس با استفاده از کدهایی که در ادامه آمده‌اند، می‌توان عکس‌های اولیه را با عکس‌های جایگزین، عوض کرد.

بخش دیگری از رسانه‌ها که تاثیر بسیاری در ریسپانسیو بودن سایت دارند، تنظیمات مربوط به ویدئو است. تکنیک‌های ارائه شده در کدهای زیر، می‌تواند ویدئوهای نمایش داده شده در سایت را ریسپانسیو کند.

کدهای HTML

کد ریسپاسیو HTMl مربوط به ویدئوکد ریسپاسیو HTMl مربوط به ویدئو

کدهای CSS

کد ریسپاسیو CSS مربوط به ویدئوکد ریسپاسیو CSS مربوط به ویدئو

وقتی کدهای مربوطه را در سایت خود قرار دادید، ویدئوها به حالت ریسپانسیو نمایش داده خواهد شد.

3. تایپوگرافی (Typography)

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

بخش جدیدی در CSS3 با نام rems وجود دارد. وقتی rems در کدهای html استفاده می‌شوند، کارایی آن‌ها بسیار افزایش می‌یابد. قبل از قرارگیری کدها در سایت، باید سایز فونت متن در مرورگر، به مقیاس 100% تبدیل شود. تکه کد پایین این کار را برای شما انجام خواهد داد.کد html مربوط به تغییر سایز فونت مرورگرکد html مربوط به تغییر سایز فونت مرورگر

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

جمع بندی

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

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

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