Как сделать подвал сайта: Прижатый подвал, 5 способов | htmlbook.ru

Как сделать подвал сайта html css

Подвал страницы

В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).

Рис. 6.10. Трава отображается поверх границы

Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).

а. Висящий подвал

б. Подвал прижат к краю

Рис. 6.11. Разновидности подвала

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

Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0 .

Рисунок с травой специально выполнен узким и имеет высоту 27 пикселов, что явно недостаточно для высоты нашего подвала, поэтому дополним рисунок тем же фоновым цветом #e2ed9c. Для этого добавим слой с именем footer-bg и для него укажем необходимый цвет фона.

Код HTML будет простым.

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

Здесь к ширине контента ( width ) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin , добавляемого к селектору P . Код для создания подвала и текста:

Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег <img> , а чтобы управлять его положением поместим рисунок в <div> с классом lion . Впрочем, этот класс можно также установить напрямую тегу <img> . Окончательный код нашего подвала представлен в примере 6.16.

Пример 6.16. Код подвала

Положение льва укажем с помощью позиционирования. Для этого родительскому элементу <footer> следует указать свойство position как relative , а элементу lion как absolute . В таком случае свойства left и top управляют координатами относительно родителя, т.е. <footer> . Однако здесь есть одна сложность, <footer> занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50% , что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.

Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.

Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.

К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto . Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.

Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.

Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.

Стиль для подвала приведён в примере 6.17.

Пример 6.17. Стиль подвала

Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY . Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.

HTML тег <footer>

Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).

В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.

Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.

Синтаксис

Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.

Как создать статический футер с помощью HTML и CSS

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

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.

Требования

Чтобы выполнить эти инструкции, вам следует подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

В качестве контента для футера мы используем несколько значков социальных сетей. Если вы тоже хотите использовать эти значки, загрузите их и сохраните в папке images как:

Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. Сохраните изображения с указанными именами.

После этого вы можете приступать к работе.

Создание класса для оформления футера

Сначала мы определим класс footer, добавив следующий фрагмент кода в конец файла styles.css:

Сохраните файл styles.css. Как всегда, новый раздел кода начинается с комментария (/* Footer */). Затем мы определяем класс footer и объявляем несколько правил стиля. Первое правило объявляет параметр position со значением fixed, что означает, что элемент не будет перемещаться из указанного вами расположения, когда пользователь будет прокручивать страницу вниз. Это расположение задается следующими двумя объявлениями: bottom:0 и left:0 – 0 пикселей слева и 0 пикселей снизу области просмотра браузера.

Откорректировав эти значения, вы можете изменить расположение элемента на странице. Однако помните: любое значение, кроме нуля, должно включать суффикс px после числа. В наборе правил также указаны ширина, высота и цвет фона класса footer.

Добавление футера на страницу

Чтобы добавить контент для футера, мы создадим новый контейнер <div> и присвоим ему только что созданный класс footer. Вернитесь в файл index.html и вставьте следующий фрагмент кода после последнего закрывающего тега </div>:

Сохраните файл index.html и загрузите его в браузере.

Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему руководству Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).

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

Теперь можно добавить контент – сделаем это в следующем разделе руководства.

Добавление и оформление контента футера

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

Вернитесь к styles. css и добавьте следующий фрагмент кода в конец файла:

Давайте подробно рассмотрим каждый из созданных нами наборов правил:

• Первый набор определяет класс footer-text-left, который будет использоваться для стилизации текста меню. Обратите внимание, свойство float имеет значение left – следовательно, текст, оформленный по этому классу, будет размещен в левой части страницы. Свойство word-spacing предоставляет дополнительное пространство между элементами меню. Однако если какой-либо из пунктов вашего меню состоит из более чем одного слова, вам нужно создать класс для стилизации пунктов меню (недостаточно просто изменить значение интервала между словами).
• Второй набор правил использует псевдокласс hover, чтобы сделать желтым цвет фона того текста, на который пользователь наводит курсор.

Теперь давайте пропишем в файле index.html пункты меню. Вставьте следующий выделенный фрагмент кода в контейнер footer, который вы создали ранее:

