مردان وردپرس مقاله طراحی صفحه ریسپانسیو یا سایت واکنشگرا چیست ؟

طراحی صفحه ریسپانسیو یا سایت واکنشگرا چیست ؟

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

مزایای سایت های ریسپانسیو:

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

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

قالب را باید برای چه دستگاه هایی طراحی کرد؟

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

Phones: < 768px

Tablets: ≥ 768px

Medium Desktops: ≥ 992px

Large Desktops: ≥ 1200px

چگونه عناصر وب سایت را در دستگاه های مختلف نمایش دهیم؟

برای اینکه بتوانید پهنای عناصر صفحات وب سایت را در دستگاههای مختلف مدیریت کنید باید از Max-width  و Min-width استفاده کنید. به عنوان مثال اگر یک تگ Div با آی دی divId در سورس وب سایت شما وجود دارد، به کمک کد زیر می توانید عرض این تگ را در گوشی های موبایل به گونه ای تنظیم کنید که همواره در وسط صفحه نمایش داده شود و اگر ابعاد گوشی کوچک تر از ۶۰۰ پیکسل باشد، ابعاد این تگ متناسب با ابعاد گوشی تغییر کند:

حال اگر بخواهید این تگ را در تبلت ها در سمت راست نمایش دهید باید یک مدیا کوئری دیگر اضافه کنید و استایل آن را به این صورت تعیین کنید:

 

تاریخ آخرین بروزرسانی : ۱۲ مهر ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

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

Advertising MiSaCo.
یک نظر برای 1

طراحی صفحه ریسپانسیو یا سایت واکنشگرا چیست ؟


  1. ممنون از اموزش خوبتون سایت مفید و پرمحتوایی دارید

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.