طراحی وب سایت پاسخگو: مبانی برای مبتدیان

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

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

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

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

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

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

آیا فقط در مورد اندازه صفحه نمایش های مختلف ؟

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

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

اتان Marcotte-پدر طراحی وب پاسخگو

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

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

سه پایه مواد اولیه طراحی وب پاسخگو

با استفاده از CSS رسانه نمایش داده شد برای سفارشی کردن شیک

در گذشته ، طراحان وب وابسته به "کاربر عامل خرناس" به صورت پویا در خدمت مختلف HTML/کد CSS و یا تکیه بر آدرس تغییر مسیر. CSS3 معرفی یک تکنیک جدید به نام "پرس و جو رسانه ها".

با استفاده از این @media قانون ، شما می توانید یک بلوک خاص از خواص CSS پس از تایید برای یک شرایط خاص شامل. شما می توانید شرایط زیر را بررسی کنید:

• عرض/ارتفاع نمایشگر
• عرض دستگاه/ارتفاع
• جهت (پرتره/چشم انداز)
• وضوح

شما می توانید شرایط را بررسی کنید و از نمایش داده های رسانه برای ارائه بلوک های شیک خاص ، با توجه به نوع دستگاه.

نحو برای پرس و جو رسانه


@media not|only mediatype and (expressions) {
CSS-Code;
}


مثال پرس و جو رسانه

هستند بسیاری از نمونه ها و دستی "سعی کنید آن را به خودتان" ویرایشگر ، در دسترس در وب سایت W3Schools وجود دارد.

در مثال زیر ، @media query برای بررسی اینکه آیا عرض نمایشگر 375px یا بیشتر است ، استفاده می شود. اگر بیش از 375px باشد ، منو در بالای محتوا نمایش داده می شود و اگر کمتر از 375px باشد ، منو به سمت چپ شناور می شود.

@media screen and (min-width: 375px) {
#leftsidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}

 

طرح بندی مبتنی بر شبکه سیال

اصطلاح "شبکه مایع" توصیف طرح که در آن به جای استفاده از مقادیر ثابت پیکسل ، شما همه آنها را در نسبت نسبی عناصر دیگر کد. در نتیجه ، جریان اجزاء (سیالیت) و انطباق با دستگاه.

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

روش شبکه مایع استفاده می کند از "نسبت نسبی ،" یعنی ، شما می توانید ارتفاع و عرض هر عنصر به عنوان یک درصد و یا اندازه نسبی کد. در مثال زیر ، اجزای سازنده با استفاده از "درصد" رویکرد:

تصاویر سیالات

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

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

CSS حفظ نسبت ابعاد ، و در نتیجه تصویر خود را نگاه خواهد کرد کشیده نشده است.

اولین طراحی موبایل

استفاده از تلفن همراه در ۲۰۱۷ استفاده از دسکتاپ پیشی گرفته است. همانطور که از امروز ، statcounter نشان می دهد که کاربران ۵۰/۸۷ ٪ از تلفن همراه به عنوان در برابر ۴۴/۷۸ ٪ از دسکتاپ فهرست.

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

"Mobile first" یک روش طراحی است که نشان می دهد که شما شروع به طراحی وب سایت برای نگاه کردن به بهترین برای تلفن همراه (به دلیل آن است که بسیاری از محدودیت) ، سپس به قرص و در نهایت رومیزی گسترش.

تست طراحی خود را – شبیه سازی و مطالعه

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

ابزارهای توسعه دهنده فایرفاکس – حالت طراحی واکنشگرا

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

Chrome DevTools – حالت دستگاه

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

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

اگر شما نیاز به کمک با طراحی وب پاسخگو دارید ، DayDigital می تواند به شما کمک کند! ما کمک کرده اند چندین کسب و کار ساخت وب سایت های خیره کننده و علامت حضور خود را آنلاین. تماس با ما در حال حاضر برای مشاوره رایگان!