بازگشت به بالا

ارسال پیام در واتس اپ

ارسال تیکت پشتیبانی

SabaHost Small Loding

در حال بررسی ...

اطلاعات دامنه

کپی کردن اطلاعات در حافظه

https://saba.host/license
https://saba.host/blog/how-to-make-a-website-responsive

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

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


استفاده از متا تگ Viewport

متا تگ viewport دستورالعمل هایی را در مورد نحوه کنترل ابعاد صفحه به مرورگر می دهد.
هنگامی که متا تگ viewport وجود ندارد، مرورگرهای تلفن همراه، صفحات وب را با تنظیمات پیش فرض دسکتاپ نمایش می دهند.  

 متا تگ Viewport


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

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

Media Query ها بخش مهمی از طراحی وب واکنش گرا هستند که معمولاً برای grid layout ها، اندازه فونت، margin ها و padding هایی که بین صفحات با اندازه های مختلف و جهت های مختلف متفاوت است، استفاده می شود.

در مثال زیر عرض ستون برای دستگاه های کوچکتر 100٪ است، اما در دستگاه های با عرض بزرگتر از 600px پنجاه درصد است.

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


استفاده از Flexbox

شاید برای شما این سوال پیش آمده باشد که Flexbox چه کاری انجام می دهد؟ 

فلکس باکس، ساده ترین راه برای ایجاد مرکزیت عمودی با CSS و یا ایجاد طرح بندی شبکه ای یا grid layout است. فلکس باکس راهکاری مؤثر برای چیدمان، تراز کردن و توزیع فضا بین آیتم های یک container است.

برای استفاده از Flexbox، ابتدا یک conatainer برای  فلکس تعریف می کنیم و استایل display:flex را به آن می دهیم.
در مثال زیر، از ترکیب فلکس باکس با media Query برای ایجاد یک طراحی ریسپانسیو استفاده شده است.
flex-wrap: این ویژگی مشخص می کند که آیتم های موجود در فلکس باکس باید در یک ردیف و یا زیر هم قرار بگیرند.
flex-basis: اندازه آیتم های فلکس باکس را نشان می دهد.
justify-content: هنگامیکه آیتم های فلکس باکس از همه فضای موجود استفاده نکنند؛ این ویژگی محل قرار گرفتن آیتم ها در محور افقی را مشخص می کند.

استفاده از Flexbox

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

استفاده از Flexbox



پیمایش با Overflow Scroll

ویژگی overflow:scroll مشخص می کند که در صورت سرریز محتوا، یک نوار پیمایش یا اسکرول برای مشاهده بقیه محتوا اضافه گردد.
از کاربردهای متداول استفاده از این تکنیک، می توان به منوها و جداول قابل پیمایش اشاره نمود.
overflow-x: مشخص می کند که با لبه های چپ و راست محتوا چه باید کرد. در صورت نیاز اسکرول افقی ایجاد می کند.
overflow-y: مشخص می کند که با لبه های بالا و پایین محتوا چه باید کرد. در صورت نیاز اسکرول عمودی ایجاد می کند.

پیمایش با Overflow Scroll


تصاویر ریسپانسیو

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

تصاویر ریسپانسیو

در مثال بالا 
max-width: به تصویر اجازه می دهد تا اندازه خود را بر اساس عرض container تنظیم کند.
ترکیب تگ های picture, source, img: با استفاده از ترکیب این برچسب ها، در واقع فقط یک تصویر را ارائه می دهیم و بهترین و مناسب ترین تصویر بر اساس دستگاه کاربر را بارگذاری می کنیم.
source: برای ارجاع به یک تصویر WebP استفاده می شود که می تواند توسط مرورگرهایی که از آن پشتیبانی می کند، مورد استفاده قرار بگیرد.
برچسب source دوم به یک فایل PNG از همان تصویر برای مرورگرهایی که از  WebP پشتیبانی نمی کند، اشاره می نماید. WebP یک فرمت با قابلیت فشرده سازی پیشرفته برای تصاویر مبتنی بر وب است.
srcset: بسته به وضوح صفحه نمایش دستگاه خاص، به مرورگر اطلاع می دهد که کدام تصویر باید نمایش داده شود.
loading = lazy: پیاده سازی لود تنبل یا lazy loading را انجام می دهد.