<a href=»https://css. sammy-codes.com/about.html» >about</a>

<a href=»https://css.sammy-codes.com/credits.html» >credits</a>

Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.

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

Добавление значков социальных сетей

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

Остановимся на этих правилах подробнее:

• Первый набор правил определяет класс footer-content-right и присваивает определенные значения его внутренним полям, внешним отступам и выравниванию (padding, margin и float соответственно). Этот набор правил нужен для стилизации элемента <div>, который будет содержать значки социальных сетей.
• Второй набор создает класс icon-style, который задает высоту и внешние поля для значков социальных сетей, учитывая их размер и расположение.
• Третий набор правил использует псевдокласс hover, что изменит цвет фона значка на желтый при наведении курсора.

Сохраните файл styles.css. Теперь давайте добавим значки в футер. Вернитесь в свой файл index.html и добавьте следующий фрагмент кода после последнего закрывающего тега </a>:

<a href=»https://www.8host.com/blog/»><img src=»https://www.8host.com/blog/kak-sozdat-staticheskij-futer-s-pomoshhyu-html-i-css/images/github.jpeg» alt=»Github icon»></a>

<a href=»https://www.8host.com/blog/»><img src=»https://www.8host.com/blog/kak-sozdat-staticheskij-futer-s-pomoshhyu-html-i-css/images/twitter.jpeg» alt=»Twitter icon»></a>

<a href=»https://www.8host. com/blog/»><img src=»https://www.8host.com/blog/kak-sozdat-staticheskij-futer-s-pomoshhyu-html-i-css/images/email.jpeg» alt=»Emailicon»></a>

Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.

Этот фрагмент кода создает контейнер <div>, которому присваивается класс footer-content-right. Внутри этого контейнера div находятся три значка социальных сетей, вставленные с помощью HTML-тега <img>; с помощью тега HTML <a> каждое изображение поддерживает ссылку на соответствующую соцсеть.

Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.

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

Заключение

Мы добавили статический футер, который всегда отображается в нижней части области просмотра, когда посетитель прокручивает страницу вниз. Вы можете продолжить изучение возможностей CSS, изменив значения в созданных нами классах или добавив в файл index.html новый контент.

Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.

CSS можно изучать бесконечно, но описанные в этой серии методы обеспечат вам прочную основу для развития ваших навыков работы с CSS и подготовят вас к изучению других инструментов (таких как JavaScript) и фреймворков (как, к примеру, Tailwind). Также у вас теперь есть все файлы и папки, необходимые для развертывания готового веб-сайта в облаке.

Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать:

Рекомендации по оформлению подвала сайта

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

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

Основные функции подвала сайта:

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

Что разместить в подвале сайта

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

Ссылки на разделы сайта

Рекомендуем продублировать основные разделы из шапки сайта и указать дополнительные ссылки. Например, если в шапке сайта был раздел «Услуги», то в подвале сайта можно перечислить список услуг:

Если услуг много (больше 10), то лучше показать только самые популярные или разделить их на группы по направлениям:

Добавление ссылок в подвале сайта помогает в продвижении сайта, а именно в индексировании страниц поисковыми роботами. Также ссылки будут служить в качестве внутренней перелинковки страниц.

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

Указываем основную информацию о компании, причем гораздо подробнее, чем в шапке сайта. Стоит указать номер телефона, ссылки на чаты в мессенджерах (если используете их в работе с клиентами), режим работы, email, адрес (можно со ссылкой на схему проезда), реквизиты компании:

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

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

Форма заказа обратного звонка

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

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

Авторские права

Копирайт (Copyright) позволит заявить об авторских правах, а также показать актуальность информации на сайте. Также стоит добавить рядом описание правил копирования материалов. Конечно же, простая надпись не убережет от копирования текстов и изображений, но может стать аргументом в суде.

Правильно указывать символ © + название компании или имя автора + год создания + текст о правилах использования информации с сайта:

Подробнее об авторском праве и как защитить свой контент.

Политика конфиденциальности

