طراحی پاسخگو چیست؟ (توضیح دهنده ویدیو و اینفوگرافیک)
یک دهه طول کشیده است طراحی وب پاسخگو (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 که شبیه نماد موبایل و تبلت است کلیک کنید. شما می توانید برخی از دستگاه های استاندارد را انتخاب کنید و حتی تغییر دهید که آیا می خواهید صفحه را به صورت افقی یا عمودی مشاهده کنید.
می توانید از گزینه های ناوبری بالا استفاده کنید تا نمای را از حالت افقی به حالت عمودی تغییر دهید ، یا حتی تعداد متفاوتی از اندازه برنامه نمای برنامه را از قبل برنامه ریزی کنید. ممکن است مجبور شوید صفحه را دوباره بارگیری کنید ، اما برای تأیید تنظیمات پاسخگو شما و اطمینان از اینکه سایت شما در همه دستگاه ها عالی به نظر می رسد ، جالبترین ابزار در جهان است!