ویدئوهای ریسپانسیو

یک استراتژی کلیدی برای ایجاد تصاویرریسپانسیو، ویدئوها، iframe ها و سایر عناصر استفاده از aspect-ratio است. aspect-ratio یک تکنیک جدید نیست و یک ابزار مفید برای برنامه نویسان وب است.

ویدئوهای ریسپانسیو


استفاده از قالب های از پیش طراحی شده

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

 استفاده از فریم ورک های رایج

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

 

  • فریم ورک Bootstrap

Bootstrap محبوب ترین فریم ورک HTML ، CSS و JS برای توسعه پروژه های ریسپانسیو در وب است. بوت استرپ برنامه نویسی فرانت-اند را سریعتر و آسانتر می کند. Bootstrap مجموعه گسترده ای از اسناد، مثالها و نسخه های نمایشی را برای شروع و آموزش سریع فراهم ساخته است. جدیدترین نسخه بوت استرپ، Bootstrap5 است.


  • فریم ورک Tailwind CSS

Tailwind یک روش مدرن مبتنی بر ابزار را برای ایجاد سایت های واکنش گرا ارائه می دهد. این فریم ورک دارای تعداد زیادی کلاسهای کاربردی است که به شما امکان می دهد وب سایت های مدرن را بدون نوشتن CSS بسازید.
در صورت استفاده از این فریم ورک میبایست اندازه فایل CSS نهایی را کاهش دهید، در غیر اینصورت یک فایل CSS بزرگ به دست خواهید آورد.


  • فریم ورک UIkit

UIkit یک فریم ورک سبک و ماژولار برای توسعه سریع و قدرتمند رابط های وب است. UIkit مجموعه ای جامع از اجزایHTML ، CSS و JS را در اختیار شما قرار می دهد که استفاده از آن آسان و با قابل سفارشی سازی و توسعه است.


  • فریم ورک Semantic UI

Semantic UI یک فریم ورک پیشرفته CSS است که بیش از 50 المانUI  و بیش از 300 متغیر CSS را برای سفارشی سازی ارائه می دهد و با مقادیر EM برای طراحی واکنش گرا ساخته شده است؛ همچنین براساس flexbox است.
Semantic یک فریم ورک CSS آماده است و با فریم ورک هایی مانندReact ، Angular، Meteor و Ember سازگار است. به این معنی که می توانید آن را با هر یک از این فریم ورک ها ادغام کرده و لایه UI خود را در کنار منطق برنامه خود سازماندهی کنید.


  • فریم ورک Materialize

Materialize یک فریم ورک ریسپانسیو مدرن است که بر اساس Material Design طراحی شده است. متریال دیزاین توسط گوگل ارائه شده است و یک روند طراحی محبوب است که شامل کارت، سایه و انیمیشن می شود. 


  • فریم ورک Material Design Lite Framework (MDL)

Material Design Lite Framework ارائه شده توسط Google یکی از محبوب ترین فریم ورک های CSS برای افزودن ظاهر و طراحی متریال به وب سایت های شما است.
این فریم ورک متکی بر به هیچ کدام از فریم ورک های جاوا اسکریپت نیست؛ اما برای استفاده در دستگاه های مختلف سازگاراست و برای مرورگرهای قدیمی یک درجه پایین تر را ایجاد می کند.


  •   فریم ورک Skeleton

اگر در حال انجام پروژه کوچکی هستید و احساس نمی کنید به تمام ابزارهای فریمورک های بزرگتر نیاز دارید، می توانید از Skeleton استفاده کنید. Skeleton فقط تعداد انگشت شماری از عناصر استاندارد HTML را در بر می گیرد و شامل grid، 12 ستونی است.


