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

447 ratings | 12990 views


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

★ Бесплатно учись веб-дизайну – Что такое адаптивный web-дизайн для сайта? Почему так важно обеспечить оптимальное отображение сайта на каждом из гаджетов с любым расширением экрана? В видео мы расскажем, как сделать адаптивный дизайн для сайта. Здесь мы разберем вопросы по созданию оптимального отображения сайтов и сервисов на устройствах разного размера. На примере популярной платформы Bootstrap (фреймворк) пройдем этапы по работе с шириной экранов и шириной макетов. Рассмотрим оптимальные размеры экрана, в результате чего адаптивный web-дизайн будет сделать в рамках удобства пользователя. Расскажем о двух вариантах подхода к созданию адаптивного сайта, а именно: по фазам (статичный дизайн разных размеров) и “резиновом” (подгонка с верстальщиком, размеры в em, расчет процентов). Какие происходят изменения при сжатии формата и почему не нужно делать большие версии даже на мониторах? Вы узнаете подробности о мобильной версии и о том, как сделать адаптивный веб-дизайн в указанном случае. Это часто вызывает сложности, но вы научитесь их избегать. Следуя рекомендациям из видео, Вы сможете без проблем создавать адаптивный web-дизайн. Включайте прямо сейчас! 0:33 - Определение размеров экранов при помощи Bootstrap 3:08 - Подходы к созданию адаптивного сайта 5:57 - Выводы Адаптивный Дизайн Сайта (Особенности Создания) 2018 - Уроки веб-дизайна с нуля для начинающих - Блог о веб-дизайне и интерфейсах – Я Вконтакте – Мой Instagram - Бесплатный курс - Двухмесячный курс с обратной связью и трудоустройством - ВК: Двухмесячный курс с обратной связью и трудоустройством -

Comments to the video: Адаптивный Дизайн Сайта (Особенности Создания) 2018

Ярослав Сергеевич 5 months ago
Сейчас бы приступить учить адаптивность с бутстрапа. Может JS необходимо учить с Angular?
Ярослав Сергеевич 4 months ago
+Fabio Grando до этого чем юзать бутстрап, отлично было бы выучить css, чтоб при помощи незапятнанного css уметь верстать адаптивно. Бутстрап является библиотекой css с готовыми пресетами адаптивности
Fabio Grando 4 months ago
что ты несешь)
Сергей Кондулуков 7 months ago
Очень увлекательный и нужный задание. Узнал для себя немало нового. Жду продолжения урока по адаптивному дизайну в figma.
Сергей Баронов 7 months ago
Да, тоже трудиться начал в Figma/ Поддерживаю!
Юля Атаманчук 8 months ago
Спасибо за полезное видео! А где можно скачать сетки под эти размеры?
reserve 10 months ago
Привет всем проблема таковой: Смотрю CSS код фреймворков всюду rem em - будто работает понятно. Не понятно - будто нарисовать интерфейс для верстки и вот отчего: в Sketch, PS можно задать значения лишь в px Когда положим 1rem = 16px; font-size: 2rem (32px) все отлично, однако когда padding: 1.3rem (20.8px) - в браузере работает пять, а в редакторе выходит необходимо мастерить отступ в 21px, тоесть округлять ? И если округлять - то макет приложения будет отличатся от того, какой будет сверстан поэтому будто 20,8px это не 21px
reserve 11 months ago
Имхо, ну-ка с тем, чтоб не мастерить больше чем 1140px вызывает вопросы, к примеру при проектировании веб-магазинов частая неувязка на страничке категории в ширине , когда слева кушать фильтры продуктов (мало-мало 200-250px) а справа grid продуктов. Для обычного отображения изображение продукта надлежит быть мало-мало 200*200 (и этого будто вечно не достаточно) , итого 1140 - 200(фильтры) = 940px / 4 = 200px + отступы. Так вот я о чем здесь и резонее сделать еще одинешенек media query, либо расширить этот для того чтоб 5 - 6 продуктов нормально в линия помещалось. И таких примеров приложений может быть несколько, не лишь ИМ.
N Shop 11 months ago
если мастерить моб версию 375 то на неких тел будет скролл горизонтальный. Оптимально 320 пкс бросить.
Мr. Tymchuk 11 months ago
А ширина то 1170px сетки. Не правильно обозначено у видео.
Школа веб-дизайна Максима Солдаткина 11 months ago
У нас видео о том будто мастерить макет и его дизайн, а не будто верстать. Твои 1170 не делятся на 12 колонок без остатка и новеньким будет трудно высчитать сетку под эту ширину. Не путай новичков изволь заявлениями «в видео ошибочно». Всё там правильно.
Мr. Tymchuk 11 months ago
Если экран больше за 1200px, то контейнер под контент в бутстрап имеет ширину 1170px, однако при использовании снутри контейнера колонок ( сетка бутстрап 12 колонок), то ширину из за отступов в колонках станет меньше на 30px, из за мерджинов в колонках и будет контейнер тогда 1140px, однако если колонки пристроить в div с классом row, то контейнер остается 1170px, этак будто row добавляет по -15px (30px) и контейнер опять 1170px. (Верстаю уже 2 год)
Школа веб-дизайна Максима Солдаткина 11 months ago
Поясни подробнее
Людмила Журавская 11 months ago
Очень любопытно, благодарю что порекомендовал Figma в прошлых уроках. Хотелось бы обозрение даной проги.
Сергей Баронов 7 months ago
Поддерживаю, больше видео по Figma!
Igor Yarchuk 10 months ago
Школа веб-дизайна Максима Солдаткина 11 months ago
Принято :)
Evgeniy Sagayduk 11 months ago
что-то очень спозаранку начали мы отрешаться от 320px
Tony Arty 4 months ago
Ну тогда уж 260 )) А внезапно?
Сергей Баронов 7 months ago
Тоже направил внимание на это, тк я лишь начинаю, скачал шаблоны сеток bootstrap 4 под Figma и там заключительный самый небольшой макет - 320px
Андрей Малышев 9 months ago
Ну, в Москве может и мамонт, а вот в Замкадье он в магазинах продаётся))
Александр Старков 9 months ago
4 S мамонт, какой я лицезрел раза 2 за год у людей.
Андрей Малышев 11 months ago
А вот уместно и конечно. Даже если хватать яблочников, то многие ещё прогуливаются с 4s, конечно и SE полностью для себя продаётся.
Кирилл Власов 11 months ago
размер сеток поменялся в 4 версии? тыкните где скачать изволь я новичёк)
Школа веб-дизайна Максима Солдаткина 11 months ago
У нас видео о том будто мастерить макет и его дизайн, а не будто верстать. Твои 1170 не делятся на 12 колонок без остатка и новеньким будет трудно высчитать сетку под эту ширину. Не путай новичков изволь заявлениями «в видео ошибочно». Всё там правильно.
Мr. Tymchuk 11 months ago
У видео не верные размеры. Он учел что сетка 1140 из за отстутов, однако если у row блоки то 1170
Grey Skraylet 11 months ago
На веб-сайте bootstrap. Смотри на оранжевые числа: responsive-breakpoints