Приветствую коллег дизайнеров, я веб-разработчик с полным стеком и хочу дополнить Вашу неплохую статью:
Начну с того, что можно одновременно использовать все три типа адаптации, на это ограничений нет.
- Адаптивную верстку чаще используют для того, когда на разных устройствах требуется разная HTML разметка. Или, если совсем просто, элементы расположены слишком по-разному и изменить их через CSS не представляется возможным. Либо, если на мобильных устройствах нет каких либо картинок / тяжелых видео, для них создают отдельную версию, чтобы не загружать ненужные элементы
- В отзывчивой верстке, хочется дополнить, как именно она работает для верстальщиков: Весь сайт разделён на блоки, которые мы позиционируем между собой. Например, выстраиваем в ряд или строим из них сетку. Соседние блоки можно даже поменять местами с помощью CSS, не изменяя при этом вёрстки. Но для этого они должны быть соседними! Когда в макете блок из одной секции при адаптации перемещается в другую, разработчикам приходится прибегать к адаптации - а это лишние временные затраты!
Лично я, прежде чем начать верстать оцениваю макет на предмет, как он должен вести себя на разных устройствах. К сожалению, дизайнеры редко делают дизайн для всех типов устройств. Чаще всего это мониторы шириной 1140 или 1920px и телефоны в 320px. Промежуточных вариантов нет, и приходится додумывать их самому (либо требовать от заказчика и дизайнера дополнительные макеты версий для планшетов).
Брейкпоинты можно расставлять как угодно, но хорошим тоном считается, когда весь сайт одновременно адаптируется наждой контрольной точке ОДНОВРЕМЕННО, и это тоже зависит от дизайна.
Приветствую коллег дизайнеров, я веб-разработчик с полным стеком и хочу дополнить Вашу неплохую статью:
Начну с того, что можно одновременно использовать все три типа адаптации, на это ограничений нет.
- Адаптивную верстку чаще используют для того, когда на разных устройствах требуется разная HTML разметка. Или, если совсем просто, элементы расположены слишком по-разному и изменить их через CSS не представляется возможным. Либо, если на мобильных устройствах нет каких либо картинок / тяжелых видео, для них создают отдельную версию, чтобы не загружать ненужные элементы
- В отзывчивой верстке, хочется дополнить, как именно она работает для верстальщиков:
Весь сайт разделён на блоки, которые мы позиционируем между собой. Например, выстраиваем в ряд или строим из них сетку. Соседние блоки можно даже поменять местами с помощью CSS, не изменяя при этом вёрстки. Но для этого они должны быть соседними! Когда в макете блок из одной секции при адаптации перемещается в другую, разработчикам приходится прибегать к адаптации - а это лишние временные затраты!
Лично я, прежде чем начать верстать оцениваю макет на предмет, как он должен вести себя на разных устройствах.
К сожалению, дизайнеры редко делают дизайн для всех типов устройств. Чаще всего это мониторы шириной 1140 или 1920px и телефоны в 320px. Промежуточных вариантов нет, и приходится додумывать их самому (либо требовать от заказчика и дизайнера дополнительные макеты версий для планшетов).
Брейкпоинты можно расставлять как угодно, но хорошим тоном считается, когда весь сайт одновременно адаптируется наждой контрольной точке ОДНОВРЕМЕННО, и это тоже зависит от дизайна.
Спасибо вам за развёрнутое определение! Очень понятно, пригодится в работе)