Шапка сайта и правила HTML
Для успешного продвижения сайта необходимо применять несколько правил при разработке хедера.
Название и контакты никогда не отображать в виде картинки. Только текст, который может воспринять поисковик.
Наличие заголовка H1, одинакового на всех страницах вашего сайта, будет мешать при продвижении ресурса.
Не используйте тяжелые изображения, флеш и много графики. Это затрудняет загрузку сайта и раздражает многих пользователей.
Не встраивайте горизонтальное меню во флеш, не отображайте меню в виде картинок. Используйте только текст. Иначе при необходимости внесения изменений в пункты меню вы можете столкнуться с определенными трудностями.
Создавайте HTML-шапки. Долой хедеры, состоящие полностью из картинки или флэш-анимации! Зачем усложнять себе работу? Если вы хотите выделиться - можно ненавязчиво использовать динамические элементы в дизайне, работающие на скриптах.
Шапка должна быть такой высоты, которая не помешает восприятию контента. Для информационных ресурсов логично делать невысокую шапку (100-200 пикселей). Для лэндингов и презентационных сайтов-визиток размер хедера может быть несколько выше.
Как создать правильный хедер
Если у вас есть готовый бреднбук, то все страницы сайта, в том числе хедер, следует оформить в соответствии с ним. Важная задача веб-дизайнера – добиться единого стиля между Хедером, контентным полем и подвалом сайта. .
Отдавайте предпочтение позитивным изображениям: люди с улыбками на лице, красивая девушка, природа. Для создания серьезной атмосферы используйте безликие изображения в приглушенной цветовой гамме, обязательно с логотипом.
Предположим, что нам нужен хедер для сайта прачечной. Подберите фото стиральной машинки (нужно сразу показать посетителю, на какой сайт он попал, и что ему могут здесь предложить). Как вариант, можно использовать фото привлекательной девушки, стирающей белье, а также элементы дизайна, вызывающие ощущение чистоты и свежести. Каждое фото должно быть уникальным, или хотя бы уникализированным при помощи графического редактора. Можно создать логотип, к примеру, схематичный стиральный барабан и волну внутри него. Рядом с логотипом указываем название.
Сайт встречают по его шапке, это уникальная визитная карточка. Поэтому при разработке сайта уделите хедеру максимум внимания!
Футер сайта
Футер сайта - нижняя часть сайта, подвал. Является противоположностью хедера (шапки), правильное оформление футера играет огромную роль в успехе продвижения сайта и улучшения его юзабилити.
Что такое футер сайта на примере
“Именно обувь делает женщину женщиной”, - говорит секретарша в известном фильме. И она права! Если на вас надеты валенки - вы гуляете по заснеженному лесу. Если туфли на шпильке - то вам предстоит незабываемый вечер. Если кроссовки - то вы собираетесь заняться спортом или же много ходить. Не так ли?
Многие думают, что если футер размещается в самом низу - у пользователя не хватает терпения “долистать” до него, и поэтому оформление подвала мене важно, чем оформление шапки. Но это не так.
Что должно быть в футере сайта
Чтобы сайт работал, он должен быть удобным, читабельным и привлекательным для посетителя. Рассмотрим элементы подвала сайта и оценим их значимость. Футер не обязательно должен содержать все эти элементы. Подберите для вашего сайта индивидуальный перечень.
Карта сайта
Это полный список страниц сайта, отображаемый согласно его структуре. Данный элемент улучшает юзабилити, облегчает навигацию пользователя, рассказывает поисковым системам обо всех страницах сайта. Если страниц на сайта очень много - выберите самые важные из них и отобразите в HTML-карте сайта.
Контакты
Продублируйте информацию о контактах из шапки сайта в подвале. Можно разместить самые важные контакты. Если посетитель дошел до конца страницы, значит, он дочитал всю информацию и есть вероятность, что он сделает заказ. Для его удобства необходимо разместит контакты.
Форма обратной связи
Позволяет посетителю связаться с вами, не уходя с текущей страницы. Это удобно для ваших потенциальных клиентов.