Шаблон html страницы заглушки домен продается.
Когда сайт ожидает запуска или находится на реконструкции, существует потребность уведомить посетителей сайта о скором открытии. И прекрасным решением этой проблемы является создание посадочной страницы с соответствующим уведомлением.
По мере развития современных инструментов веб-разработки, подобные страницы превратились из простых страниц с текстом в более интересные решения.
Создание подобной заглушки для сайта повышает уровень ожидания посетителей, тем самым создавая у них интерес. Помимо простого уведомления, также можно собрать информацию о заинтересованных пользователях посредством вставки форм подписки и обратной связи.
В этом уроке мы создадим именно такую заглушку для сайта, которая будет содержать форму подписки и таймер обратного отсчета, реализованный с помощью JQuery-плагина от Кейта Вуда .
Нужные для урока материалы:- Любое фоновое изображение
- Время и терпение.
index.html — основной файл проекта
папка «js» — папка с JavaScript/JQuery скриптами
папка «img» — папка с изображениями проекта
папка «css» — папка с таблицами стилей проекта (css-файлы)
Приступаем к работеПервым этапом работы у нас будет подключение к основному html-файлу таблиц стилей и jquery-библиотеки.
Подключаем файлы внутри тега head.
Coming Soon with Counter
HTMLДля нашего html-документа создадим разметку. Все элементы страницы будут находиться внутри тега div с идентификатором «container». Внутри этого блока у нас будут заголовки, счетчик, форма обратной связи и футер (нижний блок с авторскими правами).
Our website is Coming Soon WE APOLOGIZE FOR INCONVENIENCE
YOU NEED TO WAIT...
SEND ME DETAILS ABOUT IT
Copyright - 1stwebdesigner.com - 2014Обратите внимание, что мы оставили пустым блок div с идентификатором «counter». Этот идентификатор мы позже используем, чтобы связать его с нашим jquery-плагином и добавим к нему css-стили.
Теперь создадим для нашего проекта css-файл, в котором будут расположены все стили. В первую очередь добавим стили для основных элементов: body, h1, h2 и блока с идентификатором «container». Для блока «container» ширину указываем в процентах, чтобы он изменялся в зависимости от размера окна браузера.
Для тега h1 применим CSS3 трансформацию, что позволит ему вращаться на 360 градусов по оси X. Подробнее об этом свойстве можно прочитать .
Body { color: #dadada; line-height: 1.75; width: 100%; background: url(../img/background.jpg)center; font-family: "Open Sans"; } h1,h2{ color: #fff; line-height: 1.16667; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1); } h1 { font-size: 43px; font-family: Montserrat; font-weight: 700; border: 2px dashed #fff; margin-top: 50px; padding: 10px; cursor: pointer; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; } h1:hover { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); } h2 { font-size: 30px; font-weight: 300; margin-top: 30px; } .container { width: 58%; margin: 40px auto 0; } .details { margin-top: 30px; color: #fff; text-align: center; text-shadow: 2px 2px 2px rgba(150,150,150,1); }
Button,input,textarea { font-size: 16px; max-width: 100%; margin: 0; border-radius: 0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { overflow: auto; vertical-align: top; } input,textarea { background: #6e6e6e; background: rgba(169,169,169,0.3); border: 1px solid #f4f4f4; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; text-transform: uppercase; } input:focus,textarea:focus { outline: 0; } button:hover,button:focus,input:focus,input:hover { background: #ff8721; color: #fff; outline: 0; } button,input { -webkit-appearance: button; cursor: pointer; } button,input { background: #ffab00; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .form-field { position: relative; }
Следующим шагом у нас будет создание кроссбраузерного стиля для текстового поля.
::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { color: #fff; opacity: 1; } ::-ms-input-placeholder { color: #fff; opacity: 1; } .placeholder { color: #ff; }
Теперь создадим стили для нашего счетчика. Напомню, что в html-документе он находится в блоке div с идентификатором «counter».
#counter { margin-top: 28px; } .countdown_section { color: #dadada; display: inline-block; font-size: 12px; text-align: center; width: 25%; letter-spacing: 1px; border-left: 1px dashed #dadada; border-color: rgba(218,218,218,0.8); padding: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-shadow: 2px 2px 2px rgba(150,150,150,1); text-transform: uppercase; } .countdown_section:first-child { border-left: 0; } .countdown_amount { color: #fff; display: block; font-family: "Open Sans"; font-size: 60px; font-weight: 700; letter-spacing: normal; line-height: 1; }
Теперь давайте добавим стилей для формы обратной связи. Максимальная ширина формы будет составлять 610px и установим для этой формы относительное позиционирование (position:relative). Расположим кнопку для отправки сообщения справа от текстового блока и установим для него абсолютное позиционирование (position:absolute).
#subscribe { max-width: 610px; position: relative; margin: 20px auto 0; } #subscribe-form .form-field { margin-right: 180px; } #subcribe_email { border-right: 0; } #subscribe-form .form-submit { height: 50px; position: absolute; right: 0; top: 0; width: 180px; } #subcribe_email,#subscribe_submit { width: 100%; display: block; height: 55px; }
И в конце добавим свойств для элементов блока footer.
Footer { font-size: 13px; text-align: center; margin-top: 25px; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1); } footer a { color: #fff; }
Чтобы наша страница была отзывчивой, добавим медиа-запросы. Подробнее об этом свойстве можно прочитать (англ.)
@media only screen and (max-width: 720px) { footer{margin-bottom: 40px; } } @media only screen and (max-width: 680px) { .countdown_amount { font-size: 48px; } } @media only screen and (max-width: 540px) { .one-half { width: 100%; } .countdown_section { padding: 28px 6px 20px; } #subcribe_email{border: 1px solid #fff;} #subscribe-form .form-submit { margin: 0 auto; right: auto; position: static; } #subscribe-form .form-field { margin: 0 0 14px; } } @media only screen and (max-width: 480px) { h1 { font-size: 30px; } h2{font-size: 25px;} .countdown_section { border: none; padding: 20px 20px; font-size: 13px; text-align: center; } .countdown_amount { font-size: 40px; padding: 0 0 10px 0; } #counter{width: 30%; margin:0 auto;} } @media only screen and (max-width: 360px) { h2{font-size: 22px;} .countdown_section { padding: 21px 26px 21px 15px; } .countdown_amount { font-size: 36px; } }
Если проверить отображение страницы в браузере, то она должна выглядеть так:
Обратите внимание, что у нас не отображается счетчик. Чтобы он появился, необходимо добавить следующий код перед закрывающим тегом body. Но до этого загрузите файл с плагином, указав путь к файлу.
Затем добавьте следующий код, чтобы отобразился наш счетчик. Вы можете изменить дату на счетчике в соответствии со своими пожеланиями. Достаточно указать нужную дату внутри параметра «launchdate».
$(document).ready(function() { var launchdate = new Date(2014, 6 - 1, 7); $("#counter").countdown({ until: launchdate }); })(jQuery);
ЗаключениеПоздравляю! Вы только что создали классную страницу с таймером обратного отсчета. Данная страница позволит вам информировать своего посетителя о дате запуска вашего сайта и не потерять его.
Надеюсь, что Вам понравился данный урок. Оставляйте свои комментарии и вопросы, всегда рад ответить на них.
В последнее время в сети появляется множество новых ресурсов: кто-то запустился совсем недавно, другие вот-вот планируют стартануть, а кто-то лишь начал разрабатывать интернет-магазин или другой проект и думает запустить его через полгода-год.
Можно ли использовать какие-то элементы маркетинга еще до того, как проект со всем функционалом появится на свет? Безусловно! Один из первых этапов маркетинга — это коммуникация с посетителем ещё не работающего сайта с помощью страниц-заглушек или так называемых splash-страниц.
Splash-страницы используют далеко не многие, поэтому их наличие на сайте дает преимущество и ранний толчок в развитии. Однако не каждая заглушка будет работать одинаково эффективно. Ниже приведено несколько советов, как сделать правильную страницу-заглушку и запустить проект в будущем, уже имея потенциальную аудиторию.
Принципы эффективной страницы-заглушкиЗаглушки, по сути, являются лендингами, и к ним применимы многие принципы эффективных лендингов. Давайте подробней остановимся на самых важных и рассмотрим несколько примеров.
1. Знайте пределы для упрощения страницы
С одной стороны, страница должна быть как можно проще. Но будет ошибкой оставить лишь сообщение, что сайт находится в разработке.
У посетителя возникает логичный вопрос, куда я попал и зачем мне нужно совершить то или иное действие, о котором меня просят (например, связаться по телефону). Добавьте чуть больше информации на страницу, делая её максимально полезной как для посетителя, так и для вас.
2. Предоставьте информацию о себе
Покажите посетителю, что он попал именно туда, куда нужно. Расскажите ему, где он находится, используя короткий текст и маркированный список. Это ваше первое знакомство с человеком, с чего вы обычно начинаете?
3. Можно делать видеообзор
Некоторые сайты практикуют размещение видеообзора. Это хороший способ рассказать больше и ярче о том, чем вы можете быть полезны посетителю.
Видеообзоры — это хороший инструмент, но не стоит слишком усердствовать. Ошибочно будет раздражать посетителя автоматически включаемым видео или аудиоэффектами, если, конечно, ваш будущий сайт не посвящен онлайн-играм.
4. Используйте логотип или другие изображения, ассоциирующиеся с вашей областью деятельности
Изображения, которые вы используете на сайте, должны ассоциироваться с областью деятельности компании или темой проекта. Женщины и котики — это здорово, но не всегда уместно. Так может выглядеть страница-заглушка для сайта радио:
А здесь хорошо отображен дизайнерский креатив, правда, не сразу понятно, что сайт будет посвящен дизайну.
5. Расскажите, что нам ожидать
Это хорошо, что вы существуете и планируете стать ближе к пользователям интернета, но расскажите также, зачем люди должны возвращаться на ваш сайт позже? Какие у вас планы на проект или на его функционал? А может быть, что-то еще?
Добавьте интригу для возбуждения любопытства. Например, в качестве интриги может использоваться сообщение, что ваш сервис будет являться технологическим прорывом или что компания первым зарегистрировавшимся клиентам предоставит скидки или бесплатные дополнительные услуги. Ниже пример, как создавали интригу ребята из Netpeak перед организацией конференции 8p, играя на всеми обсуждаемом конце света в 2012. Эта идея многим показалась креативной, и они делились ссылкой на страницу-заглушку со своими друзьями в соцсетях.
Не обязательно создавать интриги, побудите человека просто вернуться позже. Страница-заглушка должна уметь не только информировать посетителя, но и побуждать его делиться этой страницей со своими знакомыми и возвращаться в будущем.
6. Оставьте контактную информацию
В зависимости от тематики будущего сайта иногда уместно оставить лишь email-адрес, в других случаях — более подробную информацию, в том числе физический адрес офиса и время его работы.
В будущем вам понадобится создавать комьюнити. Делайте это прямо сейчас с помощью готовых инструментов — социальных сетей. Помимо того что наличие этих ссылок будет увеличивать доверие к компании и будущему сайту, вошедшие в ваше сообщество люди будут всегда в курсе новостей о стадиях разработки или запуска ресурса.
Однако не делайте социальные профили пустыми, наполните их полезным контентом, чтобы вашей целевой аудитории было на что подписываться. Люди не лайкают и не фоловят низкоавторитетные, нулевые аккаунты или профили со стандартными аватарками (например, яйцо в твиттере).
8. Разместите форму подписки на обновления
Помимо использования социальных сетей, подключайте email-рассылку. Собирайте электронные адреса вашей потенциальной аудитории уже сейчас. Вы можете выслать им сообщение только при запуске сайта, а можете делать это регулярно, сообщая, на каком этапе находится разработка или какие-то другие важные уже в вашей тематике и, конечно же, полезные для тех людей, которые доверяют вам свои контакты, аспекты.
Помимо формы для отправки email, можно использовать и другие каналы коммуникации с клиентами/аудиторией, например, блог, добавив его на поддомен или в подпапку и установив там стандартный WordPress. Возможно, этот блог в будущем не только скажется положительно как инструмент входящего маркетинга, но и поможет повысить авторитетность ресурса в глазах поисковых систем.
9. Добавьте призыв к действию
Ваша первая цель — собрать начальную аудиторию и заставить человека вернуться, как только сайт начнет функционировать. Призывая пользователя к действию, вы говорите о своих намерениях и напоминаете посетителю о его возможностях. "Подписывайтесь", "Посмотрите первым", "Возвращайтесь", "Свяжитесь с нами", "Почитайте о нас подробней", "Фоловьте нас в соцсетях" и т.д. Используйте один или несколько призывов к действию в зависимости от размера страницы-заглушки. Если вы просто напишете, что сайт находится в разработке, то мало кто из текущих посетителей вернется на него в будущем.
На приведенном ниже примере призыв к действию расположен сверху справа со стрелочкой, а также повторно внизу страницы уже вместе с формой подписки на уведомления.
10. Не оптимизируйте страницы-заглушки для поисковых систем
Конечно же, страницы-заглушки хороши и для SEO, так как можно начинать продвигать сайт ещё не имея его. Как минимум ресурс уже будет в индексе, как максимум на него уже можно размещать ссылки как на форумах или в соцсетях, так и в печатных СМИ.
И несмотря на то, что страницы-заглушки могут использоваться для SEO, они выполняют больше маркетинговую задачу. Настоятельно не рекомендуется портить первое впечатление о ресурсе SEO-текстом.
Надеюсь, эти советы помогут вам заполнить техническое задание для программистов уже сейчас. Ниже приведены ещё два примера для мотивации. :)
Придумайте свою идею и поставьте страницу-заглушку уже сегодня, чтобы при запуске сайта не искать аудиторию, а продолжать с ней работать!
Рано или поздно все сталкиваются с необходимостью переделывать свои сайты или создавать новые. В начале разработки многие игнорирую создание страниц-заглушек и оставляют просто пустую страницу, в лучшем случае. Конечно же так делать нельзя, пользователь зайдя на ваш сайт не может знать, что вы делаете для него новые плюшки или супер модный дизайн и нужно вернуться немного позже. Это влечет за собой потерю постоянных посетителей и негативно сказывается на репутации компании. Поэтому отличным способом рассказать вашим посетителям, что сайт не умер, а находится в процессе реконструкции или разработки, будет создание заглушки . На такой странице вы можете рассказать, что в данный момент делаете с сайтом, когда он будет готов и предложить пользователям оставить свой Email , чтобы оповестить их об открытии сайта. Все это хорошо, но как всегда на разработку дизайна, верстку еще одной дополнительной страницы нет ни средств, ни времени. В такой ситуации можно воспользоваться уже готовыми решениями - шаблонами страниц-заглушек . В данной статье мы подготовили для вас подборку шаблонов которые могут быть использованы как в период технического обслуживания, так и перед запуском вашего сайта. И так, к вашему внимаю для заглушек сделанные по последним тенденциям в веб-дизайне .
5. New Year – Responsive Melody HTML TemplateНовый год - адаптивный HTML шаблон с фоновой музыкой . Присутствует таймер обратного отсчета и модальное окно в котором представлена информация о компании и форма обратной связи .
В данной статье Вы найдете информацию о том, как перенаправить весь трафик и всех посетителей сайта на страницу с информацией о техническом обслуживании на время обновления сайта.
Я покажу как создать страницу-заглушку с информацией о проводимых работах , как перевести сайт в режим обслуживания и как вернуть его online без перезапуска Apache .
Вы узнаете как перенаправить трафик виртуального хоста Apache на страницу-заглушку используя как конфиг VirtualHost , так и .HTAccess файл.
Создание Страницы-ЗаглушкиПервый делом, необходимо создать 2 файла в корне сайта (document root):
Создайте страницу maintenance.html , на которую будут перенаправляться посетители и которая будет информировать их о том, что сайт находится на техническом обслуживании .
В качестве примера можете использовать следующий HTML код страницы-заглушки (демо):
h1 { font-size: 50px; } body { text-align:center; font: 20px Helvetica, sans-serif; color: #333; } Сайт Закрыт на Техническое Обслуживание
Приносим извинения за неудобство, но в данный момент сайт находится на техническом обслуживание.
Скоро мы вернемся online!
В корне сайта (document root) создайте пустой файл с именем maintenance.enable .
Мы будем использовать его для ВКЛЮЧЕНИЯ и ВЫКЛЮЧЕНИЯ заглушки без перезапуска Apache .
Мы настроим Apache таким образом, что при нахождении файла maintenance.enable в корне сайта, будет включаться режим технического обслуживания и все посетители сайта будут перенаправляться на страницу-заглушку. В обратном случае (файл maintenance.enable отсутствует) сайт будет работать в штатном режиме.
Таким образом, если нам необходимо включить редирект сайта на время обслуживания , мы создаем пустой файл maintenance.enable .
А когда нам будет необходимо вернуть сайт online после обслуживания , мы попросту удалим файл maintenance.enable .
Редирект Apache Vhost-а на Страницу-ЗаглушкуДобавьте следующие правила в конфиг Вашего Vhost-а (Apache VirtualHost ) для редиректа всех посетителей сайта на страницу-заглушку :
RewriteEngine On RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.000 RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f RewriteCond %{SCRIPT_FILENAME} !maintenance.html RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Header Set Cache-Control "max-age=0, no-store"
Перезапустите Apache, чтобы изменения вступили в силу:
# apachectl graceful
Теперь Вы можете ВКЛЮЧАТЬ и ВЫКЛЮЧАТЬ режим технического обслуживания сайта с помощью файла maintenance.enable не перезапуская Apache каждый раз.
Редирект на Страницу-Заглушку с помощью HTAccessДля редиректа всех посетителей на страницу-заглушку , разместите следующий код в .htaccess файле, находящимся в корне сайта:
Этот кусок должен быть вставлен перед всеми другими редиректами и состояниями.
RewriteEngine On RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.000 RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f RewriteCond %{SCRIPT_FILENAME} !maintenance.html RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Header Set Cache-Control "max-age=0, no-store"
Разъяснение1. Включаем Rewrite Engine.
RewriteEngine On
2. (опционально) Исключаем Ваш IP адрес. Используйте эту директиву, чтобы не перенаправлять трафик с указанного IP адреса на maintenance.html.
RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.000
Вы можете указать несколько IP адресов:
RewriteCond %{REMOTE_ADDR} !^192\.168\.0\.1 RewriteCond %{REMOTE_ADDR} !^192\.168\.1\.100 RewriteCond %{REMOTE_ADDR} !^172\.16\.10\.15
3. Убеждаемся что maintenance.html существует.
RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
4. Проверяем существование файла maintenance.enable (этой проверкой мы включаем и выключаем режим обслуживания).
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f
5. Это правило нам необходимо для предотвращения зацикливания.
RewriteCond %{SCRIPT_FILENAME} !maintenance.html
6. Собственно сам 503-ий редирект на страницу-заглушку.
RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html
503 Service Unavailable — код состояния HTTP, означающий что сервер временно не имеет возможности обрабатывать запросы по техническим причинам (обслуживание, перегрузка и прочее).
7. Выключаем кэширование.
Header Set Cache-Control "max-age=0, no-store"