Приемы поведения верстки, которые важно знать каждому дизайнеру.

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

Многие знают про про колоночную и блочную верстку — вспомогательные инструменты, которые помогают нам определить как могут располагаться информационные блоки. Об этом есть довольно много материалов. А вот о том как они будут себя вести при изменении ширины рассказывают мало. Исправим это.

Приемы поведения верстки

Рассмотрим три приема поведения элементов в верстке:

• Фиксированность
• Резиновость
• Адаптивность

Я попробую разобраться, как эти приемы работают, чтобы вы могли их применять в своей работе более осознанно. Я даже нарисовала анимированные примеры, чтобы было еще проще. Надеюсь, это была хорошая идея. Как обычно, буду рада обратной связи по статье (особенно приятно получать ее от незнакомых людей).

Все три приема могут применяться на одной странице сайта одновременно. При этом один прием может заменяться другим при достижении той ширины экрана, на которой прошлый прием уже не работает. Например, если на сайте есть фиксированное вертикальное меню, то оно может в какой-то момент пропасть или замениться на что-то другое.

Фиксированность (Fixed-width layout)

Это прием верстки, при котором контент имеет одинаковую ширину независимо от ширины экрана.

Фиксированная верстка довольно удобна по нескольким причинам:

• Проста для дизайнера. Дизайнеру не нужно задумываться о том, как будет выглядеть элемент на определенной ширине экрана, вместится ли текст, поместится ли изображение.
• Проста для разработчика. Все элементы имеют точную ширину, которую можно увидеть в макете. Что видишь в макете, то и переносишь в код.
• Экономит время. Проверка соответствия дизайна такого сайта не займет много времени. Не нужно проверять на разных ширинах экрана, правильно ли все выглядит.

Откроем сайт Кинопоиска:

Проверим, как страница выглядит на ширине 1680px: весь контент располагается посередине и рассчитан на ширину 1280px. На ширине 1680px сайт выглядит так же, как и на ширине 1280px, а свободное пространство по бокам занимает серая заливка фона. На ширине 1280px мы видим примерно ту же картину, только без серого фона по краям, для него уже не осталось места. Таким образом, при верстке страницы был применен прием «фиксированности», иными словами, контент имеет фиксированную ширину, он не реагирует на изменение среды.

Теперь посмотрим на сайт Медиума:

Здесь мы можем увидеть, как работают два приема одновременно, но сейчас обратим внимание на правый блок. Он зафиксирован по ширине и не меняет ее ни на 1920px, ни на 1440px, ни на 1032px.

А что произойдет, если сжимать контент еще больше?

Каждый проект решает это по-своему. Например, на сайте Кинопоиска есть минимальная ширина контента в 1032px, и если вы будете сужать окно еще больше, то контент будет обрезаться. Почему? Потому что сайт Кинопоиска имеет отдельную версию для мобильных устройств, и такие сайты «знают», с какого устройства вы заходите и открывают подходящую версию.

На сайте Medium все иначе: после ширины в 904px происходит точка перелома, и сайт адаптируется под новые условия — правый блок просто исчезает

Резиновость (Liquid layout)

Это такой прием в верстке, при котором контент в блоке подстраивается под его ширину. В таком случае, ширина блоков задается не в точных единицах (пикселях, сантиметрах и т.п.), а в относительных — в процентах.

Прием «резиновости» очень часто используется и хорошо реализуется в Figma. Правильно настроив автолэйаут в ваших макетах, они будут подстраиваться под ширину, которую вы захотите им задать.

На сайте всем известной компании мы видим как используется прием «резиновости», блоки просто стали более узкими. В процентном отношении все осталось как было — блоки занимают 50% ширины.

Если вы хотите использовать «резиновость» на вашем сайте, обязательно предусмотрите как резиновый элемент будет вести себя на максимальной и минимальной ширине. Частая ошибка начинающих дизайнеров — забыть продумать этот момент. Например, контент может не влезть в одну строку, а дизайн такого сценария не предусматривает. В таком случае его предусмотрит разработчик, разумеется, на свое усмотрение.

Кстати, здесь стоит упомянуть еще один важный аспект и рассказать про пограничные состояния, их еще называют edge кейсы. Это понятие (как и многие другие) пришло от разработчиков. При разработке компьютерных программ, инженеры рассматривают задачу с широкой перспективы — среднестатистический сценарий, который, как и в дизайне макетов, использует среднестатистические данные. Затем они переходят к рассмотрению “edge cases” — граничных условий, которые вероятно, не возникнут, но если разработчики не учтут их возможность, программа может работать некорректно.

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

Адаптивность (Adaptive layout)

Это прием верстки, когда блоки меняют свои свойства (размер шрифта, отступы, позиционирование и тп) в зависимости от размера экрана. Например, блоки, выстроенные горизонтально, становятся друг под друга, заголовки уменьшаются, иллюстрации сжимаются, а иногда и вовсе пропадают.

Если сильно сжать сайт Кинопоиска, то сайт резко перестраивается, потому что на 1280px заложена точка слома (про точки слома тоже можно почитать подробнее в предыдущем материале). При переходе на новую точку слома, контент становится уже, боковое меню превращается в бургер рядом с логотипом, а контентная область теперь занимает 1032px. Таким образом сайт «адаптировался» под новые условия.

Особенности адаптивной верстки

• Дизайнеру нужно подумать о том как будет вести себя сайт на том или ином разрешении, понять где будет происходить изменение. Если сайт многостраничный то этому правилу нужно будет следовать и далее.
• Разработчику нужно не просто смотреть на макеты, но и думать о дополнительных вводных, таких например как те же точки слома.
• Очень важна коммуникация. Всего не предусмотришь, все состояния продумывать очень долго. Поэтому решающим фактором здесь будет качественное общение дизайнера и разработчика.

Комбинирование приемов верстки

Тут наверное некоторые могут задаться вопросом: а что если прием работает только на некоторых разрешениях? Могу я сначала сделать блок статичным, а потом изменить его поведения — сделать его резиновым. Конечно можно!

На точке слома (о них есть отдельная статья) можно менять условия игры. Резиновый блок может стать фиксированным, фиксированное меню может превратиться в бургер.

Подводя итоги

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