«Респонсив? Это как?» Ликбез по верстке в вебе для дизайнеров

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

«Респонсив? Это как?» Ликбез по верстке в вебе для дизайнеров
3131

Приветствую коллег дизайнеров, я веб-разработчик с полным стеком и хочу дополнить Вашу неплохую статью:

Начну с того, что можно одновременно использовать все три типа адаптации, на это ограничений нет.

- Адаптивную верстку чаще используют для того, когда на разных устройствах требуется разная HTML разметка. Или, если совсем просто, элементы расположены слишком по-разному и изменить их через CSS не представляется возможным. Либо, если на мобильных устройствах нет каких либо картинок / тяжелых видео, для них создают отдельную версию, чтобы не загружать ненужные элементы

- В отзывчивой верстке, хочется дополнить, как именно она работает для верстальщиков:
Весь сайт разделён на блоки, которые мы позиционируем между собой. Например, выстраиваем в ряд или строим из них сетку. Соседние блоки можно даже поменять местами с помощью CSS, не изменяя при этом вёрстки. Но для этого они должны быть соседними! Когда в макете блок из одной секции при адаптации перемещается в другую, разработчикам приходится прибегать к адаптации - а это лишние временные затраты!

Лично я, прежде чем начать верстать оцениваю макет на предмет, как он должен вести себя на разных устройствах.
К сожалению, дизайнеры редко делают дизайн для всех типов устройств. Чаще всего это мониторы шириной 1140 или 1920px и телефоны в 320px. Промежуточных вариантов нет, и приходится додумывать их самому (либо требовать от заказчика и дизайнера дополнительные макеты версий для планшетов).

Брейкпоинты можно расставлять как угодно, но хорошим тоном считается, когда весь сайт одновременно адаптируется наждой контрольной точке ОДНОВРЕМЕННО, и это тоже зависит от дизайна.

3

Спасибо вам за развёрнутое определение! Очень понятно, пригодится в работе)