Адаптивный Дизайн Сайта (Особенности Создания) 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

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