Состояние пиксель-перфекта

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

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

Пиксель-перфект - это вёрстка макета с условием, что результат должен абсолютно точно соответствовать макету. Сравните рисунки ниже:

Оригинальный дизайн был сделан в Sketch, а вёрстка просматривается в Google Chrome. Заметили разницу? Вот пара из них:

• Высота шапки.
• Отступ снизу шапки.
• Количество карточек в колонках.

Такие различия могут влиять на конечный результат и могут рассматриваться как несовершенная реализация. Но действительно ли она несовершенна? Я отвечу на этот вопрос далее.

Если мы вернемся на 10 лет назад, это будет время, когда iPhone 4 был только презентован (7 июня 2010 года). Согласно Statista, количество смартфонов, проданных в 2010 году, равнялось 296,65 миллионов. В 2020 году это число выросло до 1,56 миллиардов! В 2010 году это могло быть нормальным, что дизайнер или клиент требовал, чтобы вёрстка была пиксель-перфектом. Количество разных устройств было намного меньше, чем сейчас.

Количество разных размеров экранов было не таким большим. Компьютерного дизайна с разрешением 1024*768 было достаточно. Однако, сегодня это уже не так.

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

Пару лет назад я узнал о термине «Look & Feel» (Видеть и Чувствовать), который в контексте веб-дизайна означает то, как человек видит дизайн с точки зрения UI и как он чувствует его с точки зрения функциональности и интерактивности.

До того как углубиться в примеры, давайте сначала рассмотрим два дизайна. Первый - YouTube. Второй - тоже YouTube, но я постарался сделать так, чтобы он выглядел и чувствовался как Twitter.

YouTube

YouTube в стиле Twitter

Что я изменил:

• Фон шапки и тень.
• Поле поиска.
• Иконки.
• Основной цвет.

Несколько этих небольших изменений могут запутать вас, если вы не очень внимательны. Это я и называю look&feel. Давайте рассмотрим больше примеров.

Посмотрите на разные элементы компонентов дизайна.

Что вы чувствуете, когда смотрите на них? Я заметил вот что:

• Есть жирный нестандартный шрифт.
• Цвета яркие и свежие.
• Почти у всего есть тень. Например, поля, кнопки.
• Все углы закруглены.

Давайте возьмём карточку для примера и посмотрим на хорошую и плохую её реализацию.

Заметили разницу между двумя карточками?

1. Толщина обводки разная.
2. Метка сложности находится слишком близко к левому и верхнему краям.
3. Высота картинки меньше.
4. Размер шрифта отличается (он больше).
5. Отличается border-radius.

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

Сравните следующие две картинки:

Дизайн Вёрстка

Как дизайнер, вы не можете игнорировать различия и я с вами согласен. Вы долго выбирали размер шрифта, отступы, выравнивания. К тому же, всё это можно легко поправить. Однако, причины, по которым разработчик допустил эти ошибки, могут быть разными:

• Дизайн.
• Время.
• Дизайнерский и CSS уровни разработчика.
• Внимание к деталям.

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

Хороший вопрос: как понять хороший ли перед нами результат вёрстки или нет? Это и причина, по которой я говорил о look&feel. Вместо того, чтобы ориентироваться на абсолютное соответствие, можно стараться передать look&feel дизайна.

Давайте снова рассмотрим карточки, но на этот раз различия приемлемы.

Отличия незначительны:

1. Метка сложности меньше.
2. Серая обводка пропала.

Такие детали не очень важны. Важнее то, как дизайн смотрится и чувствуется.

У меня бывают открыты две вкладки. В первой - дизайн, во второй - вёрстка, над которой я работаю.

В тот момент, когда я понимаю, что не могу определить где есть что, я понимаю, что look&feel одинаковый и вёрстка хороша. Возможно, есть какие-то различия, но в целом, вёрстка передаёт внешний вид и чувство дизайна.

