Все, что вам нужно знать о дизайне футера на лендинге. Как с помощью CSS прижать footer к низу окна браузера Пример оформления контактных данных в футере

Футер - нижний блок страницы веб-сайта, последний по счету, но не по важности. То, что футер или “подвал” сайта, как его еще называют, расположен на дне страницы, совсем не значит, что он содержит неважную информацию, и к нему мало кто “добирается”. Но в то же время эту часть страницы не стоит перегружать лишними данными. Что же лучше включить в футер и как сделать его максимально функциональным?

Недавно мы прошлись по сайтах 50-ти украинских интернет-магазинах и оценили их футеры по нескольким параметрам, среди которых - количество ссылок, наличие ссылок на аккаунты в соцсетях или подписки на рассылку. Сайты выбирались случайно, но мы старались захватить разнообразные сферы онлайн-продаж, например: электронику и бытовую технику, fashion, косметику и парфюмерию, товары для детей, продукты питания, стройматериалы, маркетплейсы, шопинг-клубы и т.д. В список исследуемых нами интернет-магазинов попали как лидеры своих отраслей, так и новички.

Полезные ссылки

Среднее количество ссылок, содержащихся в просмотренных нами футерах, - 21.

Наименьшее количество активных ссылок мы насчитали у интернет-магазина PARFUMS.UA - 5 ссылок, не считая кнопки “Вверх”.

У сайта компании PARFUMS.UA мы насчитали наименьшее количество ссылок: странички магазина в социальных сетях и контактная информация.

Наибольшее количество ссылок, целых 86, мы насчитали у другого интернет-магазина косметики и парфюмерии MakeUp.com.ua. Здесь, кроме строки подписки на рассылку, есть и ссылки на категории и подкатегории, и на контакты, информацию о доставке, новости, статьи и профили в социальных сетях и прочее.

Большинство сайтов, по которым мы прошлись, использовали футер как блок для полезной информации для посетителя, которому интересно узнать больше о магазине и о том, как он работает. Многие сайты включили в футер, например, ссылки на политику конфиденциальности, правила пользования сайтом и т. п.

Линк на страницу “О нас” в футер включили 88% сайтов, которые мы исследовали. И еще 88% - линк на страницу с контактами или непосредственно сами контакты. Только у 22% сайтов в футере можно найти ссылки, по которым пользователь мог бы в той или иной степени получить облуживание от компании. Ссылки на информацию о доставке и оплате и/или условиях возврата в футер включили 56% всех просмотренных нами сайтов.

Копирайт. Защита прав

Значок присутствует в футерах 76% проанализированных нами интернет-магазинов.

На сайте интернет-магазина гаджетов и аксессуаров “Цитрус”, как и на многих других сайтах, присутствует знак защиты авторских прав.

По правилам после значка следует имя правообладателя и период времени действия копирайта. Хоть появившийся на сайте уникальный контент по умолчанию попадает под действие закона об авторском праве, и ставить не обязательно, большинство веб-мастеров все-таки добавляют этот значок в футер сайта.

На сайте интернет-магазина строительных материалов “СтройМАГ” рядом со знаком копирайта использована фраза “Все права защищены”.

Кроме того, вместе со знаком копирайта многие сайты также используют фразу “Все права защищены”, которая значит, что у них есть доказательства авторства, которые в случае чего они могут предъявить. Таким образом владельцы сайтов стараются наверняка предупредить копипастеров, что воровать нехорошо.

Социальные сети и прочий маркетинг

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

Целых 92% исследованных футеров содержали ссылки на аккаунты в социальных сетях. Это самый популярный элемент среди футеров проанализированных нами сайтов.

Например, футер сайта цветочного интернет-магазина “Квитер”, как и футеры большинства просмотренных нами сайтов, содержит ссылки на свои аккаунты в популярных социальных сетях.

34% интернет-магазинов включили в свои футеры строку для подписки на e-mail- или sms-рассылку. Некоторые обещают за подписку приятные бонусы вроде купона на определенную сумму.

Например, в интернет-магазине одежды Answear подписку меняют на 300 грн. на покупку.

30% проанализированных футеров включали также ссылки на ту или иную форму маркетингового контента. Чаще всего это были ссылки на блог, статьи, видео-обзоры и т. п.

Вакансии

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

Неожиданные наблюдения

Такой, казалось бы, подходящий для футера элемент, как карта сайта, мы встретили всего у 30% интернет-магазинов.

Знаки доверия, например, значок гарантии безопасной покупки, в футер включили всего 4 интернет-магазина из всех 50-ти.

В футере сайта шопинг-клуба BonPrix можно найти значок, обещающий безопасную покупку.

Иконки методов оплаты в футере использовали также небольшое количество интернет-магазинов - всего 18%.

Ваш футер

Этот скромный анализ 50 футеров случайно выбранных интернет-магазинов, конечно, не научное исследование. И цифры, которые мы получили, вряд ли можно применять к отрасли e-commerce в целом. Если, согласно нашему анализу, 54% интернет-магазинов включили номера телефонов в свои футеры, это не значит, что 54% всех e-commerce-сайтов делают то же самое.

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

Здравствуйте, уважаемые друзья и гости блога! Сегодня пойдет речь о создании сайта, вернее сказать о его одной составляющей — Подвал сайта , по научному Footer HTML или просто footer. Не смотря на то, что это самая мало видимая часть сайта и мало кто на нее обращает внимание, это на первый взгляд так кажется и многие так думают. И вот из-за этого многие частенько пренебрегают оформлением подвала сайта, что в корне не верно и не правильно!

Так как подвал сайта такая же его важная часть, как шапка и тело или по правильному — header и body. Вот и давайте сегодня займемся тем, что оформим как подобает хорошему сайтостроителю свои подвалы сайтов, а я вам в этом постараюсь помочь!

