چگونه یک وب‌ سایت ریسپانسیو طراحی کنیم؟

فرایند طراحی سایت ریسپانسیو:
1. تنظیم viewport:
با استعمال از تگ در نصیب کاغذ، اندازه برگه را با عرض دستگاه کاربر تهیه فرمائید و زوم اولیه را روی 1.0 قرار دهید.
2. استفاده از Media Queries:
با به کار گیری از Media Queries، استایل‌های متعدد را برای اندازه‌های متعدد ورقه نمایش جاری ساختن فرمایید. این به شما قابلیت میدهد که دکورا سیون، فونت‌ها، تصاویر و سایر موادسازنده را برای هر اندازه ورقه بهینه نمایید.
مثال:
Code

@media (max-width: 768px) {
/* استایل‌های مورد نظر برای صفحات با عرض کمتر از 768 پیکسل */
}
به کار گیری از Flexbox یا Grid:
Flexbox و Grid دو تکنیک کارکشته برای دکورا سیون عنصرها در صفحات وب می باشند. آن ها به شما قابلیت می دهند تا به راحتی موادسازنده را در یک ورقه سازماندهی و تراز کنید.
مثال:
Code

.container {
display: flex; /* یا display: grid; */
flex-direction: row; /* یا column */
}
1. طراحی تصاویر ریسپانسیو:
از تصاویر با فرمت‌های مناسب (مانند JPEG یا PNG) و با اندازه با صرفه به کارگیری نمائید.
از ویژگی srcset در تگ برای ارائه نسخه‌های مختلفی از تصویر با اندازه های مختلف به کار گیری نمائید تا مرورگر بتواند بهترین نسخه را برای شیت نمایش مخاطب گزینش کند.
2. تست ریسپانسیو بودن:
از ابزارهای متعدد برای تست ریسپانسیو بودن وب‌وبسایت خود استعمال فرمائید. مثلا، می‌توانید از ویژگی مطالعه مرورگر، ابزارهای آنلاین مانند Am I Responsive یا افزونه‌هایی مانند WPtouch برای وردپرس.
3. به کار گیری از کاغذ سازها (ازروی اراده):
در صورتی از صفحه سازهایی مانند المنتور استفاده می کنید، می توانید از ویژگی‌های داخلی آن ها برای طراحی ریسپانسیو استعمال کنید.
به عنوان مثال، در المنتور می‌توانید طراحی خود را در موقعیت‌های مختلف دسکتاپ، تبلت و گوشی مشاهده و ویرایش نمایید.
4. رعایت اصول طراحی ریسپانسیو:
از واحدهای نسبی (مانند درصد) به جای واحدهای مطلق (مانند پیکسل) برای انتخاب اندازه ارکان استعمال نمائید تا ارکان در اندازه‌های گوناگون ورقه نمایش به صحت نمایش داده شوند.
از ارکان با عرض ثابت (مانند موادتشکیل دهنده با عرض پیکسل ثابت) خودداری کنید.
از Media Queries برای جاری ساختن استایل‌های مناسب برای هر اندازه ورقه نمایش استعمال کنید.
با رعایت این نکات و استعمال از ابزارها و تکنیک‌های مناسب، میتوانید یک وب‌سایت طراحی نمائید که بر روی اشکال دستگاه‌ها به نه نمایش داده شود