- PVSM.RU - https://www.pvsm.ru -

Что поправить в верстке перед выпуском в продакшн?

Что поправить в верстке перед выпуском в продакшн? - 1

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

Часть 1

Текст

Размер шрифта и интерлиньяж

Оптимальная высота строки (line-height) 1.4 — 1.8 от размера шрифта. Это значение лучше указывать множителями, а не конкретными значениями в пикселях. Так оно будет масштабироваться относительно любого размера шрифта.

Длина строки

Ограничение длины строки помогает легче перепрыгивать глазу со строки на строку. Текст удобно читать, если в него уменьшается минимально 6 слов, а максимально 12. Достаточно использовать min-width и max-width.

Длина строки влияет на интерлиньяж. На телефонах line-height должен быть меньше, чем на большом мониторе. Существует интересный адаптивный подход (css-шлюзы [1]), который плавно подстраивает размер шрифта и интерлиньяж под экран.

Ограничение длинных слов

Текст в строке может оказаться непредвиденно большим, в этом случае его можно ограничить с помощью text-overflow [2].

Что поправить в верстке перед выпуском в продакшн? - 2

Выравнивание по ширине

Многие знают, как плохо выглядит выравнивание по ширине (text-align: justify). Текст становится трудно читать из-за больших отступов между словами. В книгах и газетах нет таких больших пробелов из-за переносов в словах. Чтобы включить такой перенос нужно использовать свойство hypnens, оно автоматически проставляет мягкие переносы в словах. К сожалению, это работает далеко не везде, но можно использовать плагин [3] и словарь к нему [4].

Что поправить в верстке перед выпуском в продакшн? - 3

Типограф

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

  • Это правильные кавычки «», а это компьютерные ""
  • Это тире —, а это дефис -
  • В типографике также принято не разрывать предлог и слово к которому оно относится, даже если предлог оказывается в конце строки. Чтобы сделать правильный перенос, достаточно пробел между словом и предлогом заменить на неразрывный пробел  

Все эти проблемы можно решить с помощью онлайн типографов [5], плагинов и предустановленных расширений [6] на компьютер.

Продвинутые методы работы с типографикой

Обратная связь (наведение, клик, скролл)

Блоки

Удобный интерфейс откликается на каждое действие, будь то наведение мыши или клик. Нестандартному кликабельному элементу нужно не забыть:

  • Добавить привычный курсор руки вместо стрелки (cursor:pointer)
  • Добавить ховер. Хотя бы просто opacity: 0.8
  • Добавить аттрибут role со значениями button или link
  • Убрать случаное выделение текста по двойному клику (user-select: none)
  • Добавить обработчик нажатия на enter
  • Предусмотреть фокуc
  • Предусмотреть спиннер, если состояние элемента зависит от асинхронного события

    Что поправить в верстке перед выпуском в продакшн? - 4

Область клика

Чем больше и ближе объект, тем легче на него кликнуть. Существует даже математическое правило [10], которое это описывает. Например, в поисковой выдаче Google ссылкой является не только номер страницы, но и часть логотипа. Это спасает от случайных промахов.

Что поправить в верстке перед выпуском в продакшн? - 5

Чтобы увеличить область клика, нужно использовать padding вместо margin. Серым показан отступ паддингом.

Что поправить в верстке перед выпуском в продакшн? - 6

Не накладывайте поверх кликабельных элементов другие элементы, например, иконку лупы над инпутом. В крайнем случае добавьте иконке pointer-events или решите это более поддерживаемым способом (в случае с лупой, добавьте её через background-image).

Правильный формат ссылки

Если ссылка является почтовым адресом, укажите в ссылке mailto:. Тогда по клику на неё сразу откроется почтовый клиент. Тоже самое можно сделать для телефона префиксом tel:.

Скролл на айфоне

По умолчанию, горизонтальный скролл в айфоне обрывистый и неуклюжий. Включить привычный скролл с инерцией можно свойством -webkit-overflow-scrolling: touch.

Инпуты

Тег form

Чтобы форма работала в любых браузерах, даже без js, нужно использовать тег form по назначению. Форму можно улучшать очень долго, вплоть до отправки данных даже в офлайне [11].

Типы

Разные значения аттрибута type (email, number, password и другие) включают правильную клавиатуру на телефонах и помогают валидировать данные

Автофокус

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

Изображение

picture и srcset

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

Таблица

Адаптивность

Таблица изначально не предусмотрена под ширину экрана телефона. Есть несколько вариантов, как изменять таблицу под небольшие экраны

  • Уменьшить размер шрифта
  • Обернуть таблицу в блок и сделать ему горизонтальный скролл
  • Перевернуть. Сдулать таблицу вместо короткой и широкой узкой и длинной
  • Заменить таблицу на несколько списков