Если на сайте собираются персональные данные пользователей, например, в той же форме заказа обратного звонка, то компании необходимо обеспечить безопасность сбора, хранения и обработки персональных данных (152-ФЗ «О персональных данных»). Одно из требований закона 152-ФЗ «О персональных данных» – публикация на сайте документа о Политике конфиденциальности, ссылку на который лучше всего разместить в подвале сайта. Подробнее о том, какие требования предъявляются к сайту и как их грамотно выполнить, в данном материале.

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

Рассмотрели базовый набор элементов, а теперь давайте обсудим что еще можно разместить в подвале сайта.

Ссылки на соцсети

Вернее, ссылки на аккаунты компании в соцсетях. Очень часто при разработке владельцы забывают проверить ссылки на корректность и оставляют на общие страницы сервисов. Надеемся, вы этой ошибки не допустите. =)

Иконки лучше оформлять в едином стиле и размещать в линию или плиткой (зависит от количества свободного места):

Ссылки на мобильные приложения

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

Ссылка на личный кабинет

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

Информация о партнерах

Такая информация поможет сориентироваться клиентам, а также повысит доверие к ресурсу. Важно, чтобы ссылки на партнеров располагались отдельно от основной информации в подвале сайта:

Награды и достижения

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

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

Отзывы клиентов

Если у вашей компании много отзывов на известных сервисах Яндекс.Маркет, Flamp, 2gis и т.д., то рекомендуем в подвале сайта добавить ссылки на них. Такой прием также работает на повышение лояльности посетителей сайта к ресурсу.

Тексты отзывов лучше размещать только в основной части страницы, в подвале сайта они будут нечитабельны.

Форма подписки на рассылку

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

О том, как сделать крутую форму подписки на рассылку, рассказали здесь.

Кнопка «вверх»

В десктопной версии кнопку «вверх» стоит располагать в правом нижнем углу со второго экрана прокрутки страницы вниз, а вот в мобильной версии лучше показать над подвалом сайта. Это поможет не перегружать экран мобильного устройства лишними кнопками.

Форма поиска

Если у вас большой интернет-магазин и сервис услуг, то в целом рекомендуем добавить форму поиска на сайт. Полезно добавить форму поиска в подвале сайта, но как дополнение к форме в шапке сайта.

Как лучше оформить и где разместить на сайте форму поиска, рекомендуем прочитать в этой статье.

Способы оплаты

Информация полезна для интернет-магазинов, чтобы сориентировать пользователей. Достаточно кратко перечислить основные платежные системы, можно показать иконки платежных систем, как в примере:

Что не стоит размещать в подвале сайта

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

Текст или видео о компании

Лучше данную информацию разместить кратко на Главной странице или более подробно на странице о компании. Этого будет достаточно. Например, в примере ниже видео не сразу заметно и не ясно, о чем оно:

Дополнительные материалы: о чем стоит рассказывать на Главной странице и чем наполнить страницу о компании.

Анонсы статей, новостей или посты из соцсетей

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

В данном случае разработчики попытались показать анонсы статей компактно, но в итоге они стали совсем незаметны:

А вот хороший пример отдельного блока с анонсами новостей для Главной страницы, которыЙ привлекательно показывает материалы:

Карта со схемой проезда

Если у вас лендинг или тематика сайта, где важно сориентировать клиентов о вашем месте положении, то карта со схемой проезда необходима на сайте. Но лучше размещать ее над подвалом сайта, а не в нем.

Взгляните на пример – тут карта в подвале сайта на самом деле не помогает пользователю разобраться, где находится офис компании, так как она слишком маленького размера:

Хороший пример размещения карты сайта отдельным блоком:

Оформление подвала сайта

Несколько советов, как лучше оформить подвал сайта, чтобы он лаконично смотрелся на сайте.

• Выделяйте блок цветным фоном. Так пользователь его сразу отличит от основной части страницы и зафиксирует взгляд на нем. Цвет фона должен сочетаться с шапкой сайта и другими цветами на вашем ресурсе. Пример цветного фона для футера, который хорошо выделяет его и вписывается в дизайн сайта.

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

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

Выводы

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

Если вам нужна помощь в проработке футера, то смело обращайтесь к нам за юзабилити-аудитом – поможем найти и исправить все недочеты.

