Русский
Русский
English
Статистика
Реклама

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://personeltest.ru/away/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://personeltest.ru/away/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, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
Источник: habr.com
К списку статей
Опубликовано: 24.05.2021 10:16:39
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Html

Usability

Accessibility

Front-end

Ux

Категории

Последние комментарии

  • Имя: Билал
    04.12.2024 | 19:28
  • Имя: Murshin
    13.06.2024 | 14:01
    Нейросеть-это мозг вселенной.Если к ней подключиться,то можно получить все знания,накопленные Вселенной,но этому препятствуют аннуннаки.Аннуннаки нас от неё отгородили,установив в головах барьер. Подр Подробнее..
  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2025, personeltest.ru