19 декабря 2016

Разрушаем шесть мифов о веб-лейаутах

Бросьте вызов собственным стереотипам, вырвитесь из плена старых привычек и узнайте, что реально сверстать в современном вебе

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

За многие годы они стали гораздо чище, но то, чем мы сейчас занимаемся, по-прежнему попадает в разряд хитрых уловок. Чтобы вручную сверстать макет, вы должны овладеть искусством очистки потока, уметь использовать отрицательные поля для изменения позиционирования элементов и обеспечивать совместимость страницы с браузерами. Это бывает проблематично. Многие из нас махнули рукой и переложили заботы на плечи сторонних фреймворков: Bootstrap, Foundation или кого-то из их многочисленных конкурентов.

С помощью фронтенд-фреймворков свёрстано немало проектов. Благодаря им мы работали эффективнее и реже сталкивались с багами. Но в результате все сайты стали выглядеть одинаково. Везде используется одна и та же симметричная 12-колоночная сетка. Раз за разом мы переживаем один и тот же пользовательский опыт, видим одни и те же формы, проходим одни и те же паттерны. Стало невыносимо скучно.

Новая эра
Есть и хорошие новости. У нас наконец-то появляются реальные инструменты для создания лейаутов. Больше не надо выбирать между сложной ручной версткой и вёрсткой в унылых однообразных фреймворках — мы можем позволить себе творчество. Flexbox («гибкий блок» — более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический), CSS Shapes (CSS Формы), Masks (Маски), Clip-path (Обрезка по контуру), Initial Letter (Инициал), Rotation (Поворот), Multicolumn (Несколько колонок), Viewport Units (Вьюпорт-единицы), Object-fit (Масштабирование контента элемента относительно заданных размеров) и другие инструменты уже открывают нам мир новых возможностей.

Наиболее продвинутый из всех, CSS Grid Layout, — полностью меняет подход к размещению элементов на странице.
Вопрос «Какой фреймворк использовать?» отпадёт сам собой. Фреймворки нам больше не понадобятся. В сущности, с появлением CSS Grid, их использование станет гораздо менее эффективным, чем ручная вёрстка оригинального макета на чистом CSS. Сторонние фреймворки — даже новые разработки на основе Flexbox или Grid — будут только мешать.

Пришло время начинать работу с вопроса: какой лейаут нужен именно этому проекту?

Самой сложной задачей в размещении элементов на странице отныне будет не вёрстка. Самой сложной задачей будет преодоление границ собственного воображения. За последние 10 лет у нас выработались мощные привычки. Мы привыкли подавлять креативные идеи конструкциями типа «в вебе это так не работает» и «так сделать нельзя». Что ж, ситуация изменилась. Границы возможного и невозможного сдвинулись. Пора отказаться от хорошо закреплённых привычек и заблуждений.

layout.land станет пристанью для дизайнеров, экспериментирующих с лейаутами

layout.land станет пристанью для дизайнеров, экспериментирующих с лейаутами

Миф первый: все элементы должны плавать, как мыло в воде
Веб-лейауты на основе флоатов подобны ванне, в которой плавают сотни кусков мыла. Каждый элемент на странице — это кубик, стремящийся всплыть на поверхность. Хэдер — верхний кусок мыла, за ним следуют навигация, hero-баннер, боковая панель, область с контентом. Каждый раз при смене вьюпорта и медиа-запроса куски мыла меняют своё расположение, соревнуясь за место наверху.

Флоаты не допускают пустого пространства. Они провоцируют перегрузку страниц контентом. Они заставляют нас искусственно создавать контент с одинаковой длиной или соотношением сторон.
В основе CSS Grid также лежит сетка из колонок, но модель использования отличается от привычных фреймворков. Одно из самых важных нововведений — ряды. Ряды! С ними мы можем выравнивать объекты по горизонтали и добавлять воздух по вертикали. Ряды позволяют оставлять какие-то области пустыми. Груда контента, сваленная в верхней части страницы — уже не опция по умолчанию.