از فریم ورک های رایج دیگر می توان به موارد زیر اشاره کرد:

  • Bulma
  • Pure CSS
  • Milligram
  • Spectre.css


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

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


شبیه سازی موبایل با Chrome DevTools

Chrome DevTools شبیه سازی تلفن همراه را با طیف وسیعی از تبلت ها و دستگاه های تلفن همراه ارائه می دهد. همچنین با گزینه "responsive" امکان تعیین اندازه صفحه نمایش را برای شما فراهم می سازد.

از ابزارهای رایج دیگر برای تست ریسپانسیو سازی سایت می توان به موارد زیر اشاره کرد:

  • Responsinator
  • Screenfly
  • Ghostlab
  • CrossBrowserTesting

راهکار صباهاست

هاست وردپرس صباهاست با استفاده از منابع قوی تر همچون RAM بالا و CPU قدرتمند، همچنین هارد NVMe که سرعت بالایی دارد و برای میزبانی مناسب است؛ باعث افزایش کارایی و سرعت وب سایت های وردپرسی می گردد.
هاست وردپرس برای وب سایت های وردپرسی و همچنین فروشگاه های اینترنتی که با فروشگاه ساز ووکامرس طراحی شده اند، انتخاب بسیار مناسبی است و باعث افزایش سرعت تا 5 برابر می گردد.
 

 

جمع بندی

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

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



پرسش ها و پاسخ های متداول

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

فریم ورک های رایج برای طراحی ui به صورت ریسپانسیو در ری اکت کدام هستند؟

Material UI ، Semantic UI ، Ant Design و React Bootstrap نمونه هایی از فریم ورک ها وکتابخانه های رایج برای طراحی ui در ری اکت هستند.

مطالب مرتبط

سیستم مدیریت محتوا چیست؟
صباهاست

کاربر: صباهاست

12856

سیستم مدیریت محتوا چیست؟

CMS چیست؟ این واژه مخفف عبارت Content Management System و به معنی یک سیستم مدیرت محتوا است. این نرم افزار برای مدیریت تولید و اصلاح محتوای دیجیتال استفاده می شو...

ابزارهای طراحی سایت در سال 2021
صباهاست

کاربر: صباهاست

12856

ابزارهای طراحی سایت در سال 2021

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

MySql چیست و چه کاربردهایی دارد؟
صباهاست

کاربر: صباهاست

12856

MySql چیست و چه کاربردهایی دارد؟

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

hellobar جایگزینی برای پاپ‌آپ
صباهاست

کاربر: صباهاست

12856

hellobar جایگزینی برای پاپ‌آپ

hello bar چیست؟Hellobarیکی از خدماتی است که در قالب وبسایت عرضه میشود. از طریق این سرویس قادر خواهیم بود تا پیامهای مورد نظر خود را برای بازدیدکنندگان مدیریت و...

الگوریتم MUM گوگل چطور کار می کند؟
صباهاست

کاربر: صباهاست

12856

الگوریتم MUM گوگل چطور کار می کند؟

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

فایل زیلا چیست؟ و چه کاربردی دارد؟
صباهاست

کاربر: صباهاست

12856

فایل زیلا چیست؟ و چه کاربردی دارد؟

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

چگونه رتبه سایت خود را در کوتاه ترین زمان ممکن بهبود دهیم؟
صباهاست

کاربر: صباهاست

12856

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

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

ساخت صفحه سوالات متداول در وردپرس با کمک Yoast SEO
صباهاست

کاربر: صباهاست

12856

ساخت صفحه سوالات متداول در وردپرس با کمک Yoast SEO

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

چطور یک نام مناسب برای دامنه انتخاب کنیم؟
صباهاست

کاربر: صباهاست

12856

چطور یک نام مناسب برای دامنه انتخاب کنیم؟

یکی از کارهای بسیار مهمی که در ابتدای کسب و کار و زمانی که در حال تأسیس وب سایت هستیم، باید انجام شود، انتخاب دامنه وب سایت است.انتخاب دامین همیشه یکی از دغدغه...

