Правильно верстаем логотип.

Ниже приведено 8 простых правил, при верстке логотипа. Итак поехали.

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

Правило номер 1: никогда не брать логотип в тег h1. Лучше обернуть просто в div с классом logo.

Идем дальше. Типичные ошибки начинающих дизайнеров: они в навигацию вставляют пункт "на главную" или же в шапку сайта микроскопическую иконку в виде домика, в которую довольно проблематично попасть мышкой. Обычно логотип и является ссылкой на главную страницу и не нужно ничего лишнего придумывать. Если же пользователь уже находиться на главной странице, то логотип становиться не кликабельным.

Правило номер 2: Логотип является ссылкой на главную страницу, если пользователь находить на главной странице, то логотип не кликабелен.

Вопрос 3ий, в каком виде лучше вставлять логотип, в виде картинки или в виде фонового изображения. При работе над проектом о креативной рекламе adme.ru, был замечен тот факт, что если логотип вставлен фоном и прописан в css файле, то он подгрузится намного позднее, чем если бы он был просто вставлен в виде картинки. А если пользователь не видит логотипа, ему не совсем понятно куда же он попал, тем более если он впервые на вашем ресурсе.

Правило номер 3: Логотип вставлять всегда в виде картинки, а не фоновым изображением.

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

Правило номер 4: Область реагирования должна быть большое размеров логотипа.

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

Правило номер 5: Если проект не высоконагруженный и вы не считаете каждый байт, то используйте микроформаты.

Мало кто знает, а тем более использует такой атрибут как accesskey. Этот атрибут работает только ссылками и позволяет с помощью клавиатуры передвигаться по сайту. Негласным стандартом для веб разработчиком является accesskey="1", это ссылка на главную страницу сайта. Например нажав в firefox ctrl + 1, вы переместитесь на главную страницу, согласитесь удобно, особенно тем кто работает с клавиатурой или тем у кого довольно плохое зрение.

Правило номер 6: Не забываем про тех кто предпочитает клавиатуру, а не мышку и о людях с плохим зрением.

Правило номер 7: Не забываем про тех у кого отключены картинки. Прописываем название логотипа в атрибуте alt, либо же кладем под слой с изображением, красиво оформленный текст с лого.

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

Правило номер 8: Интерфейс всегда должен реагировать на действие пользователя.