Футер в веброзробці: анатомія та дизайн

Футер у веброзробці — що має бути, типові помилки та поради для верстки.

Кожен вебдизайнер знає — футер footer це частина будь-якого сайту. У кожного свій стиль. Я особисто люблю верстати футер під час роботи з клієнтами. Щось у цьому є — маленька деталь, але зробити її добре приємно.

У футері зазвичай є: рік і копірайт, логотип, навігація, кнопки соцмереж, форма підписки і короткий опис сайту. Здається просто, але насправді є про що поговорити.

Чому футер взагалі важливий

Більшість людей думає так: зробив хедер, зробив контент, а футер — це просто щоб сторінка не обривалась. Але це не так. Футер — це те, що бачить людина коли дочитала до кінця. І в цей момент вона або йде з сайту, або шукає щось ще: контакти, соцмережі, інші розділи.

Якщо футер порожній або захаращений — людина просто закриває вкладку. Якщо там все на своєму місці — вона може написати, підписатись, перейти в портфоліо. Тобто добре зроблений футер реально працює, хоча про нього рідко думають саме так.

Є ще одна причина не ігнорувати футер — SEO. Посилання у футері індексуються пошуковиками. Якщо там є посилання на важливі розділи сайту — це допомагає пошуковому роботу краще зрозуміти структуру. Але не треба пхати туди все підряд — Google це вже давно вміє розрізняти.

Що має бути у футері

• Логотип або назва — людина долистала до кінця і знову бачить хто це все зробив.
• Короткий опис — буквально одне-два речення. Чим займається компанія або сайт.
• Навігація — посилання на основні розділи. Щоб не гортати назад до шапки.
• Контакти — пошта, телефон. Хтось саме тут шукає як зв'язатись.
• Соцмережі — тільки ті, де ви реально є і щось публікуєте.
• Форма підписки — якщо є розсилка, футер для неї ідеальне місце.
• Копірайт — рік, назва, посилання на політику конфіденційності.

Приклад футеру

Ось як це виглядає на практиці:

Типові помилки при верстці футера

Занадто багато посилань. Це найчастіша помилка. Клієнт каже "додай всі сторінки в футер" — і ти додаєш. В результаті там 40 посилань, які ніхто не читає. Краще вибрати 10-15 найважливіших і зробити нормально, ніж звалити все в купу.

Не перевірили на телефоні. Чотири колонки на десктопі — нормально. Ті самі чотири колонки на смартфоні — суцільна каша, де текст налазить один на одного. Завжди перевіряйте як футер виглядає на вузьких екранах. Адаптивний дизайн — це не опція, а обов'язок. В ідеалі колонки мають складатись в один стовпчик.

Застарілий рік. Сайт зробили у 2022, а в футері досі "© 2022". Маленька деталь, але одразу видно що за сайтом ніхто не слідкує. Можна написати "2022–2026" або просто оновлювати раз на рік.

Іконки соцмереж куди попало. Поставили Facebook, Instagram, Twitter, TikTok, YouTube — а реально ведуть тільки один. Людина клікає на решту і бачить або порожній профіль, або взагалі чужий акаунт. А буває ще гірше — акаунт є, але остання публікація була два роки тому. І людина думає: "А вони взагалі ще працюють? Чи вже закрились?" Це серйозно відлякує клієнтів. Соцмережі у футері — це сигнал що ви живі, активні і готові спілкуватись. Тому ставте тільки ті акаунти, за якими ви реально стежите і де відповідаєте на коментарі та повідомлення.

Нечитабельний текст. Сірий текст на темно-сірому фоні, розмір 10px. Копірайт — це звичайно дрібне, але хоч щось має бути видно. Не треба робити його величезним, але і зовсім ховати теж не варто.

Футер відірваний від решти сайту. Буває що дизайнер вибирає для футера інші шрифти, інші відступи, інший стиль — і футер виглядає як вставка з іншого проєкту. Він має бути частиною загального дизайну, а не окремою штукою знизу.

Темний чи світлий футер — що краще

Немає правильної відповіді. Темний футер зараз популярний тому що він добре відділяється від основного контенту — людина одразу розуміє що сторінка закінчилась. Але це не означає що треба завжди робити темний.

Є сайти з білим футером, з кольоровим, з текстурою — і вони виглядають чудово. Головне щоб це пасувало до загального стилю. Якщо весь сайт світлий і мінімалістичний — темний футер може виглядати як чужорідне тіло. А може і добре спрацювати. Дивіться по ситуації.

Добірка прикладів футерів з відомих сайтів

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

Apple (apple.com) — класичний мінімалізм. Кілька колонок з посиланнями на продукти, підтримку та магазин. Дрібний копірайт внизу — і нічого зайвого. Жодних соцмереж чи форм підписки. Але Apple може собі це дозволити.

Linear (linear.app) — дуже чистий тех-мінімалізм. Логотип, короткі колонки з посиланнями (Product, Resources, Company), копірайт і юридичні посилання. Нічого не відволікає.

Vercel (vercel.com) — сучасний тех-мінімалізм. Логотип, лаконічні колонки з посиланнями на рішення та ресурси, перемикач мови. Повністю відповідає чистому стилю сайту.

Notion (notion.so) — чистий футер з великим логотипом, кількома колонками посилань і перемикачем мови. Просто, чисто, без зайвого.

VSCO (vsco.co) — чистий фон, чіткі колонки з посиланнями, мінімальний текст. Стильний і лаконічний футер, який не відволікає від візуального контенту.

Amazon (amazon.com) — один з найщільніших футерів, але добре організований. Десятки колонок з категоріями, сервісами та країнами. Багато посилань, але все розкладено по поличках.

Buffer (buffer.com) — простий і легкий футер. Логотип, ключові короткі посилання, соцмережі та копірайт. Великі відступи, нічого зайвого.

Airbnb (airbnb.com) — кілька колонок з логічними блоками (гості, господарі, партнери, компанія). Внизу — вибір мови, валюти, іконки соцмереж і копірайт. Структуровано і зручно.

Загальне що об'єднує всі ці футери — чіткість. Нічого зайвого, все на своєму місці. Беріть це за орієнтир.

Що ще варто знати

Футер не обов'язково має бути нудним. Деякі студії додають туди щось несподіване — смішний підпис, маленьку анімацію, цитату. Це не обов'язково, але якщо хочеться — чому ні. Головне щоб це не відволікало від корисного контенту.

І останнє: долистайте до кінця кількох сайтів, які вам подобаються. Подивіться що вони роблять у футері — що є, чого немає, як розміщено. Це краще за будь-яку теорію. За годину такого перегляду навчишся більше ніж з десятка статей.

Футер бачать всі, хто дочитав до кінця. А це саме ті люди, яким цікаво. Не підводьте їх. Зробіть футер так, щоб не було соромно.