Как сделать подвал сайта (footer): варианты дизайна, зачем он нужен, советы

09. 01.2019 Комментарии к записи Как сделать подвал сайта (footer): варианты дизайна, зачем он нужен, советы отключены 717 Просмотров

Разработчики часто упускают из виду, что footer для сайта (перевод с англ. футер/подвал) является одним из базовых его элементов. Он может дать более полную информацию о компании, а также выполняет разные полезные функции: облегчает навигацию, помогает сориентироваться посетителям веб-проекта и пригодится в некоторых коммерческих целях.

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

Пост состоит из трех частей:

Зачем вообще нужен подвал?

1. Он зрительно завершает блок контента

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

2. Помогает владельцу площадки совершать «лиды» (продажи, действия)

Пусть все увидят, что после контента веб-проект не заканчивается. Размещайте там любой подходящий вариант для обратного контакта: Email-почту, форму связи или просто ваш адрес. Эти дополнительные детали помогут читателям сделать «следующий шаг» и позвонить/написать вам.

3. Footer содержит полезные сведения

Имеете больший объём информации, что не получается поместить на странице? — в таком случае она легко добавляется в «подвале». Это могут быть любые внешние линки на полезные ресурсы, ваших партнеров или коллег.

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

4. Он направляет посетителей веб-сайта

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

5. Для привлечения внимание

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

Десять вариантов веб-дизайна футера

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

1. Лаконичность

«Простота — это крайняя степень изощренности», — сказал Леонардо да Винчи. Чрезмерная «заполненность» футера не всегда свидетельствует о его информативности. Лучше сосредоточиться на нескольких (не более трёх) элементах и сохранить его минималистичным и простым. Логично использовать следующую комбинацию: авторское право + логотип + кнопки социальных сетей. В наше время нельзя забывать о риске плагиата, поэтому привлечение внимания к копирайту всегда полезно.

2. Карта сайта

Этот элемент часто недооцениваются, так как мало кто им пользуется. Однако в отличие от упомянутого выше минималистского решения, здесь объемный футер с обширным числом рубрик/директорий служит несколько иным целям. Даже если читатели не найдут то, что им надо, — поисковики точно смогут: большой footer позволяет Google лучше индексировать страницы веб-сайта, что может положительно сказаться на его позициях в поисковой выдаче.

3. Форма обратной связи или рассылка

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

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

4. Дополнительная навигация 

Это решение поможет сориентировать тех, кто «потерялся» в вашем онлайн проекте. Если люди уже находятся на странице в самом низу, то скорее всего, так и не нашли то, что искали.

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

Вы можете оформить меню в виде табов, выпадающих списков или обычного перечня в несколько столбиков. Здесь необходимо предварительно определить самые важные или просто наиболее посещаемые разделы/страницы и сделать их достаточно видимыми.

5. Социальные сети

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

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

6. Призыв к действию (CTA)

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

7. Контактная информация, телефон, адрес

 

Чаще всего пользователи ожидают найти в подвале блок с контактами. Напишите там свой телефонный номер с кодом страны — это даст возможность поисковым системам понять, где конкретно работает бизнес/веб-ресурс. Желательно делать каждый линк кликабельным дабы любой человек смог быстро набрать указанный номер или отправить электронную почту прямо со смартфона (читайте как сделать ссылку на номер телефона в HTML в другом блоге).

Приведенный выше пример содержит только необходимую инфу, что в свою очередь не рассеивает внимание и не отвлекает на ненужные мелочи.

8. Использование карт

Размещение карты вселяет дополнительное доверие к бизнесу и заодно наглядно показывает, где находится офис компании. Это хороший способ поклонникам Google Maps быстрее найти ваш адрес. Эту фишку можно красиво встроить в шаблон, плюс она весьма эффективна для восприятия.

9. Пользовательские решения

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

10.  Без футера

Иногда можно отойти от классической структуры «шапка-контент-футер» и выделиться из «толпы» конкурентов, убрав данный элемент вовсе. Этот подход допускается для некоторых landing page или главной, сохраняя при этом стандартный шаблон в других веб-страницах. Так в скриншоте выше нет никакого нижнего блока с целью выделения ключевых акцентов.

