Веб-дизайн / Практика

20524

19-03-2014

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

Макет веб-страницы

⚫   1. Учтена целевая аудитория

⚫   2. Созданы единообразные заголовки и логотип

⚫   3. Созданы единообразные элементы навигации

⚫   4. Имеется информативный заголовок с именем компании, организации, сайта

⚫   5. Внизу страницы имеются данные по копирайту и контактные данные

⚫   6. Использованы основные принципы веб-дизайна: повторяемость, контраст, приближенность и выравнивание

⚫   7. Страница не требует горизонтальной прокрутки при разрешении экрана 1024х768 и более высоких разрешениях

⚫   8. Текст, графика и пробелы сбалансированы

⚫   9. Обеспечен хороший контраст между фоном и текстом

⚫   10. Повторяющаяся информация (заголовок, логотип, навигационная область) занимает не более четверти или трети окна браузера при разрешении 1024х768

⚫   11. Главная страница содержит интересную, притягивающую посетителя информацию в открывающейся в первый момент части страницы (до ее прокручивания вниз) при разрешении 1024х768

⚫   12. Главная страница загружается не более 10 секунд при коммутируемом соединении

Совместимость с браузерами

⚫   1. Страница отображается в браузере Internet Explorer (версия 8 и позднее)

⚫   2. Страница отображается в браузере Firefox (версия 4 и позднее)

⚫   3. Страница отображается в браузере Google Chrome

⚫   4. Страница отображается в браузере Safari (платформы Macintosh и Windows)

⚫   5. Страница отображается в браузере Opera (версия 10 и позднее)

⚫   6. Страница отображается на мобильных устройствах

Навигация

⚫   1. Главные навигационные элементы обозначены четко и единообразно

⚫   2. Пользование навигационными элементами легко для целевой аудитории

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

⚫   4. Использованы дополнительные навигационные возможности, такие как карта сайта, ссылки на переход к содержимому сайта, «хлебные крошки»

⚫   5. Все гиперссылки работают

Цвета и графика

⚫   1. Количество цветов, использованных на странице для фона и текста, не превышает 3-4

⚫   2. Цвета используются единообразно

⚫   3. Цвет фона достаточно контрастен по отношению к тексту

⚫   4. Не только цвет используется для повышения воспринимаемости

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

⚫   6. Графика оптимизирована и не слишком замедляет загрузку сайта

⚫   7. Каждое изображение служит определенным целям

⚫   8. Элемент image использует атрибут alt для конфигурирования альтернативного текста

⚫   9. Анимированные изображения не отвлекают от контента сайта и не повторяются или повторяются в течение небольшого периода времени

Мультимедийный контент

⚫   1. Использование каждого аудио, видео, анимации оправдано

⚫   2. Аудио, видео, анимация скорее привлекают внимание к сайту, чем отвлекают от его содержания

⚫   3. Для каждого аудио- и видеообъекта предусмотрены заголовки

⚫   4. Указано время загрузки аудио- и видеообъекта

⚫   5. Предусмотрены ссылки на проигрывающие устройства для мультимедийных файлов

Представление содержания страницы

⚫   1. Использованы распространенные шрифты, такие как Arial или Times New Roman

⚫   2. Стиль текстов соответствует принятым в веб: заголовки, круглые маркеры, короткие предложения в коротких абзацах, использование «воздуха» и другое

⚫   3. Шрифты, размеры шрифтов и их цвет используются единообразно

⚫   4. Контент сайта значимый, полезный и информативный

⚫   5. Контент сайта организован единообразно

⚫   6. Нужную информацию легко найти, с минимальным количеством щелчков

⚫   7. Правильно указана дата последнего обновления и дата копирайта

⚫   8. Сайт не содержит устаревшей информации

⚫   9. В тексте нет орфографических и грамматических ошибок

⚫   10. Нет таких надписей, как «Щелкните здесь», в тексте для гиперссылок

⚫   11. При использовании стандартных цветов для ссылок ссылка на открытую в настоящее время страницу выделяется цветом

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

Работоспособность

⚫   1. Все внутренние гиперссылки работают

⚫   2. Все внешние гиперссылки работают

⚫   3. Все функции форм работают как ожидается

⚫   4. Отсутствуют ошибки JavaScript на страницах

Доступность

⚫   1. Если главные навигационные элементы выполнены в виде изображений, анимации или динамических элементов, внизу страницы помещены текстовые навигационные элементы

⚫   2. Не только цвет используется для повышения воспринимаемости

⚫   3. Элемент image использует атрибут alt для конфигурирования замещающего текста

⚫   4. Для каждого аудио- или видеообъекта предусмотрены заголовки

⚫   5. Используются атрибуты, улучшающие доступность: alt, longdesc, title и в необходимых местах дается краткая текстовая информация

⚫   6. На сайте, использующем фреймы, заголовки фреймов, а также значимый текст размещаются вне фреймов

⚫   7. Для помощи программам экранного доступа атрибуты HTML-элементов lang и xml:lang указывают язык страницы

По материалам книги Терри Фельке-Морриса «Большая книга веб-дизайна«.