Аудит для сайта Инновационные Системы Пожаротушения

Люди говорят: «По одежке встречают». Очень правильное высказывание — первое впечатление играет очень важную роль и в знакомстве с девушкой и в продаже телевизора и даже в разработке сайтов.

Представьте себе эдакого серфера, нервно кликающего мышкой и спешащего найти нужную ему информацию в сети. Назовем его Инокентий. Так вот Инокентий спешит, особо не вчитывается в тексты и не разглядывает картинки, он ищет информацию и пока он ее не найдет, Кеша будет продолжать нервно кликать мышкой, безжалостно отметая сайт за сайтом. Наша задача сказать ему: «Кеша, стой, дорогой! У нас есть то что тебе нужно!», после чего вся прыть у Кеши сойдет на нет, он наконец остепенится и станет внимательно и вдумчиво исследовать наш сайт.

К чему я все это написал? А к тому, что как раз с этим у сайта явные проблемы. Заходя на любой новый сайт я, как и любой другой пользователь сознательно или не сознательно (второй вариант случается куда чаще) выставляю сайту «оценку доверия». Если на сайте за 5 секунд мой взгляд находит 2-3 явных огрехи в дизайне или верстке, то судя по всему сайт делали спустя рукава, а значит качество хромает, доверие к сайту утрачено и восстановить его будет уже непросто, а ведь прошло только 5 секунд.

Основные проблемы

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

Юзабилити

— Горизонтальное меню под шапкой требует маркировки выпадающих списков. Кстати говоря лишним не будет и более контрастное выделение навигации благодаря более контрастному фону.
Как исправить?
К тексту ссылки добавляем ту самую маркировку выпадающего списка (смотрящую вниз стрелочку), либо (что на мой взгляд правильнее) ту самую стрелочку добавляем к фону, а тексту ссылки добавляем отступ справа, чтобы не наезжал на стрелочки.
— Левая колонка меню имеет сразу 2 серьезных проблемы:
1. Цвет шрифта у непосещенной ссылки почти не читабелен, потому что сливается с фоном. Прятать навигацию — преступление.
2. Уже посещенная ссылка из левой колонки меняет цвет на темно-серый, что вообще не поддается объяснению.
Как исправить?
Чтобы посещенные и непосещенные ссылки имели один и тот же цвет, нужно в правиле CSS присвоить цвет ссылке сразу с 2 псевдоселекторами:
a:link , a:visited {color: #цвет;}
— Старайтесь избегать "разделов в разработке" (пример), увидев очередную страницу подобного рода посетитель сильно понизит свое мнение о сайте, а может и вовсе уйдет, кто его знает.
Как исправить?
Порой сами ссылки убирать не хочется/нельзя, так как либо верстка развалится, либо пустое место образуется. В таком случае замените ссылки на аналогичный текст, скажем, серого цвета. Лучше сообщить пользователю, что там ничего нет до того, как он запросит загрузить пустую страницу.

Дизайн

О дизайне тут говорить сложнее — графических элементов на сайте почти нет.
Я осмелился перерисовать вам шапку, надеюсь такая будет выглядеть хотябы малость лучше. Шапка, как и всё остальное ждет вас в конце статьи.
— Поиск по сайту требует доработки: текст в инпуте сделать меньше, А "search" перевести на русский и сделать кнопкой. Кстати, а вы уверены, что третья колонка нужна? На данном этапе всё содержимое страницы отлично умещается в две колонки, предлагаю поиск переместить влево.
— Текст о подписке на RSS (Subscribe. There is no list available.) лучше просто скройте, зачем дразнить пользователя тем, чего нет?
— Кстати, а куда делся Favicon? А его никогда и не было. Мы нарисовали вам большую букву "П", прямо как у Лебедева, не забудьте поставить: иконка.

Верстка

Тут кроется провал вашего сайта. Тексты в таком виде игнорируются почти всеми пользователями.
— Не пишите весь текст в полужирном начертании (пример). Его придумали, чтобы выделять лишь часть текста, весь текст в полужирном начертании становится нечитабельным.
— Соблюдайте пунктуацию русского языка. Нужно заменить знаки минус на знаки тире в ваших текстах.
— Заголовки имеют тот же размер, что и текст и расположены по-середине. При этом отступ заголовка сверху равен отступу снизу. Убрать центрирование, увеличить размер шрифта и добавить отступ сверху.
— Текст в футере принято писать вот так: «© 2010 Инновационные Системы Пожаротушения».
Ну и пожалуй последнее, но не менее важное — старайтесь не мешать на одной странице фразы с нескольких языков (у вас это бросается в глазах как в шапке так и в футере.

А в итоге получилось ...

«Критик — тот, кто указывает автору как сделал бы он, если бы умел».
А посему хватит слов, вот что получилось у меня. Правило простое — максимально приближено к вёрстке оригинала, но красивее и с исправлением ошибок, что я перечислил выше. Кликабельно.