Контроль за вертикальным пространством позволяет применять решения, наработанные журнальными дизайнерами за целую сотню лет. Я собираю книги по проектированию на основе сеток и дизайну лейаутов. В одной из них я увидела афишу джазового фестиваля в Линкольн-Центре в 2007 году, и мне стало интересно, можно ли сделать нечто подобное в вебе. На рисунке 1 вы видите результат моих стараний.

CSS Grid позволяет свободно размещать объекты по вертикали, не загромождая верхнюю часть страницы

CSS Grid позволяет свободно размещать объекты по вертикали, не загромождая верхнюю часть страницы

Миф второй: прямоугольники, только прямоугольники
По умолчанию любой объект на веб-странице начинает свою жизнь в качестве прямоугольника. Инструменты, которые мы использовали раньше, вполне отражают этот подход: мы ставим одну коробочку поверх другой. Коробочка, ещё коробочка, сверху ещё одна коробочка.

Сегодня у нас есть инструменты, ломающие этот стереотип. Вы можете использовать Clip-path (обре”зки по контуру), Masks (маски) и Gradients (градиенты), чтобы вырезать из прямоугольника другую фигуру. Треугольники, ромбы, трапеции — контент может принимать любую форму. Создайте заголовок на фоне яркого прямоугольника, а снизу диагональной линией отрежьте от него кусок. Сфотографируйте нескольких людей и обрежьте снимки по форме шестиугольников. Почему бы и нет

CSS Shapes позволяют выровнять элемент по одной из сторон и пустить остальной контент обтекать его по форме, не являющейся прямоугольником. Например, задайте свойство float фотографии, обрезанной по кругу с помощью border-radius, и сделайте так, чтобы сопроводительный текст обтекал её по кругу с помощью shape-outside.

Или нарисуйте иллюстрацию со множеством причудливых форм и используйте эту картинку как маску, чтобы в браузере текст обтекал её по форме всех изгибов. На рисунке 2 фото винограда выровнено по левому краю, а текст обтекает его, следуя сложному контуру.

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

Фото выровнено по левому краю, а текст обтекает его по фигурному контуру

Фото выровнено по левому краю, а текст обтекает его по фигурному контуру

Миф третий: мы не можем контролировать границу первого экрана
В веб-пространстве мы не можем знать наверняка, какая часть макета останется на экране, а какая будет скрыта. Какое-то время мы делали вид, что все экраны имеют размер 1024×768 пикселей (или 800×600), но на самом деле мы никогда не контролировали нижнюю границу. И пусть на бесконечных встречах люди настаивали на том, что их фирменная снежинка должна появиться на первом экране — у нас не было возможности определить, где эта граница проходит. До настоящего времени.

С появлением вьюпорт-единиц мы смогли масштабировать или размещать элементы на странице, опираясь на сам вьюпорт.

Если мы хотим оформить элемент таким образом, чтобы он занимал определённую часть экрана, это возможно. Код img {height: 50vh; width: 50vw} сделает так, чтобы изображение занимало ровно половину ширины и половину высоты окна браузера.

Указывать высоту и ширину изображения в прошлом было ужасной идеей. В итоге такая картинка оказывалась растянута или сплющена. Но теперь object-fit: cover говорит браузеру сохранить пропорции и обрезать картинку по размеру конкретной области.

Пример — на рисунке 3. Независимо от размера окна браузера, фото Грейс Хоппер всегда будет занимать половину ширины и всю высоту экрана. Пролистайте страницу вниз, и ровно за границей экрана появится статья. Реализовать этот лейаут мне помогли Viewport Units и Flexbox.

Независимо от размера окна фото всегда будет занимать половину ширины и всю высоту экрана.

Независимо от размера окна фото всегда будет занимать половину ширины и всю высоту экрана.

Миф четвёртый: 12 колонок — лучшее решение
В 2006 году индустрия стала дружно ратовать за использование симметричной 12-колоночной сетки. Мы не хотели стандартизировать сайты, мы хотели упростить расчёты для ручной верстки фиксированных по ширине страниц. 960 пикселей — отличный размер для экрана в 1024px, он позволяет делать колонки шириной 60px с отступами в 20px. Кроме того, 12 колонок позволяют легко делить пространство на две, три и четыре части.