Сделать таблицу удобной не просто. Советую почитать статьи про отображение больших таблиц [13] и переверстку [14].

Компоненты

Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связанно. Если поставить заголовок посредине нескольких статей, будет сложно разобраться, к какому из текстов относится заголовок. Кстати, на Хабре именно такая ошибка. Заголовок параграфа должен быть ближе к своему параграфу, а не быть равноудален от всех. Существует масса других примеров с ошибкой в теории близости [15].

Что поправить в верстке перед выпуском в продакшн? - 7

Пустой блок

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

.banner:empty {
    display: none;
}

Почти, но не совсем

Верстка (в плане дизайна) приятного сайта не разваливается на ходу. Элементы ровно выровнены, размеры хорошо подобраны. Посмотрите статью «Почти, но не совсем [16]», она поможет взгянуть на любой сайт свежим взглядом.

Часть 2

Маштабируемость

Поддерживаемость

Несколько простых практик:

  • Использовать меньше фиксированных размеров. Это даст возможность легко встроить одни компоненты в другие
  • Использовать inherit и currentColor. Они поддерживаются в любом браузере и позволяют наследовать стили [17]

Что поправить в верстке перед выпуском в продакшн? - 8

  • Не использовать краткого написания свойств [18]. Например, background: red изменяет не один, а сразу 10 стилей, включая background-color, background-size, background-repeat и другие
  • Не использовать много сторонних библиотек и хитрых возможностей препроцессоров. Они мешают другим разработчикам быстро вникнуть в суть кода

Архитектура

Важное условия для масштабирования кода — единообразие. Посторонний разработчик должен как можно быстрее вникнуть в код и продолжить его писать в том же стиле. Существуют множество методологий наименований селекторов, в том числе БЭМ [19].

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

Типовая страница

Если проект довольно крупный, попросите дизайнера собрать все основные компоненты в отдельный типовой лист. Страницы можно будет собирать из готовых элементов как конструктор. Такие типовые листы могут перерасти в целые гайды и библиотеки компонентов. Это отличный подход для крупных компаний. Примеры:

Производительность

Селекторы

Браузер обрабатывает свойства справа налево. Селектор .section a div вначале найдет все элементы div на странице, затем все ссылки a и только потом определит, какие именно a входят в элемент .section. Гораздо оптимальнее селектор по классу, например, .section__link. Он проще, менее специфичен и немного быстрее работает. Не стоит переживать, что имена классов могут получится очень большими, это ни на что не влияет [22].

Вторая проблема селекторов — неиспользуемые селекторы [23]. Селектор для поиска неиспользованного элемента обходит все дерево и ничего не находит. Время тратится впустую.

Анимации

Тяжелые анимации сильно тормозят страницу. Самые лучшие свойства для анимирования — transform и opacity. Они меньше других влияют на производительность.

Существует способ оптимизировать сложные вычисления за счет переноса части сложных вычислений c центрального процессора на графический. Такое аппаратное ускорение [24] можно включить свойством transform: translate3d(0, 0, 0). Оно создаст отдельный слой компоновки с которым будет работать графический процессор. Существует еще один похожий подход — заранее предупредить браузер о будущих изменениях элемента с помощью will-change [25].

Не стоит злоупотреблять translate3d и свойством will-change, большинство оптимизации браузер сделает за вас сам. Почитайте также подробный разбор анимаций на GPU [26].

Тяжелые свойства

Не стоит использовать большие радиусы, лишний ресайзинг картинок (background-size) и сложные тени. Браузеру придется делать огромное количество перерасчетов. Например, Airbnb увеличила производительность скролла [27] просто убрав размытие теней.

Скорость загрузки

Сжать стили

Конкатенируйте, минифицируйте и кешируйте файлы стилей.

Критичные стили

Критичный CSS [28] это минимальный набор блокирующего CSS, требуемого для рендеринга верхней части страницы. Оставшаяся часть CSS будет загружена асинхронно позже. Однако, у такой практики нее есть ряд недостатков:

  • Критичные стили не получится кэшировать в браузере
  • Сложно работать подходит для динамических сайтов

Префетчинг

Браузер можно предупредить об использовании на странице ресурсов с другого адреса. Тогда браузер заранее преобразует URL этих ресурсов в IP и не будет тратить время на поиск DNS.

<link rel="dns-prefetch" href="//example.com">

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

<link rel="prefetch" href="image.png">

Существует еще несколько других техник префетчига [29], однако эти возможности еще не очень хорошо поддерживаются браузерами и имеют множество ограничений.

Безопасность

Target

