Как сделать страницу в разработке

23 HTML шаблона адаптивных страниц-заглушек

Рано или поздно все сталкиваются с необходимостью переделывать свои сайты или создавать новые. В начале разработки многие игнорирую создание страниц-заглушек и оставляют просто пустую страницу, в лучшем случае. Конечно же так делать нельзя, пользователь зайдя на ваш сайт не может знать, что вы делаете для него новые плюшки или супер модный дизайн и нужно вернуться немного позже. Это влечет за собой потерю постоянных посетителей и негативно сказывается на репутации компании. Поэтому отличным способом рассказать вашим посетителям, что сайт не умер, а находится в процессе реконструкции или разработки, будет создание заглушки. На такой странице вы можете рассказать, что в данный момент делаете с сайтом, когда он будет готов и предложить пользователям оставить свой Email, чтобы оповестить их об открытии сайта. Все это хорошо, но как всегда на разработку дизайна, верстку еще одной дополнительной страницы нет ни средств, ни времени. В такой ситуации можно воспользоваться уже готовыми решениями — шаблонами страниц-заглушек. В данной статье мы подготовили для вас подборку шаблонов которые могут быть использованы как в период технического обслуживания, так и перед запуском вашего сайта. И так, к вашему внимаю шаблоны для заглушек сделанные по последним тенденциям в веб-дизайне.

1. Coming Soon

Прекрасная анимированная страница-заглушка с броским дизайном. SEO оптимизированна и интегрирована с MailChimp.

2. Heartbeat

Бесплатный, адаптивный и простой шаблон с полноэкранным фоновым изображением и jQuery таймером обратного отсчета.

3. Moon Free HTML5 Coming Soon Website Template

Чистый, адаптивный, бесплатный шаблон построенный на bootstrap, HTML5 и CSS3. Содержит адаптивный фоновый слайдер, jQuery таймером обратного отсчета, навигацию и форму обратной связи.

4. Layla

Адаптивный шаблон с элегантным внешним видом и полноэкранным фоновым видео. Создан на основе Bootstrap 3 с использованием HTML5, CSS3 и JQuery

5. New Year – Responsive Melody HTML Template

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

6. Sunrise

7. Kite

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

8. Zoon

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

9. UX – Free Responsive Template

Очень похож на шаблон “New Year”. Отличается стилевым оформлением и отсутствием фоновой музыки, интегрирован с Mailchimp.

10. AfterWork

Одностраничный HTML Bootstrap шаблон, идеально подходит для заглушки сайтов программного обеспечения. Из особенностей: таймер обратного отсчета, адаптивный, два стиля оформления (параллакс и слайдер), Google Maps, интегрирован с Twitter, форма подписки.

11. Magnitude

Контент равняется по центру как по горизонтали так и по вертикали.

Источник

Делаем страницу «Сайт в разработке» интересной

«У вас никогда не будет второго шанса произвести первое впечатление»

Причины использования

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

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

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

В этом случае на заглушке размещают:

информацию о проекте;

ознакомительный контент (фотографии ассортимента, видео и т.п.);

таймер обратного отсчёта до полноценного открытия;

форму обратной связи;

промокод на первую покупку.

Стандартная страница “Сайт временно закрыт”

В Битриксе такая страница уже предусмотрена. Активация происходит через административный интерфейс в Настройки | Настройки продукта | Настройки модулей | Главный модуль.

Когда доступ к публичной части закрывается, всем посетителям (кроме администраторов) будет показана ну оооочень простая и чудовищно некрасивая страница “Site under construction”.

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

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

Почему 1С-Битрикс до сих пор не облагородил эту страницу науке не известно. Мы просили об этом много раз еще с 2011-го года.

Другие недостатки стандартного закрытия сайта в Битриксе:

Закрыть можно только все сайты сразу (в многосайтовости);

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

Для поисковиков страница отдает статус 200, что не всем может подойти.

Тем не менее, создать страничку мечты заглушки можно. Есть три выигрышных стратегии:

создать файл site_closed.php;

создать обработчик события;

использовать готовое решение из Marketplace.

Способ 1. Создать файл Site Closed

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

Стандартная заглушка заменяется посредством создания файла site_closed.php в «/bitrix/php_interface/include» или «/local/php_interface/include».

Способ 2. Создать обработчик события

Также существует вариант создать собственную заглушку, используя событие onProlog. Этот способ удобен тем, что мы можем изменить логику показа заглушки: добавить проверку IP, групп пользователей, сайта в многосайтовости и т.п.

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

Способ 3. Установить решение из Marketplace

В Marketplace есть готовые решения для заглушки сайта. В том числе и бесплатные, например “ Продвинутая заглушка ”. Модуль позволяет контент-менеджеру быстро настроить желаемый контент для страницы: время до запуска, предварительную регистрацию пользователей, ссылки “поделиться” для соцсетей.

Выводы

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

Источник

Создаём заглушку «технические работы» на сайте

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

Однако я хочу поделиться с вами простым и гибким способом, как можно сделать то же самое без всяких дополнительных плагинов и настроек. Этот метод неоднократно применялся на практике и подходит для сайтов на любых CMS и любых языках программирования. Ничего авторского в нём нет, технология изначально была нагуглена и модернизирована в процессе работы. А именно – по просьбе одного из моих постоянных клиентов, который хотел закрыть интернет-магазин на время внесения изменений и в то же время иметь возможность самому смотреть, что же там происходит.

Итак, всё делается в два этапа.

Этап 1. Создаём файл-заглушку

Назовём его, например, reconstruction.html. Выглядеть он может примерно так.

Картинку я добавил вот эту, никакой смысловой нагрузки она не несёт и вставлена просто для красоты.

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

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

Этап 2. Вносим изменения в htaccess

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

