Адаптивный Дизайн Сайта (Особенности Создания)

Что такое адаптивный web-дизайн для сайта? Почему так важно обеспечить оптимальное отображение сайта на каждом из гаджетов с любым расширением экрана?

В видео мы расскажем, как сделать адаптивный дизайн для сайта.
Здесь мы разберем вопросы по созданию оптимального отображения сайтов и сервисов на устройствах разного размера. На примере популярной платформы Bootstrap (фреймворк) пройдем этапы по работе с шириной экранов и шириной макетов. Рассмотрим оптимальные размеры экрана, в результате чего адаптивный web-дизайн будет сделать в рамках удобства пользователя.
Расскажем о двух вариантах подхода к созданию адаптивного сайта, а именно: по фазам (статичный дизайн разных размеров) и “резиновом” (подгонка с верстальщиком, размеры в em, расчет процентов). Какие происходят изменения при сжатии формата и почему не нужно делать большие версии даже на мониторах?

Вы узнаете подробности о мобильной версии и о том, как сделать адаптивный веб-дизайн в указанном случае. Это часто вызывает сложности, но вы научитесь их избегать.

Следуя рекомендациям из видео, Вы сможете без проблем создавать адаптивный web-дизайн. Включайте прямо сейчас!

0:33 - Определение размеров экранов при помощи Bootstrap
3:08 - Подходы к созданию адаптивного сайта
5:57 - Выводы

Двухмесячный курс с обратной связью и трудоустройством -

[natalikristal]

очень хорошо и даже наглядно объяснили розницу между адаптивным дизайном и " резиной! спасибо!

[qhfryow]

Очень интересный и полезный урок. Узнал для себя много нового. Жду продолжения урока по адаптивному дизайну в figma.

[kxpqnne]

Очень интересно, спасибо что посоветовал Figma в предыдущих уроках. Хотелось бы обзор даной проги.

[Alena-Kutuzova]

Почему вы говорите, что планшетной версией 720 можно пренебречь и просто вместо нее использовать мобильную версию 375. А вот 1140 почему то пренебречь нельзя и использовать вместо нее 960? Там разница всего 180px, это по всего по 90px отступ по сторонам. А для больших экранов вообще не надо делать, и огромные "уши" по бокам уже вроде как не мешают ) В чем логика?

[sokyvcr]

Где
Можно посмотреть урок по самому адаптиву в фигме?

[_Fantom_.]

Так в принципе достаточно и статичного дизайна сайта?

[izvarzone]

Кстать меня одна вещь напрягает в адаптивном дизайне. Когда открываешь firebug, то врубается адаптивная версия на большинстве сайтот (если файрбаг в режиме "docked" а не "float")

[natalitarasova]

С шириной все понятно. А вот у меня вопрос как быть с высотой? Я нигде не могу найти информации о высоте экрана ? ведь нужно что б контент нормально смотрелся все важные элементы помещались на главном экране. Подскажите кто знает ?)) вот меня интересует планшетная версия . ширина 960, а высота одного экрана ?)

[MrTymchuk]

А ширина то 1170px сетки. Не верно указано у видео.

[ivanmosiichuk]

Привет, Максим. Очень интересует один вопрос. Казалось бы, должно быть понятно, но уже несколько дней не могу сам до конца разобраться и вот решил спросить:
Понимаю, что когда речь идет о дизайне мобильних приложений на телефоны, планшеты и тд, мы используем систему едениц измерения в логических пикселях. В XD, Figma і тп. все изначально заточено под логичиские ( условные пиксели) и это логично. Скорее всего что такое ( типо с умножением 1х или 2х ) есть и для дизайна сайтов. Но, лонг стори шорт, когда речь идет, к примеру, о бутстрапе, где ширина рабочей (контентной) области составлет ( или составляла раньше) 1140 px, то о каких пиеселях ми говорим? Физических или условных? Ведь если делать в Фотошопе, то ми навернека используем физичиские. А потом просто експортируем два макета в 1х и 2х ?
Большое спасибо!

[dvqtsie]

размер сеток изменился в 4 версии? тыкните где скачать пожалуйста я новичёк)

[EvgeniyKarpov]

что-то слишком рано начали мы отказываться от 320px

[eyeqchj]

Всё-таки: бутстрап, а не бутстреп. Слог-то закрытый :)

[asakaask]

18 год - ЧУВАК!!! Выброси своё видео, инфа давно устарела.
Или как? На тебе Боже что мне негоже?

[hqhshqhhdhwhdwh]

Что ты за хернюснимаешь? какой разрешение экрана...почитай книги.
Там код по дефолту по размеру сопоставлет разрешение.