HTML и CSS ошибки, ухудшающие UX

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

Не мучайте пользователей свойствами justify-content и align-items

Когда мы решаем задачи по позиционированию элементов, нам нравится использовать свойства justify-content и align-items. Но мало кто знает, что эти свойства могут провести к мукам пользователя. Особенно часто проблемы связаны с вертикальным позиционированием.

Это связано с особенностями работы свойств, а именно свойства justify-content и align-items не учитывают размеры flex-элементов. Соответственно в случае когда размеры flex-элементов больше размеров flex-контейнера, то flex-элементы будут выходить за его пределы, и могут отображаться некорректно.

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

Эта проблема легко решается с помощью свойства margin со значением auto. Внутри flex-контейнера значение auto будет рассчитано с учетом размера самого контейнера и размеров flex-элементов. Если размеры flex-элементов меньше, чем размеры flex-контейнера, то браузер рассчитает отступ автоматически. А если больше, то элементы прижмутся к границам flex-контейнера.

Не делайте так

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

Можно делать так

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}

Не заставляйте пользователей ждать загрузки кастомных шрифтов

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

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

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

У дескриптора есть значение swap, подсказывающее браузеру, что он может использовать безопасный шрифт, пока кастомный полностью не загрузится. А когда он будет загружен, то текстом будет отображен им.

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

Не делайте так

@font-face {
  font-family: "Baloo Tamma";
  src: url("balotamma.woff2") format("woff2"),
       url("balotamma.woff") format("woff");
}

Можно делать так

@font-face {
  font-family: "Baloo Tamma";
  src: url("balotamma.woff2") format("woff2"),
       url("balotamma.woff") format("woff");
  font-display: swap;
}

Не ломайте SVG иконками интерфейсы

Когда вы используете SVG иконки внутри HTML, обратите внимание, что вам нужно уставить атрибуты width и height. Если вы это не сделаете и установите ширину и высоту через CSS, то ваш интерфейс будет сломан.

В эпоху фреймворков CSS может сработать не сразу. Я не понимаю как это получилось, но я видел приложения на React, в которых cначала отображались огромные иконки, а только потом они принимали нужный размер. Поэтому просто установите размеры через атрибуты width и height, и ваши интерфейсы будут пуленепробиваемыми.

Не делайте так

<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512">
    <path fill="currentColor" d="..."></path>
</svg>

svg {
  width: 0.875rem;
  height: 1rem;
}

Можно делать так

<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
  width="0.875rem"
  height="1rem">
    <path fill="currentColor" d="..."></path>
</svg>

Не заставляйте ждать пользователей загрузки тяжелых изображения на всех типах устройств

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

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

Например, мы может создать 2 source элемента и определить через медиа-запросы, какое изображение загружать на планшетах, а какое на десктопах. Кроме того, для отображения изображения на мобильных устройствах мы будем использовать элемент img.

Не делайте так

<img 
  src="ferrari-1920x1080.jpg"
  alt="yellow ferrari F8 spider on the background of the ocean">

Можно делать так

<picture>
  <source 
    srcset="ferrari-1200x960.jpg"
    media="(min-width: 641px) and (max-width: 1200px)">
  <source 
    srcset="ferrari-1920x1080.jpg"
    media="(min-width: 1201px)"> 
  <img 
    src="ferrari-640x480.jpg"
    alt="yellow ferrari F8 spider on the background of the ocean">
</picture>

Также мы можем оптимизировать загрузку изображений для retina-экранов. Для этого мы будем использовать дескриптор плотности.

Например, если у смартфона плотность пикселя 2x, то браузер загрузит ferrari-640x480-2x.jpg, а если 1x, то ferrari-640x480-1x.jpg. Такой же механизм сработает для планшетов и десктопных экранов.

Не делайте так

<img 
  src="ferrari-1920x1080.jpg"
  alt="yellow ferrari F8 spider on the background of the ocean">

Можно делать так

<img 
  src="ferrari-1x.jpg"
  srcset="ferrari-2x.jpg 2x"
  alt="yellow ferrari F8 spider on the background of the ocean">

<!-- или  -->

<picture>
  <source 
    srcset="ferrari-1200x960-1x.jpg, ferrari-1200x960-2x.jpg 2x"
    media="(min-width: 641px) and (max-width: 1200px)">
  <source 
    srcset="ferrari-1920x1080-1x.jpg, ferrari-1920x1080-2x.jpg 2x"
    media="(min-width: 1201px)"> 
  <img 
    src="ferrari-640x480-1x.jpg, ferrari-640x480-2x.jpg 2x"
    alt="yellow ferrari F8 spider on the background of the ocean">
</picture>

P.S: Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.