Шаблоны HTML5 или оформление сайта является основополагающим для любого WEB-ресурса или приложения. Дизайн интернет-страницы – это первое, что видит посетивший Вас пользователь. Идеальное сочетание в WEB-дизайне – это уникальность, простота в освоении и тематическое творчество. Но грань чрезвычайно тонка! Очень часто хорошие дизайнеры уделяют анимации, картинкам и прочим «креативным» элементам, совершенно забывая про юзабилити.
Простыми словами, юзабилити – это набор элементов пользовательского интерфейса, который служит связующим звеном между посетителем и сайтом.
Широко известный консорциум W3C публикует на своем сайте советы по оптимизации сайта, а также предоставляет программные инструменты для проверки дизайна сайта. В этой статье мы приведем эти советы и постараемся разобрать их.
Использование атрибута alt для изображений
Использование alt в дизайне может быть необходимым для сайта, в аудиторию которого входят люди, отключающие отображение графики в своем браузере. По содержимому атрибута alt они смогут понять смысловую роль изображения в общем контексте.
Использование субтитров для звуковых файлов и описания для видео-файлов необходимо, поскольку далеко не каждый посетитель сайта может прослушать или просмотреть предложенный файл. Порой вид сайта перегружен видео-роликами, которые начинают загружаться сразу после открытия страницы. При использовании слабых компьютеров, или медленной связи, просмотр таких страниц становится невозможным и раздражающим. Посетитель будет вынужден ждать, при зависшем браузере, пока его компьютер обработает страницу. Поэтому, такие файлы лучше запускать по разрешению пользователя, и он должен иметь возможность узнать заранее смысл предлагаемого ролика или звукового файла.
Использование смысловых гиперссылок
Оформление сайта, в котором везде используются ссылки вида «Нажать здесь» далеко не всегда оказывается удобным и доступным. При таком размещении ссылок посетитель вынужден читать, окружающий ссылку контент, чтобы понять зачем ему на неё нажимать.
Использование для создания структуры страницы заголовков, списков, css стилей
Каждый сайт должен быть структурирован, для этого наиболее важную информацию нужно выделять цветом или размером шрифта, например, с помощью заголовка.
При использовании апплетов или activeX компонента на сайте, нужно предусматривать проверку поддержки этих элементов в браузере пользователя. Если такой поддержки нет, то посетитель не должен получать недостроенный дизайн страницы. На месте недоступных, элементы должны выводиться аналогичные по смыслу и графическому содержанию, но поддерживаемые браузером посетителя.
Не стоит использовать при создании сайта фреймовую структуру
Дизайн таблиц сайта должен быть ориентирован на улучшение восприятия информации в таблице. Для этого лучше выделять строки, чтобы информация воспринималась порционно — по строкам, и подвести итоги для каждой таблицы, добавив к ней резюме – строку, которая будет выделяться сильнее остального содержимого.
Для проверки же корректности дизайна сайта можно воспользоваться специальными кнопками W3C, для этого нужно ввести url странички для проверки здесь http://validator.w3.org/ и получить код кнопки.
