footer html примеры с кодом
Примеры футера сайта с помощью HTML + CSS
Коэффициент конверсии вашего блога или сайта также увеличится, если вы разместите кнопку регистрации или какое-либо предложение в разделе нижнего элемента. Ведь большинство потенциальных пользователей смогли повысить интерес или вовлеченность сайта, прописав ссылки в этом разделе. Где также смогли значительно увеличить продажи, показывая кнопки или ссылки на ваши продукты или услуги, что на прямую зависит от тематического направление сайта.
Почему так важен нижнее часть для сайта:
Нижний колонтитул может улучшить пользовательский опыт в значительной степени, так как на мнем можно вывести самую главную и нужную информацию и поставить под ссылки ключевые слова, где по одному клику вы перейдете на тот материал, который вам нужен или искали, что отлично дополняет навигационный функционал. Это экономит пользователям время, где очень сильно сокращает его для поиска. Думаю многие со мной согласятся, что гости и пользователи сайта обычно ищут контактную информацию в нижней части сайта в разделе нижнего колонтитула.
И по этому можно рассуждать по этому направлению, так как если нет нижнего колонтитула на интернет блоге или сайте, то ваши посетители могут покинуть ваш сайт. Так как здесь все просто и понятно, гости не могут найти контактную информацию в нижней части. А потому что они не хотят тратить много времени на это, они хотят вещи очень быстро. И безусловно это выглядит логично, где не хочет напрасной тратить свое время на поиск, как можно связаться. Если они не смогут быстро найти контактную информацию на вашем сайте, где сразу выполняют поиск на альтернативные площадки, который предоставляет аналогичные услуги.
Нижний колонтитул сделан в Bootstrap от Digital Avinash
Создание футера для сайта-одностраничника
Пояснения к статье:
Здравствуйте, это финальный урок из серии обучающих материалов по созданию одностраничника.
Прочитав эту статью вы узнаете о том, как создать футер для страницы, а также получите полное представление о создании веб-страницы, ведь футер является окончательной частью.
В футере, как правило, располагается информация о копирайте, контактные данные, ссылки на социальные сети.
В нашем футере будет только копирайт и контактная информация — номер телефона и электронная почта.
HTML разметка футера
Создаем 3 блока p. В первом будет указан E-Mail администрации. Во втором будет расположен номер телефона, а в третьем информация о копирайте.
После этого можно открывать CSS документ и записывать туда все необходимые стили.
Стилизация блока
Для начала нужно задать фон и разметку самого футера. Ширину задавать не требуется, так как она равна ширине общего блока body, однако необходимо указать высоту.
Цвет фона должен отличаться от фона других блоков. Это необходимо для привлечения внимания клиентов.
Стилизация внутренних элементов
После того как мы задали цвет фона, нам необходимо расположить элементы. Контактная информация будет располагаться с правой стороны, поэтому свойство text-align не потребуется.
Всё что нам потребуется — изменение шрифта и цвета текста.
Информация о копирайте будет располагаться в нижней части футера. Он будет отделен особой тонкой рамкой.
Для его стилизации потребуются свойства изменения цвета, стиля шрифта и размера шрифта.
Для изменения размера шрифта будет использоваться всеми любимая система шрифтов:
Прибитый к низу футер своими руками
Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.
Так, 
вместо того, чтобы 
.
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.
Посмотрим на реализацию одного вида прибитого футера, взятого из сети, и попробуем разобраться в происходящем. css-tricks.com/snippets/css/sticky-footer
CSS:
HTML:
Вряд ли каждый, даже знающий CSS, глядя на этот код, разберётся в принципах и будет уверенно править сложный проект. Любой шаг в сторону приведёт к побочным эффектам. Рассуждения и изготовление футера ниже призваны дать больше понимания правилам CSS.
Начнём с теории
Обычная реализация прибитого футера основывается на том уникальном для CSS2 свойстве, что элементы — непосредственные потомки BODY — поддерживают процентную высоту (height:100% или другую) относительно окна, если все их родители имеют тоже процентную высоту, начиная с тега HTML. Раньше, без доктайпов, а сейчас в Quirks Mode процентные высоты элементов поддерживаются на любом уровне, а в современных доктайпах — только внутри процентно заданных элементов. Поэтому, если мы сделаем блок контента (назовём его #layout), имеющий 100% высоты, он будет иметь скролл, как будто это — окно. В него помещают всё (потоковое) содержание, кроме футера и, может быть, хедера.
Говоря человеческим языком, стилями делается пустой «карман» снизу, в который вкладывается футер, и он всегда оказывается или прилепленным к нижней границе окна, или к нижней границе документа, если документ по высоте больше высоты окна. По интернету и на Хабре существует множество реализаций футера, с разной успешностью работы во всех браузерах. Продолжим строить его самостоятельно, используя вёрстку Хабра как «рабочую лошадку».
Посмотрим на строение страниц нашего подопытного. Для этого проще всего раскрыть окно Firebug или подобное окно («Инструменты разработчика» (Ctrl-F12)) в Chrome.
Перейдём к рабочему примеру
Пункт 4 — придётся прорисовывать скриптом.
C третьим пунктом разобраться, казалось бы, просто, добавив Но вспомним, что этого блока может не быть — он подавляется баннерорезкой, или рекламщики его вдруг решат не показывать. Есть ряд страниц сайта, где его нет. Поэтому зависимость margin-top от рекламного блока — плохая идея. Гораздо лучше — разместить его внутри #layout — тогда он ничем не будет мешать.
Первый пункт — чтобы прибитый футер вообще заработал, надо блок футера поместить под #layout. Впрочем, с помощью javascript можно реализовать и другие схемы прибитого футера, но в любом случае нужен JS или изначально правильная вёрстка, чтобы обойтись без него.
Поскольку мы не можем быть сильнее самого последнего верстальщика сайта, «влепившего» футер внутрь содержания, отложим идею правильного размещения футера на свой будущий сайт (который, стало быть, будет «круче» Хабра!), а Хабр препарируем джаваскриптом (юзерскриптом) до правильного состояния. (Сразу скажем, виноват не верстальщик, не стрелочник, а вид сайта, конечно, определяет стратегическое решение руководства проекта.) Так мы не достигнем идеала, потому что в первую секунду-две в процессе загрузки страница будет с неправильной вёрсткой. Но для нас важен концепт и возможность превзойти по качеству самый популярный сайт мира айтишников.
Поэтому в нужном месте скрипта (пораньше, в конце загрузки страницы) напишем переносы DOM-блоков рекламы и футера на нужные места. (Приготовимся к тому, что за счёт юзерскриптов решение будет сложнее чистого.)
Расставили блоки по местам — теперь осталось приписать элементам нужные свойства. Высоту футера придётся задавать точно, просто потому что мы её уже знаем к моменту действия юзерскрипта (конец загрузки страницы). Из-за точки срабатывания юзерскрипта, как уже говорилось выше, прыжок отображения футера на странице неизбежен. Можно пытаться делать «хорошее лицо», но при «плохой игре»? Зачем? «Плохая игра» сайта позволяет сделать без сверхусилий концепт, которого будет достаточно для оценки качества и не понадобится при «правильной игре» на своём проекте.
Здесь позволили себе применить самописную функцию h.apnd_el, делающую примерно то же, что и в jQuery —
И далее — ещё одна типичная функция внедрения правил CSS — h.addRules. Здесь без неё не обойтись, потому что нужно объявить правило с «!important» — как раз из-за особенностей приоритетов стилей из юзерскрипта.
С этими кусочками кода мы сможем увидеть в юзерскрипте прибитый футер (после прыжка его вниз) и полностью осознать, как надо строить вёрстку страниц. Использовать прыгающий дизайн повседневно — неприятно, поэтому рекомендуется его сделать исключительно для демонстрации и тестирования. В юзерскрипте HabrAjax я установил аналогичный скрипт, закрыв его настройкой «underFooter» (установить «галочку» в списке настроек перед «прибитый к низу футер»), начиная с версии 0.883_2012-09-12.
Затрагивает ли прибитый футер необходимость обновления стилей ZenComment, если они установлены? Да, затрагивает. Из-за сложной цепочки приоритетов стилей, в которых стили, вставляемые юзерскриптом, имеют низший приоритет, пришлось немного подкорректировать юзерстили для возможности работы с прибитым футером. Если вы не обновите юзерстили (до 2.66_2012-09-12 +) — футер будет работать неточно.
Блок rotated_post (три популярных поста из прошлого) логичнее смотрится при футере, поэтому в реальном скрипте он тоже перенесён в футер.
Второй пункт (из списка недостатков вёрстки) — рассуждения чисто для Хабра (к юзерскрипту не относятся и частично повторяют прежние).
У страниц имеется проблема, мешающая сделать прибитый футер на чистом CSS — неопределённая высота футера, зависящая от размеров шрифта по умолчанию в браузере. Для реализации футера на CSS требуется подобрать относительные высоты шрифтов, но и они могут не сработать, если на компьютере пользователя не будет предусмотренных шрифтов. Поэтому решение должно включать джаваскрипт, который может подгонять переходами (transitions) приблизительное положение футера до точного. Или, посмотрев на приемлемость сделанного решения на юзерскрипте на разных платформах, сделать вычисляемую установку прибитого футера — первые наблюдения показывают, что решение практично.
Вывод: полноценно оформить раскладку на Хабре можно, но для этого нужен верстальщик, чётко понимающий поведение раскладки, располагающий блоки в правильном порядке. (Сейчас футер и верхний баннер стоят «не там» и не так, чтобы просто стилями получить прибитый футер.) Можно обойтись без JS, если задать высоту футера в относительных единицах, взяв некоторый запас места на неопределённость шрифта.
Реализация
Если включить HabrAjax 0.883+, то увидим работу «прибитого футера». Он адаптируется по высоте с помощью скриптов. Он позволяет оценить, насколько лучше выглядят страницы с прибитым футером по сравнению с обычными. Юзерстили ZenComment совместимы со скриптами, но для правильной работы прибитого футера с ними нужно установить версию ZenComment 2.66_2012-09-12 +.
Факты о поведении реализации
Шаманство с футером, стилями и скриптами — это шаманство (лишь подкрепляемое теорией). В разных браузерах немного разное поведение, но кое-где — неожиданное. Без юзерскриптов и переставления блоков результаты будут другие. Вот что дали эксперименты с реализацией на юзерскрипте.
1) Firefox — неожиданное отсутствие прыжков футера. Странно, что их нет — отрисовка происходит после размещения футера внизу.
2) Chrome — он удивил «блуждающим скроллом» — к странице с периодом раз в секунду добавляются пустые пространства внизу — что-то неправильное происходит с расчётом высот. Лечится прописыванием html,body
3) Опера — без прыжков (v. 12.02) при первой загрузке страницы, но поспешная перезагрузка может показать прыжок футера. В остальном ведёт не менее корректно, чем Fx.
Что же, придётся специально приучить Хром вести себя правильно (скриптом) и в таком виде выкатить версию на обозрение. Поэтому участок в юзерскрипте немного сложнее, чем приведённый в статье.
Надо напомнить, что это не полноценная реализация — не учитывает, например, случаи ресайза окна пользователем. Можно найти и редкие (на практике) сочетания изменяющихся высот футера до перемещения и после него, где логика начнёт давать сбои, не приводящие к неудобствам. Недостатки оставлены сознательно, потому что соблюдается баланс сложности доработки и временности решения.
В итоге, получилась вполне работоспособная схема работы, по крайней мере, для быстрых стационарных компьютеров. Если обнаружится неправильное поведение футера, настройку «underFooter» нужно отключить.
Для каких страниц это полезно?
На стандартном сайте, без юзерстилей даже короткие страницы вопросов-ответов оказываются длиннее 1500px, что в большинстве случаев незаметно при горизонтально расположенных мониторах. Но даже при обычных мониторах часто попадаются персональные страницы пользователей высотой порядка 1300 пикселей, где неприбитый футер предстаёт во всей красе. Не очень длинен и ряд страниц в настройках пользователя.
Если применять юзерстили ZenComment, они сильно сокращают необходимую высоту страницы, а юзерскрипт HabrAjax может не показывать некоторые или все боковые блоки в сайдбаре. Поэтому со скриптами и стилями заметно чаще наблюдается эффект неприбитого футера. Поэтому логично, что в HabrAjax исправление футера появилось впервые. Но и обычный сайт имеет ряд страниц, где прибитый футер был бы полезен.
Будет ли поддержка?
Поведение сайта за последний год показывает, что разработчики (а значит, руководство) начали внедрять возможности, ранее существовавшие только в юзерскриптах и юзерстилях. Например, в начале года я написал статью-обзор по юзабилити Хабра, где собрал множество небольших пожеланий. Через полгода я вернулся к ней и с удовлетворением пометил (прямо в тексте; можно ознакомиться с «UPD» и датами), что целый ряд возможностей, описанных как пожелания, уже были внедрены в сайт.
Далее, посмотрим на «стрелочки» вместо квадратиков для оценивания комментариев. Они появились в юзерсилях almalexa («Prettifier») года 3 назад и переняты в ZenComment года 2 назад. Месяца 2-3 назад они появились на сайте. Начинает вериться в то, что через некоторое время стрелки разнесут на некоторое расстояние, как это сделано в ZenComment (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться.
Поэтому, возможно, и «прибитый футер» на Хабре — это не такая фантастика, какой могла показаться года 3 назад.
Другие возможности в скрипте HabrAjax, появившиеся за последние 3 месяца (отключаемы в настройках):
* авторост полей ввода (в Опере может тормозить на больших текстах);
* дни недели при датах, кроме «сегодня» и «вчера»;
* события в Ленте, сворачиваемые до 1 строки и 2 символов;
* сокращение слов «хабр*» до «χ·» и «χα»;
* подсказки дат по номерам статей — сообщается, какого месяца и года статья до её загрузки, по номеру в URL;
* свёрнуты «Похожие посты» до 2 слов. Скриншот всплывающих «похожих постов» (показывает 12 ссылок, а не 4).
Что такое футер и что там разместить
Во время создания дизайна сайта или его SEO-оптимизации важно сделать так, чтобы им было удобно пользоваться. Хорошее юзабилити складывается, когда все элементы на странице продуманы: начиная шапкой и заканчивая подвалом. Зачастую оптимизацией последнего пренебрегают.
В статье разбираемся, почему важен подвал сайта, чем полезен и как его грамотно использовать.
Что такое футер сайта
Футер или подвал сайта (англ. footer) — это блок в самом низу страницы с информацией, которая может быть полезна посетителю.
Аналитика
Из исследования, проведенного на основе 1.000.000 посетителей, было подсчитано, что большая часть времени проводится за линий сгиба экрана.
Убедиться можно самим, посмотрев отчет «карта скроллинга» в Яндекс.Метрике.
Кроме того некоторую информацию (телефон для обратной связи, электронную почту и т.п.) могут искать намеренно в футере страницы, если не нашли ее в шапке. Поэтому важно убедиться, что вы предоставили посетителю достаточно информации перед тем, как он покинет сайт.
Во время тестирования сайта в компании UserTesting заметили, что размещение призыва к действию (CTA) в подвале помогло повысить конверсию на 50% за двухнедельный период!
Компания SmartInsights также сообщила, что они увидели почти 24% рост конверсии продаж, после оптимизации нижнего колонтитула своего сайта. Доработка подвала заключалась в грамотной перелинковке. Как ее сделать разберемся далее в одноименной главе.
Что разместить в футере сайта
На самом деле в подвале можно разместить много элементов. Однако обычно ограничиваются несколькими внутренними ссылками и кнопками соц. сетей. Важно найти баланс между функциональностью и простотой. Далее говорим, что можно использовать в подвале и приводим качественные примеры.
3 обязательных элемента
В каждом подвале должны быть 3 вещи:
3 обязательных элемента на примере www.healthline.com
Адрес
Зачастую страницы специально листают до конца, чтобы найти контакты. Поэтому контактную информацию правильно размещать не только в шапке, но и в подвале. Кроме того, если вы указываете адрес у регионального сайта, то это позволяет безболезненно (без переспама) продублировать вхождение названия города.
Карта
В дополнении к адресу в подвале может размещаться карта. Это позволит задержать посетителя на сайте и не перенаправлять его на сторонние ресурсы. Однако следите, чтобы из-за карт не пострадала скорость загрузки сайта.
Карта сайта на примере 24stoma.ru
Обратная связь
Хорошей практикой считается размещать телефон для связи в подвале. Причем не просто текстом, а ссылкой, чтобы можно было сразу перейти в номеронабиратель с портативных устройств.
Кроме того можно использовать и другие средства связи: Viber, WhatsApp, электронную почту.
Способы обратной связи в подвале на примере 63plitka.ru
CTA (Call to action)
В подвале должны быть кнопки или лид-формы, побуждающие совершить действие.
Перелинковка
Включайте только самые важные страницы или разделы в качестве ссылок в подвале. Это могут быть основные/популярные разделы (меню) в вашем интернет-магазине, страницы с акциями и другие ссылки, которые могут заинтересовать посетителей. Для простоты восприятия разделяйте ссылки на столбцы.
Социальные кнопки
Кнопки на соц. сети размещают или в шапке сайта, или в подвале. Также можно указывать количество подписчиков для подтверждения вашей социальной популярности.
Кнопки соц. сетей в футере на примере www.mi.com
Преимущества
Подвал это отличное место, чтобы похвастаться вашими достижениями. Это поможет зарекомендовать себя с лучшей стороны. Используйте для этого небольшие графические баннеры. Они могут быть статическими (информация не обновляется) и динамическими в виде виджетов (данные обновляются).
Примеры статических
Примеры динамических (виджетов)
Виджет курса валют будет очень кстати в некоторых тематиках. Например, для агрегаторов туров или для интернет-магазинов.
Курс валют в футере на примере www.teztour.ua
Виджет он же «Бейдж с рейтингом организации на сайт» от Яндекса. Мало того, что показывает ваш актуальный рейтинг на Яндекс.Картах, так и позволяет быстро оставить отзыв на сайт.
Рейтинг организации в футере на примере greencardamon.ru
Виджеты оценок и отзывов других сервисов повышают доверие к ресурсу.
Так же можно использовать виджеты погоды. Обычно их применяют на сайтах отелей.
Виджет погоды в футере на примере voschod.ru
Кроме этого на информационных порталах могут размещаться счетчики посещаемости. Они так же позволяют повысить доверие к ресурсу.
Виджеты посещаемости в футере на примере www.fontanka.ru Логотип
Логотип
Размещайте логотип со ссылкой на главную страницу сайта. Так вы повысите узнаваемость бренда и упростите навигацию по сайту.
Логотип в подвале на примере www.belcantofund.com
Возраст домена
Часто в подвале размещают информацию о возрасте сайта. Это может быть неким плюсом в плане доверия к ресурсу, если он имеет почтенный возраст. Однако если вы забудете проставить актуальный год, то сайт будет выглядеть заброшенным, что плохо.
Поэтому используйте простую PHP функцию для вывода актуального года автоматически:
Возраст домена в подвале на примере www.cvz.ru
Мобильные приложения
Ссылки на скачивание мобильных приложений как нельзя кстати разместить в подвале сайта.
Ссылки на приложения в подвале на примере www.svyaznoy.ru
Текст в подвале
В некоторых тематиках, например в медицинской, стоит указывать текст об отказе от ответственности. Это особенно актуально, когда Google стал очень жестко относиться к E-A-T тематикам.
Также в нижнем блоке может размещаться небольшой текст-информация о сайте.
Описание сайта в подвале на примере www.pepper.ru
В качестве текстовой информации может быть график работы. Актуально для интернет-магазинов, клиник и других коммерческих сфер.
График работы в подвале на примере www.sfe.ru
Способы оплаты
Для интернет-магазинов полезно размещать способы оплаты для наглядности в виде иконок.
Иконки способов оплаты в подвале на примере shop.megafon.ru
Ссылки в подвале сайта
Часто SEO-компании или разработчики размещают обратную ссылку на свой сайт. Отличное место для рекламы? Спросите у Тильды. Кстати говоря, SEO-эффект таких ссылок уже невелик. Раньше их могли использовать для серьезного прокачивания ссылочной массы, но это в прошлом.
Карта сайта в подвале
Раньше на большинстве сайтов была карта сайта. Ее обычно размещали как раз в подвале сайта, чтобы ссылка была на нее сквозная. Якобы карта сайта помогает поисковым роботам лучше понять структуру сайта. Но на текущий момент это скорее рудимент, чем реальное средство.
Что еще?
Строка поиска по сайту. Обычно ее размещают в шапке сайта, но можно продублировать и нижнем колонтитуле.
Строка поиска в подвале на примере www.vo-da.ru
Популярные посты. Это поможет подогреть интерес к вашим статьям.
Популярные публикации в подвале на примере ahrefs.com/blog/
Используемые бренды, партнеры.
Бренды в подвале на примере www.walmart.com
Рекомендации по футеру
Мы рассмотрели основные элементы подвала сайта, которые могут быть полезными для посетителей. Их получилось достаточно много и теперь важно выбрать наиболее подходящие именно вам. Оформление же футеров ограничивается только вашей фантазией. Кроме этого:
Примеры качественных подвалов
Пора рассмотреть примеры красивых дизайнов футеров, в которых применены ранее описанные элементы и рекомендации. Их можно рассматривать в качестве шаблона для своего подвала + добавить что-то от себя.