Традиция начинать работу над проектом с шаблона для Visio сделала UX-дизайн более предсказуемым. Стало проще задавать стандарты команде: можно просто ткнуть пальцем в популярный сайт и сказать: «все используют этот инструмент, надо и нам». Нам нужно было упорядочить хаос. Но после 10 лет, в течение которых почти все сайты использовали одну и ту же сетку, веб-дизайн стал невероятно скучным.

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

Адаптивный дизайн сделал нецелесообразным сохранение математических пропорций, основанных на сетке в 960 пикселей. Уже много лет Марк Болтон (Mark Boulton) пропагандирует идею использования нечётного числа колонок, например, девяти или одиннадцати. Он предлагает попробовать сетки с разными колонками, ширина которых изменяется по принципу золотого сечения.

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

Почему? Думаю, объяснение кроется в сложности расчётов для такой технологии как флоаты. Команда студии Mark Boulton Design разработала приложение Gridset, упрощающее реализацию подобных дизайн-решений, Sass-сообщество стало разрабатывать одну библиотеку за другой, чтобы избавить нас от расчётов сложных сеток… Но всё это по-прежнему кажется ненадёжными костылями.

С CSS Grid оригинальные сетки станут обычным делом. Сделать 11 колонок будет ни чуть не сложнее, чем 12. Массив объектов со связанными пропорциями? Пара пустяков! Браузер возьмёт большую часть расчётов на себя, за нами — креатив.

Нет причин придерживаться 12 колонок. Сделайте что-то новое, пусть ваш сайт выглядит свежо. В помощь нам десятилетия практики графического дизайна.

Официальная хронология эволюции веб-лейаутов
Полное отсутствие лейаута > Табличная разметка страниц > Ручная вёрстка с использованием флоатов > Вёрстка с использованием фреймворков > Прекрасное будущее!

Краткая схема эволюции лейаутов. Сейчас мы стоим на пороге новой эры веб-дизайна.

Миф пятый: для вёрстки необходимо использовать фреймворк
На самом деле, новый синтаксис Grid сделает вёрстку на чистом CSS проще вёрстки с применением фреймворков, а апдейт фреймворков со старыми стилями при помощи CSS Grid только усложнит вам жизнь. Избавьтесь от привычки полагаться на фреймворки. Верстайте на чистом CSS.

Миф шестой: мы погрязли в рутине из-за адаптивного веб-дизайна
Не верю! Да, когда-то индустрия не без труда освоила адаптивный веб-дизайн. Неудивительно, что мы полагались на инструменты, которые помогали перезапускать сайты быстро. Но сама идея адаптивного дизайна никак не связана с необходимостью использования полдюжины одинаковых паттернов.

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

Таков вкус новизны, который мы ожидаем от CSS Grid: модуль сможет перестраивать контент так, чтобы тот соответствовал доступному пространству, с помощью свойства grid-auto-flow: dense; Результат вы видите на рисунке 4.

Используйте свойство grid-auto-flow: dense, и браузер перестроит порядок контента в соответствии с пространством

Используйте свойство grid-auto-flow: dense, и браузер перестроит порядок контента в соответствии с пространством

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

  • Дизайн должен быть функциональным.
    Функциональный — можно легко использовать Заказчик (добавлять информацию, баннеры).
    В этом случае, моё личное мнение, легче всего использовать квадраты.

    12 колонок — оптимальный вариант для поддержки и развития сайта.
    Вопрос колонок — прост.
    Корпоративный сайт — простота.
    Уникальность нужна в промосайтах.

    Я изучал ваши кейсы, к примеру, в одном из последних — сайт Росатом вы используете Bootsrap (12 колонок).

    Чем проще — тем лучше.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

17 марта 2016

Как создать сервис для онлайн-мероприятий, которым легко может воспользоваться каждый: редизайн Webinar.ru

21 июня 2016

Что такое digital transformation и почему современному бизнесу нельзя игнорировать этот тренд?

15 ноября 2016

Основные тренды дизайна 2016

30 декабря 2016

Поможет ли ИИ наконец-то найти формулу идеального подарка?

20 мая 2016

Интуиции недостаточно: для успешного дизайна нужны данные

27 августа 2017

Время UX-писателей