Как сделать подвал сайта максимально эффективным

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

1. Определите основные компоненты

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

2. Определитесь с дизайном

• Выберите размер и количество разделов/столбцов. Оформляйте их с точки зрения важности (либо стандартов): контактная инфа, как правило, помещается в центре или в правом углу блока.
• При необходимости по аналогии с фиксированным меню с помощью HTML/CSS можно прикрепить footer к нижней части экрана браузера и «зафиксировать» его при прокрутке. Такая реализация встречается крайне редко, обычно он просто добавляется после контента.

3. Использование дополнительных элементов

• Вставьте социальные функции: виджет твиттера с последними постами, кнопки подписки на FB-страницу и др.
• Добавьте карты Google или любые другие сервисы.
• Соблюдайте общий стиль: посмотрите варианты шаблона в Bootstrap или WordPress, придумайте свое решение с нуля или вдохновляйтесь работами других дизайнеров.

Итого. В статье мы поделились с вами разными примерами и советами как сделать footer для сайта эффективным и полезным. Однако не спешите применять их все сразу, подумайте о вашей потенциальной ЦА, ее ожиданиях и предпочтениях — обязательно учитывайте все это в работе. Если будут какие-то вопросы/дополнения по теме, пишите ниже.

Веб-дизайндизайнеруНавигация и менюСтатьитенденции и тренды веб-дизайнаэлементы сайтаэффективный дизайнЮзабилити 2019-01-09

Как сделать нижний колонтитул в HTML

следующий → ← предыдущая В HTML мы можем легко создать нижний колонтитул в документе, который должен отображаться на веб-странице, используя два следующих различных метода: Использование HTML-тега Использование внутреннего CSS Использование HTML-тега Если мы хотим сделать нижний колонтитул в HTML-документе с помощью тега Html, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко просмотреть нижний колонтитул на веб-странице в браузере: Шаг 1: Во-первых, мы должны ввести код HTML в любом текстовом редакторе или открыть существующий файл HTML в текстовом редакторе, в котором мы хотим использовать HTML для создания нижнего колонтитула. <Голова> <Название> Сделать нижний колонтитул с помощью HTML-тега <Тело> Здравствуйте, Пользователь!…. Учебник по HTML Эта страница поможет нам понять, как сделать нижний колонтитул. И этот раздел поможет вам понять, как сделать нижний колонтитул с помощью HTML-тега. Вы находитесь на сайте JavaTpoint…. Шаг 2: Теперь мы должны поместить курсор в начало того текста, который мы хотим вставить в нижний колонтитул. Затем введите тег . <нижний колонтитул> Текст, который мы хотим вставить в нижний колонтитул. Шаг 4: И, наконец, мы должны сохранить HTML-файл, а затем запустить его в браузере. <Голова> <Название> Сделать нижний колонтитул с помощью HTML-тега <Тело> <заголовок> Учебник по HTML Эта страница поможет нам понять, как сделать нижний колонтитул. И этот раздел поможет вам понять, как сделать нижний колонтитул с помощью HTML-тега. <нижний колонтитул> @Copyright JavaTpoint 2020- Все права защищены. Протестируйте сейчас Вывод приведенного выше HTML-кода показан на следующем снимке экрана: Использование внутреннего CSS Если мы хотим сделать нижний колонтитул в HTML-документе с использованием таблицы внутренних каскадных стилей, нам нужно выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко сделать стильный футер: Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим использовать внутренний CSS для создания нижнего колонтитула. <Голова> <Название> Создайте нижний колонтитул, используя внутренний CSS и HTML <Тело> Здравствуйте, Пользователь!. … Учебник по HTML Эта страница поможет нам понять, как сделать нижний колонтитул. И этот раздел поможет вам понять, как сделать нижний колонтитул, используя внутреннюю каскадную таблицу стилей и HTML. @Copyright JavaTpoint 2020- Все права защищены. Шаг 2: Теперь мы должны поместить курсор в тег заголовка сразу после закрытия тега заголовка в документе Html, а затем определить начальный и закрывающий тег тега