4.3. Дизайн сайта

4.3.1. Дизайн сайта должен преследовать две основные цели:

- структурировать веб-страницу так, чтобы с ней было удобно работать;

- сформировать у посетителя нужное настроение, ощущение.

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

4.3.2. При выборе цветового решения для сайта рекомендуется ограничиться одним или двумя контрастными цветами (кроме белого и черного). Можно использовать близкие оттенки одного цвета (имеющие один и тот же цветовой фон, но разную яркость или насыщенность). Теплые цвета (желтый, красный, зеленый) зрительно приближают объект, делают его больше, акцентируют на нем внимание, в то время как холодные цвета (синий, голубой, фиолетовый) отдаляют объекты, отодвигают их на задний план, успокаивают пользователя.

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

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

4.3.4. Рекомендуется разработать мобильную версию сайта. Она может быть реализована:

- с помощью адаптивной верстки - в этом случае у сайта существует два интерфейса: первый - для посетителей со стационарных компьютеров, второй - более простой вариант для захода с различных мобильных устройств;

- с помощью PDA-версии - в этом случае мобильный вариант сайта находится на отдельном поддомене. Если посетитель заходит с мобильного телефона на основной сайт, его автоматически отправляют на PDA-версию.

Проверить, оптимизирован ли сайт для поисковых систем, можно, например, здесь: https://search.google.com/test/mobile-friendly.

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

4.3.6. Необходимо предоставлять пользователям информацией возможность масштабировать (увеличивать и уменьшать) шрифт и элементы интерфейса сайта средствами веб-обозревателя.

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

Сайт должен соответствовать положениям ГОСТ Р 52872-2019 "Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности" <19> и рекомендации World Wide Web Consortium (W3C) "Руководство по обеспечению доступности веб-контента (WCAG) 2.0" <20>, среди которых:

--------------------------------

<19> ГОСТ Р 52872-2019. Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности (дата актуализации описания: 27.07.2022).

<20> Руководство по обеспечению доступности веб-контента (WCAG) 2.0. - URL: https://www.w3.org/Translations/WCAG20-ru/ (дата обращения: 27.07.2022).

- размер шрифта текста может быть изменен в пределах 200% без применения вспомогательных технологий таким образом, что пользователю не нужно прибегать к горизонтальной прокрутке для прочтения строки при режиме отображения страницы во весь экран (может быть решено через "Панель для слабовидящих");

- визуальное отображение текста и изображение текста имеет коэффициент контрастности не менее 4,5:1,0 (может быть решено через "Панель для слабовидящих");

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

- на сайте используется шрифт с засечками.

4.3.8. Страницы сайта должны быть оптимизированы с целью повышения скорости загрузки страниц. Рекомендованное время загрузки сайта - не более 2 с. Загрузка более 5 с недопустима.

4.3.9. Для этих целей необходимо оптимизировать используемые на сайте графические изображения:

- графика уместна лишь в случаях, когда она иллюстрирует текст или необходима для создания запоминающегося имиджа сайта;

- следует правильно подбирать сочетания цветность/размер/качество/объем изображения;

- желательно не использовать изображения, превышающие по размеру 200 Кб;

- для создания анимированных (движущихся) картинок, изображений с прозрачной основой или со множеством мелких деталей (где повышены требования к четкости изображения) лучше всего использовать формат gif;

- для создания полноцветных иллюстраций фотографического качества следует использовать формат jpg (jpeg), при этом необходимо подобрать максимально возможную степень сжатия при условии сохранения видимого качества для каждого конкретного изображения;

- для создания диаграмм, фонов, иконок, логотипов и других простых иллюстраций желательно использовать формат png;

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

4.3.10. При разработке сайта необходимо провести проверку корректности его отображения самыми популярными на момент разработки сайта веб-обозревателями. В дальнейшем следует ежегодно отслеживать статистку популярности браузеров и проверять корректность отображения сайта в новых, появляющихся на рынке браузерах. Для этих целей можно использовать как собственную статистику сайта, так и открытые данные различных аналитических агентств, например https://www.similarweb.com/ru/browsers/.

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