RewriteCond [СТРОКА ДЛЯ СРАВНЕНИЯ] [УСЛОВИЕ] [ФЛАГИ]

RewriteCond [СТРОКА ДЛЯ СРАВНЕНИЯ] [УСЛОВИЕ] [ФЛАГИ]

RewriteRule [ШАБЛОН] [СТРОКА ПОДСТАНОВКИ] [ФЛАГИ]

Строки RewriteCond — задают условия для срабатывания следующего за ними правила RewriteRule.

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

В третьей и четвёртой строках – указываем IP-адреса, для которых будут исключения. Вписывайте столько строчек, сколько адресов вам требуется. В данном случае сайт будет виден с адресов 176.113.11.22 и 176.113.11.23. Можно указать только одну строку или столько, сколько вам потребуется. Проверить, что ваш сайт не виден со сторонних IP-адресов можно, например, с помощью анонимайзера. Пожалуй, единственный минус этого способа – если у вас или у вашего заказчика установлен динамический IP, список исключений может стать слишком длинным.

Заключение

Источник

Создаём страницы-«заглушки» для своих сайтов

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

Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.

1. Советы по созданию страниц-«заглушек»

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

Расскажите, чего нам ожидать

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

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

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

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

Anipals
Anipals встречает нас приличным количеством информации об особенностях проекта, но не рассказывает слишком много.

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

Нужна ли подписка на обновления?

Позволить посетителям подписываться на рассылку по e-mail, чтобы их уведомить о запуске проекта — такая возможность может стать хорошим инструментом для раскрутки. Если этого не сделать, то к тому времени, когда сайт будет запущен, некоторые посетители могут забыть про него. Разумеется, регулярность рассылки зависит полностью от вас. Некоторые сайты отсылают лишь одно уведомление в день запуска. Другие делают регулярные рассылки, в которых рассказывают о ходе работы.

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

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

MyNiteLife
MyNiteLife позволяет посетителям подписываться на обновления по e-mail.

DesignSvn
DesignSvn даёт возможность посетителям выбрать: подписаться по e-mail или следить на Твиттере.

Remindness
Remindness позволяет посетителям подписываться на обновления по e-mail.

Сделайте вашу страницу-«заглушку» запоминающейся

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

Fontdeck
Fontdeck использует на странице логотип и цветовую схему, которая, по-видимому, будет использоваться на сайте.

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

Foundation Six
Foundation Six используют, по-видимому, конечный вариант цветовой схемы и логотипа.

Создайте небольшую интригу

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

Better Blogger
Better Blogger даёт нам начальную информацию о сайте, но не рассказывает слишком много.

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

uoOo
uoOo даёт понять, что как-то связан с видео, но больше нет никакой информации…

Помните о SEO

Хотя «заглушки» не играют большой роли в ранжировании сайта поисковиками, это не значит, что не надо оптимизировать их для поисковых систем. Используйте ключевые слова и правильные мета теги, и поощряйте оставляющих ссылки на вас использовать нужный текст в анкорах. И если вы грамотно подойдёте к SEO, то не будете пессимизированы поисковыми системами (а возможно даже получите некое доверие у поисковиков), которое означает, что когда сайт запустится, то продвижение в поисковиках будет намного быстрее.

2. Информационные страницы

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

Boagworld
Великолепный дизайн с информацией о возвращении к жизни популярного подкаста.

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

After Some Words
Особенная «заглушка», ведущая на страницу на MySpace.

Holey Coww
На этой страничке можно найти довольно объёмное пояснение к сайту, а также ссылки на Твиттер и Facebook.

Zombie Corp
Ещё одна простенькая страница с контактной информацией владельцев.

Moses Mehraban
Простая страница, которая рассказывает о текущих делах владельца.

Leaf Ordinary
Минималистская страница с ссылкой на дополнительную информацию.

I heart spaceships
Забавная страничка с контактной информацией разработчиков.

Smart Pixel
Очень простой дизайн, но с прикольной картинкой.

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

fcukstar
Более сложная страница с ссылкой на предпросмотр сайта и с информацией по ценам.

Zenbou
Ещё одна простая «заглушка» с большим количеством подсказок о том, что будет на сайте, также есть ссылка на Твиттер.

Shabith Ishan
Хорошо продуманная страничка с ссылками на разные социальные медиа.

3. Страницы для подписки на обновления или для запроса инвайта

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

FavMovie
Название даёт достаточно информации о будущем сайте, и форма простенькая.

Statnip
Простая страница с формой в одну строку для подписки.

ClockMeIn
Обычная страница с однострочной формой для запроса приглашения.

investobiz
Страница предлагает к ознакомлению немного информации, а также имеет форму для подписки на рассылку.

PackageTrail
Страница с уникальным дизайном имеет форму для запроса инвайта на бета тестирование.

Addressful
«Заглушка», на которой есть информация и форма для подписки.

Hello Human Icons Icon Collection One
Этот сайт предлагает подписаться на рассылку обновлений, а также рассказывает немного о себе.

The Upstate Design Collective
Ещё одна страница, на которой есть элементы как информационной страницы, так и страницы для подписки, также есть ссылка на группу в Твиттере.

MealNation
Страница с формой для подписки.

Hosteeo
Стандартная страница, на которой красуется вопрос, для привлечения интереса.

Gigdom
Информационная страница с ссылкой для регистрации на бета тестирование.

ClassOwl
Простая форма с двумя полями для подписки.

ChkChkBoom
«Заглушка» даёт возможность посетителям выбрать способ получения обновления: RSS или e-mail.

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

Inhouse Grind
Простая страница с информацией и формой.

Zipliner
Ещё одна очень простая страница с формой для запроса приглашения на тестирование.

Designatr
Красивая страница с простенькой формой и небольшим количеством информации о сути сайта.

Источник