تخمین پهنای باند مورد نیاز وب سایت
صباهاست

کاربر: صباهاست

12856

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

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

تأثیر میزان رم و سی پی یو بر سایت
صباهاست

کاربر: صباهاست

12856

تأثیر میزان رم و سی پی یو بر سایت

سرعت وب سایتدر افزایش بازدید از سایت تأثیر بسیار زیادی دارد. سایت هایی کهلود تایم بالایی دارند، معمولاً با آمار بالای شاخص بانس ریت مواجه هستند. عوامل متعددی در...

معرفی برخی ابزارهای مهم چک سئو
صباهاست

کاربر: صباهاست

12856

معرفی برخی ابزارهای مهم چک سئو

استفاده از ابزارهای چک سئو به صورت مداوم و منظم باعث کشف و رفع مشکلات مرتبط با سئوی onpage، offpage و تکنیکال شده و به ما در بهبود وضعیت سئوی سایت و در نهایت کس...

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

کاربر: صباهاست

12856

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

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

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

کاربر: صباهاست

12856

همه چیز درباره کار با سی پنل

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

اصلاح پیوند های شکسته وب سایت
صباهاست

کاربر: صباهاست

12856

اصلاح پیوند های شکسته وب سایت

اگر صاحب یک وب سایت هستید، اصلی ترین الویت شما باید ارائه یک تجربه کاربری یا UX ( User Experience ) عالی به کاربران باشد. متأسفانه لینک های شکسته در سایت ها می...

آموزش ساخت صفحات ارور اختصاصی
صباهاست

کاربر: صباهاست

12856

آموزش ساخت صفحات ارور اختصاصی

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

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

کاربر: صباهاست

12856

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

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

فشرده سازی Gzip چیست؟
صباهاست

کاربر: صباهاست

12856

فشرده سازی Gzip چیست؟

شاید دو ثانیه زمان زیادی به نظر نرسد. با این حال، وقتی نوبت به وبسایت شما می رسد، اتفاقات زیادی در این مدت کوتاه میتواند رخ دهد.به گفته گوگل، افزایش زمان بارگذا...

به روزرسانی نسخه PHP
صباهاست

کاربر: صباهاست

12856

به روزرسانی نسخه PHP

PHP امروزه یکی از محبوب ترین زبان های برنامه نویسی در وب است. بر اساس گزارش W3Techs، بیش از 78٪ از وب سایت ها از PHP به عنوان زبان برنامه نویسی سمت سرور استفاده...

آموزش دریافت درگاه پرداخت اینترنتی برای سایت
صباهاست

کاربر: صباهاست

12856

آموزش دریافت درگاه پرداخت اینترنتی برای سایت

امروزه، افراد زیادی ترجیح می دهند زمان خود را برای خرید به صورت حضوری صرف نکنند و در عوض خرید کالاها یا خدمات را به صورت آنلاین و از خانه خود انجام دهند. این مو...

آموزش صفر تا صد ساخت فروشگاه اینترنتی
صباهاست

کاربر: صباهاست

12856

آموزش صفر تا صد ساخت فروشگاه اینترنتی

برای ساخت سایت فروشگاهی، استفاده از وردپرس یکی از گزینه های مناسب است. در حال حاضر بیش از 40.6٪ از وب سایت ها با استفاده از وردپرس طراحی شده اند. بسیاری از این...

شبکه تحویل محتوا ( CDN )  و کاربردهای آن چیست؟
صباهاست

کاربر: صباهاست

12856

شبکه تحویل محتوا ( CDN ) و کاربردهای آن چیست؟

آیا می دانید cdn یا شبکه توزیع (تحویل) محتوا چیست و چه کاربردی دارد؟ در این مقاله ابتدا به طور مفصل در خصوص چیستی، مزایا، کاربردها و تاثیر cdn بر سئو توضیح خواه...

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

کاربر: صباهاست

12856

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

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