И так, начнем с самого начала...

Что такое подвал сайта или Footer HTML?

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

И не прав тот, кто думает, что в подвал сайта заходит мало посетителей, в корне не прав!

И исходя из этого, нужно уделять не меньше внимания подвалу сайта, чем его, на первый взгляд, более видимым частям, как тело и шапка сайта. Хоть я и повторяюсь, но думаю, что не зря. Это я пытаюсь таким образом объяснить вам всю значимость и важность должного оформления подвала сайта!

Как правильно оформить подвал сайта?

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

Это первый подвал сайта :

Это второй подвал для сайта :

Это третий подвал для сайта :

Это четвертый подвал для сайта :

Это пятый подвал сайта :

Это шестой подвал сайта :

Ну, как Вам эти Footer HTML? Понравился хотя бы один из них? Я надеюсь, что да?!

Если они вам понравились, тогда я предлагаю скачать их совершенно бесплатно прямо сейчас и использовать в своих целях!

В папке, которую Вы скачали содержится шесть файлов с Footer HTML. И вам остается только исправить в текстовом редакторе содержание под свой сайт и все!

К стати о текстовом редакторе! Я например пользуюсь,и вам советую, только . Так как он самый удобный и безопасный!

Вот теперь все. Спасибо за внимание!

На показатели конверсии оказывает влияние множество факторов - это и юзабилити, и визуальное оформление. Футер сайта (footer или «подвал»), несмотря на то, что он находится в нижней части страницы и практически всегда невидим на первом экране, так же имеет большое значение.

При создании интернет-магазина необходимо уделить ему не меньшее внимание, чем другим элементам и сделать его максимально содержательным.

Оформление

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

Навигация по сайту

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

Ссылки на страницы

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

Контактная информация

Чаще всего в футер добавляется контактная информация, ссылки на страницы в социальных сетях, иногда даже карта с отметкой расположения интернет-магазина (или пункта самовывоза). Такая информация повышает доверие посетителей.

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

Не стоит добавлять в подвал сайта лишней информации - например, реквизиты компании (ИНН, ОГРН и т.д.) лучше оставить для страниц «О компании» или «Контакты».

Для начала покажу Вам результат сегодняшнего поста. Футер будет небольшим, и будет иметь лишь одну строчку текста

Проблемы при реализации футера

Если футер это низ станицы, то в чем же проблема реализовать его? Ведь можно просто сделать продолжение нашей главной таблицы и вставить в него всю нужную информацию! Да так и есть, такой подход применим в 99% случаев реализации сайтов, но есть одна маленькая проблема встречающаяся в 1% случаев.

Вот схематично изображенный браузер

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

Но что будет если высота сайта не такая большая, что бы создать вертикальный скролл?

Как видите получается печальная картинка. Футер в такой ситуации является не низом страницы, а центром. Как же это исправить?

Есть два варианта:

• Плюнуть на то, что футер появляется в центре, ибо в 99% случаев сайт имеет достаточную высоту, что бы футер появлялся там где надо.
• Прибегнуть к иному способу реализации футера

Сегодня мы будем рассматривать второй вариант Способов реализации футера много, но есть одно но! Все способы, что я пробовал не работают при условие, что наша главная область сайта имеет стиль . Но не все так страшно

Теория реализации футера

Что я предлагаю? Я предлагаю использовать jquery . С помощью нее мы можем узнать высоту браузера, или любого другого объекта на нашем сайте. Для чего это нужно? Так как футер будет являться абсолютно позиционированным объектом (иметь стиль position:absolute;) то высота рабочей области, или же высота главной таблицы, позволит нам узнать на сколько сдвинуть, по верху (стиль top), нашу футер область!

Думаю ясно как мы будем реализовывать наш подвал

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

Создаем футер >Редактируем стиль таблицы

Для начала нам необходимо подправить стиль нашей главной таблицы.

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

Открываем пользовательский style.css, находим класс table (.table{...}) и правим вот так

Table
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
padding-bottom:50px;
z-index: 1;
}

Я добавил стиль padding-bottom:50px;, то есть сделал пространство, между концом таблицы и концом окна браузера, размером в 50 пикселей. Для подвала который я задумал (скрин на результат в начале поста) этого места будет предостаточно, если Вы задумали футер куда больше чем мой, то ставьте столько пикселей сколько Вам надо!

>Редактируем главный шаблон

Открываем пользовательский index.html и перед

вставляем наш футер

Работает на RS-BLOG v2 | При копирование материал с даного блога не забывайте выкладывать ссылку на источник - rsblog.ru

Поясню некоторые стили которые тут используются

• display:none; - Наш подвал будет появляться пользователю только после того как загрузится вся страница, до этого момента футер видно не будет!
• left:50%;margin-left:-390px; - Эти два стиля позволяют позиционировать футер ровно в центре браузера.
• text-align:center; - позволяют разместить текст, содержащийся в блоке, по центру.

>Подключаем jquery и js.js

Для начала ее необходимо скачать. Заходим вот по этой ссылке и жмем сюда

Откроется код, выделяем его весь и копируем в блокнот. В блокноте жмем Файл -> Сохранить как

Вводим имя (jquery.js) файла обязательно с.js

и сохраняем в пользовательской папке templates. Теперь у нас в папке с движком есть необходимый нам файл. Так же стоит создать файл js.js (пока пустой файл). В нем мы будем скоро писать функцию отображение футера. Вот как выглядит сейчас содержимое папки templates

Я, если мне память не изменяет, записывал видео урок где подключал jquery немного другим способом, если интересно, то можете посмотрите

Теперь осталось подключить js файлы к нашему блогу. Для этого открываем пользовательский index.html и после сточки