Заглушка для сайта представляет собой отдельную страницу, показывающуюся пользователю в случаях, когда основной контент ресурса недоступен. С первого взгляда кажется, что создать подобную страницу несложно, однако при этом важно понимать, из каких элементов она должна состоять, чтобы не вызвать негатива у посетителей.
Зачем создавать страницу-заглушку?
Страница-заглушка HTML выполняет роль временной домашней страницы, которая сообщает посетителям о том, что ресурс временно недоступен.
Целей, ради которых устанавливается подобная страница, может быть несколько:
- На сайте проводятся технические работы, и необходимо уведомить пользователя о том, что это временно.
- Сайт находится на начальной стадии разработки, и страница-заглушка выполняет рекламную роль.
- Заглушка создана для домена, который выставлен на продажу.
В любом из этих случаев важно сохранить лояльность аудитории к ресурсу, поэтому на заглушке может содержаться соответствующий контент. Если у пользователя возникли какие-либо вопросы к руководству сайта, то подобная страница проинформирует, как с ним связаться.
Основные элементы страницы-заглушки для сайта
Перед началом проектирования страницы-заглушки важно определить, из каких элементов она должна состоять.
- Первое, что нужно понимать: недостаточно разместить надпись «На сайте ведутся технические работы» или «Сайт в разработке». Здесь важно уведомить посетителя о том, на какой именно ресурс он попал, указав название и логотип компании.
- Второе — это контактная информация, ее также обязательно следует указывать. Возможно, на сайт пришел потенциальный клиент и попал на заглушку. В этом случае, если нет контактов, он, вероятнее всего, покинет ресурс и обратится за помощью к конкурентам. Поэтому на заглушку следует опубликовать контактные данные.
- Не лишней будет публикация краткой информации о том, чем занимается компания. Здесь главное — не перегружать страницу данными, а указывать только ключевые направления.
- Говоря о предыдущем пункте, кроме текстовой и графической информации, можно опубликовать видеоролик о компании. В некоторых случаях это будет уместнее, к примеру, если информации много.
- На заглушку можно поставить форму для email-рассылки, но тогда следует замотивировать посетителя оставить свой контакт. Кроме прочей информационной рассылки, данную функцию часто используют для оповещения аудитории о том, когда сайт снова будет доступным для посещения. Но этот вариант больше подходит для известных компаний, у которых уже имеются постоянные посетители.
- Уведомление пользователей о сроках проведения технических работ. Можно подойти к этому элементу креативно, указав не просто дату активации ресурса, а сделать анимированный счетчик, отсчитывающий время в обратном порядке.
- Заглушку можно использовать для решения маркетинговых задач, например, указав на ней информацию о проведении конкурса, итоги которого будут подводиться уже на работающем сайте. Таким образом, можно замотивировать посетителя вернуться на ресурс.
- Говоря о контактных данных, отдельным элементом хотелось бы выделить ссылки на группы и страницы проекта в социальных сетях. Это позволит не потерять потенциальных клиентов, к тому же есть шанс увеличить число подписчиков на других платформах.
При создании страницы-заглушки по вышеприведенным рекомендациям захочется уместить на ней как можно больше данных. Но главное правило — публиковать исключительно уместную информацию, соблюдая баланс между объемом и полезностью контента. При этом следует учитывать особенности поведения аудитории, в некоторых случаях слишком креативная страница может сыграть негативную роль.
Как создать и установить заглушку на сайт?
Вариантов создания страницы-заглушки несколько. Выбор зависит, например, от того, работает ли сайт на готовой CMS, есть ли под нее соответствующие плагины и т.д.
Но в целом заглушка является полноценной страницей сайта, и к ее разработке стоит подходить аналогичным образом. Первоначально проектируется прототип шаблона. На нем в графическом виде располагаются элементы будущей заглушки, также прорабатывается юзабилити. Далее на основе прототипа создается макет шаблона с уже законченным оформлением.
Создание заглушки на сайт из готового HTML-шаблона
Если нет ресурсов или желания создавать прототип и макет шаблона с нуля, можно воспользоваться готовыми решениями.
Одним из популярных сайтов, на которых можно скачать и в дальнейшем отредактировать шаблоны в удобном графическом редакторе, является Nicepage.com. Здесь представлены десятки готовых страниц-заглушек, перед скачиванием которых необходимо установить графический редактор.
Графический редактор Nicepage.com
После чего на сайте выбирается шаблон, на странице которого имеется идентификатор — указываем его в установленном редакторе, и шаблон станет доступен для редактирования.
Выбор шаблона на сайте
Поиск шаблона по идентификатору
Каждый элемент страницы поддается редактированию, таким образом можно буквально за 10 минут создать отличную заглушку.
Редактируем шаблон
После того, как она будет создана, предлагается экспортировать ее в различных форматах.
Экспортируем в нужном нам формате
Удобно то, что все экспортированные шаблоны из редактора являются адаптированными под различные виды устройств (мобильные, планшеты, десктоп), а как они будут выглядеть в том или ином разрешении, можно посмотреть в самой программе.
Проверка адаптивности
Более подробно о тарифных планах и условиях использования шаблонов можно ознакомиться на сайте.
Примеры заглушек на основе готовых шаблонов
Мы собрали наиболее удачные, на наш взгляд, готовые HTML-шаблоны заглушек.
Пример заглушки для сайта — 1
Пример заглушки для сайта — 2
Пример заглушки для сайта — 3
Пример заглушки для сайта — 4
Пример заглушки для сайта — 5
Создание заглушки с помощью кода-HTML
Этот способ можно применять на любых сайтах и CMS. Суть его заключается в том, что шаблон страницы верстается в HTML-код, а далее устанавливается на сайт.
Создаем файл заглушки, который содержит в себе HTML-верстку с блоками <html>, <head> и <body>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>Сайт на реконструкции</title>
<style>
main {
max-width: 70%;
margin: 100px auto 0 auto;
padding: 25px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<p>ГРЯДЯЕТ НОВЫЙ СТАРТ!</p>
<p>Наш сайт находится в стадии разработки, и мы почти готовы к работе!<br>
Мы готовим для вас нечто удивительное и захватывающее - специальный сюрприз для подписчиков</p>
</main>
</body>
</html>
Таким образом собирается вся страничка заглушки.
Далее размещаем созданный HTML-файл в корень сайта через FTP.
Находим там же файл .htaccess, открываем его текстовым редактором (возможно, потребуется для редактирования скопировать его на компьютер, а после заменить).
В самом вверху файла прописываем:
<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_URI} !/file.html$
RewriteCond %{REMOTE_ADDR} !^176\.111\.11\.21
RewriteCond %{REMOTE_ADDR} !^176\.111\.11\.22
RewriteRule $ /file.html [R=302,L]
</IfModule>
Вторая и пятая строки содержат название созданного файла заглушки, на который будет происходить переадресация пользователей и краулеров. Третья и четвертая — IP-адреса, с которых вход на сайт будет возможен без переадресации. Обычно туда прописываются данные админов и тех, кто работает над сайтом.
Плагины для CMS
Большинство популярных CMS, таких как Вордпресс и Битрикс, имеют готовые плагины, позволяющие активировать и устанавливать страницы-заглушки. Это сильно упрощает работу для неопытных вебмастеров, которые не представляют, как создать заглушку для сайта самостоятельно.
Например, для WordPress популярен плагин WP Maintenance Mode, который имеет более 800 тыс. активных установок в репозитории. Он позволяет создавать красивые и современные дизайны заглушек, в том числе интегрировать анимированные счетчики, контактные формы. При этом шаблоны все адаптированы под мобильные устройства.
Для Битрикса также можно найти готовые плагины, например, одноименный «Заглушка: технические работы, сайт находится в разработке». Компания-разработчик оказывает всю техническую поддержку для платных версий плагина.
Примеры оформления заглушек для сайтов
Пример — 1
Заглушка в минималистичном стиле, указаны ссылки на социальные сети и форма для подписки на уведомления, а также таймер до запуска сайта.
Пример — 2
Это расширенная версия заглушки, которая включает в себя первый экран с таймером, есть основное меню-навигация, т.к. заглушка состоит из нескольких экранов. В качестве блоков можно использовать информацию о компании, расширенную форму обратной связи и т.д.
Пример — 3
Уведомление об обслуживании сайта и контактная информация, в ряде случаев этого достаточно.
Пример — 4
Заглушка с абстрактным фоновым изображением, в целом желательно придерживаться стилистики сайта.
Пример — 5
Указано название проекта, таймер с обратным отсчетом до запуска и форма подписки.
Итак, теперь вы знаете, как сделать заглушку и установить ее на сайт, основное в этом — правильное определение ее целей и задач.
