بازاریابی محتوافیلم های بازاریابی و فروشاینفوگرافیک بازاریابیبازاریابی موبایل و تبلت

طراحی پاسخگو چیست؟ (توضیح دهنده ویدیو و اینفوگرافیک)

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

طراحی پاسخگو چیست؟

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

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

طراحی ریسپانسیو برای طراحان وب نیز بهینه است، زیرا نیازی به ایجاد تجربیات مستقل و منحصر به فرد بر اساس دستگاه یا نمای پورت ندارند. طراحی وب ریسپانسیو را می توان با استفاده از آن انجام داد CSS.

طراحی پاسخگو CSS Viewport Queries

در اینجا مثالی از یک شیوه نامه است که اندازه فونت را بر اساس viewport با استفاده از یک درخواست رسانه تنظیم می کند:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

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

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

Lucinda Duncalfe ، مدیر عامل شرکت Monetate

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

اینفوگرافیک طراحی وب پاسخگو

آیا سایت شما ریسپانسیو است؟

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

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

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

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

Douglas Karr

Douglas Karr CMO از است OpenINSIGHTS و بنیانگذار Martech Zone. داگلاس به ده‌ها استارت‌آپ موفق MarTech کمک کرده است، به بررسی دقیق بیش از 5 میلیارد دلار در خرید و سرمایه‌گذاری Martech کمک کرده است، و همچنان به شرکت‌ها در پیاده‌سازی و خودکارسازی استراتژی‌های فروش و بازاریابی کمک می‌کند. داگلاس یک متخصص و سخنران تحول دیجیتال و MarTech است. داگلاس همچنین نویسنده کتاب راهنمای Dummie و کتاب رهبری تجاری است.

مقالات مرتبط

بازگشت به دکمه بالا
نزدیک

Adblock شناسایی شد

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