В конечном итоге, ширина компонента может зависеть от контейнера, в котором он лежит. Это означает, что компонент, например, карточка, может иметь разные варианты ширины.

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

Но в то же время, компонент должен иметь какие-то ограничения, которые дизайнер объясняет разработчику. Рассмотрим пример:

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

За последние 10 лет CSS очень сильно развился и дал много способов реализации каких-то раскладок. Адаптивный дизайн стал стандартом. И когда вы работаете над адаптивным сайтом, вы не можете больше думать о пиксель-перфекте. В этом нет смысла!

Более логично думать о внешнем виде сайта и о том, как он чувствуется. У вас есть стиль сайта и ваша задача, как разработчика, сохранить его на разных разрешениях. За последний год я написал статью в трёх частях, о том как сверстать шапку сайта.

Смотрите сколько разных вариантов должен реализовать разработчик чтобы сверстать один компонент. В данном случае нет смысла использовать термин «пиксель-перфект».

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

CSS GRID

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

Две строки и мы создали динамичную сетку, которая изменяет свой размер, в зависимости от свободного места.

Viewport-единицы

Размер шрифта, зависимый от ширины окна браузера, был мечтой 10 лет назад. Сейчас это возможно с помощью единиц вьюпорта.

CSS-функции сравнения min(), max(), clamp()

С тех пор, как функции сравнения в CSS стали поддерживаться в основных браузерах, мы можем их использовать, чтобы указать минимальные и максимальные размеры компонента и заставить их плавно менять свой размер.

Пример: изменение border-radius.

Минимальный размер border-radius - 7px, максимум - 20px. Среднее указанное значение (2vw) - это рекомендуемое значение. При изменении размера вьюпорта, значение будет изменяться тоже.

Вышеперечисленные техники - лишь некоторые из нововведений. Следующая картинка показывает изменения за 10 лет:

Мы склонны делать сайты фиксированных размеров, но теперь этого уже недостаточно.

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

На картинке дизайн и вёрстка:

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

Надо прояснить один момент: нет ничего плохого в том, чтобы использовать CSS-библиотеки. Если они вам подходят - отлично. Просто не нужно пропускать такие детали.

Когда дизайнер говорит, что размер шрифта 32px, то тут всё понятно. Некоторые разработчики округляют значение до 30px. Но 32 - это 32. И это непростительно.

Спасибо Håvard за то, что напомнил об этом.

Принимайте решение

Разработчики должны решить как реализовывать компоненты. Посмотрите на следующий пример:

Дизайнер дал кнопку высотой 45px. Как её сделать? Я видел, что многие разработчики делают так:

Использование фиксированного значения неправильно. Вместо этого, мы должны указать вертикальный padding или использовать min-height. Тут дело в подходе, а не в точных значениях. (Текста в кнопке может быть больше и он может переноситься на вторую строку - примечание переводчика.)

И снова, спасибо Håvard за то, что напомнил об этом.

Сохраняйте согласованность размеров и отступов

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

Почему отступы разные? Такие проблемы возникают, когда в дизайне много страниц. Это путает разработчика и заставляет терять лишнее время.

Работайте над состоянием компонентов

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

Но как шапка должна вести себя между этими состояниями? Я написал статью о промежуточных состояниях, рекомендую почитать.

Работайте с реальными данными

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

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

Начинайте общение как можно раньше

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

Тренируйте внимание к деталям

Нельзя научиться за одну ночь замечать мелкие различия в дизайне. Но это не значит, что не нужно тренироваться. Вот пара советов:

• Скопируйте UI популярного сайта (например, Твиттера) и попробуйте сделать это как можно точнее. Попросите дизайнера оценить результат и дать обратную связь.
• Практика - это путь к совершенству. Чем больше вы будете верстать, тем больше вы будете замечать.
• Игра «Can’t Unsee».

Используйте сетки в браузере

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

Обратите внимание на то, что поле поиска не выровнено одинаково с аватаркой. Проблема может быть в лишнем отступе. Что бы там не было, не все замечают такие детали.