Страница, открытая через target="_blank", получает частичный контроль над открывшей её страницей через js свойство window.opener. Эту уловку можно использовать, чтобы перевести пользователя на фишинговую страницу. Чтобы избежать уязвимости, добавляйте к ссылкам с target="_blank" атрибут rel="noopener noreferrer".

Семантика

Верстка

Нативные элементы HTML5 содержат правильные семантичные аттрибуты. Важно верстать таблицу с помощью <table>, формы c помощью form, кнопки с помощью <button> и т.д. Не забудьте поставить аттрибут alt в каждой картинке.

ARIA и роли

Роли и атрибуты ARIA [30] помогают пользоваться сайтом со скрин-ридера и других нестандартных технологий. На доступном сайте не должно быть недоступных с клавиатуры элементов управления. Каждый такой элемент должен иметь свое описание. Это описание может быть невидимым и указано через аттрибут aria-label.

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

Что поправить в верстке перед выпуском в продакшн? - 9

Порядок фокусировки можно подредактировать аттрибутом tabindex. Совсем отменить семантику элемента можно с помощью role="presentation" (например, чтобы используемая для вёрстки таблица не воспринималась как таблица с данными). Большое количество других рекомендаций можно почитать в этой статье про доступность [31].

Печать

Попробуйте распечатать [32] ваш интерфейс.

Микроразметка

Существуют различные словари и синтаксисы [33] микроразметки. Они помогают различным роботам легче работать с вашей страницей. Сущности Schema.org могут быть полезны для поисковиков, а с помощью Open Graph можно настроить красивое отображение ссылки на ваш сайт в публикациях в соцсетях.

Автор: anton_gcor

Источник [34]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/html/234118

Ссылки в тексте:

[1] css-шлюзы: https://habrahabr.ru/company/mailru/blog/315196/

[2] text-overflow: http://htmlbook.ru/css/text-overflow

[3] плагин: https://www.npmjs.com/package/gulp-hypher

[4] словарь к нему: https://www.npmjs.com/package/hyphenation.ru

[5] онлайн типографов: http://www.artlebedev.ru/tools/typograf/

[6] расширений: http://ilyabirman.ru/projects/typography-layout/

[7] Интервалы: http://frontender.info/methods-controlling-spacing-web-typography/

[8] Загрузка: https://habrahabr.ru/company/meduza/blog/316640/

[9] Сглаживание: http://kirillbelyaev.com/all/webkit-font-smoothing/

[10] правило: https://ru.wikipedia.org/Закон_Фиттса

[11] отправки данных даже в офлайне: https://medium.com/web-standards/улучшение-формы-комментариев-7b2ad80f0340

[12] работы с изображениями: http://frontender.info/responsive-images/

[13] больших таблиц: http://artgorbunov.ru/bb/soviet/20150127/

[14] переверстку: http://nobelfaik.livejournal.com/91725.html

[15] ошибкой в теории близости: http://artgorbunov.ru/bb/soviet/20160503/

[16] Почти, но не совсем: http://ilyabirman.ru/meanwhile/all/almost/

[17] наследовать стили: https://blogs.adobe.com/creativecloud/extending-the-color-cascade-with-the-css-currentcolor-variable/

[18] краткого написания свойств: http://prgssr.ru/development/kratkaya-zapis-css-kak-antipattern.html

[19] БЭМ: https://ru.bem.info/methodology/css/

[20] Библиотека компонентов Яндекса: https://ru.bem.info/libs/bem-components/v2/

[21] Интерфейсные гайды Контура: https://guides.kontur.ru/

[22] ни на что не влияет: https://ru.bem.info/forum/1130/

[23] неиспользуемые селекторы: https://noteskeeper.ru/638/

[24] аппаратное ускорение: https://habr.ru/company/yandex/blog/239169/

[25] will-change: http://frontender.info/css-will-change-property/

[26] анимаций на GPU: https://habrahabr.ru/company/odnoklassniki/blog/313978/

[27] увеличила производительность скролла: http://nerds.airbnb.com/box-shadows-are-expensive-to-paint/

[28] Критичный CSS: http://prgssr.ru/development/razbiraemsya-s-kritichnym-css.html

[29] несколько других техник префетчига: http://prgssr.ru/development/tehniki-prefetchinga-dlya-uluchsheniya-proizvoditelnosti-sajtov.html

[30] Роли и атрибуты ARIA: http://prgssr.ru/development/ispolzovanie-aria-v-html5.html

[31] статье про доступность: http://gov.design/blog/2016/11/08/accessibility.html

[32] распечатать: http://prgssr.ru/development/ya-sovsem-zabyl-o-stilyah-dlya-pechati.html

[33] словари и синтаксисы: https://habrahabr.ru/company/yandex/blog/211638/

[34] Источник: https://habrahabr.ru/post/319664/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best