Дизайн Vadik Sh
2 938

Как за две минуты создать HTML-заглушку для сайта

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

В закладки

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

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

Что размесить на заглушке

  • Логотип;
  • Контактные данные для связи с вами;
  • Описание компании, сферу деятельности, УТП;
  • Причину появления этой страницы;
  • Принести извинения за неудобства, если таковые есть;
  • Указать дату открытия сайта;
  • Разместить красивое, тематическое изображение.

Инструкция

Чтобы сделать страницу-заглушку нам понадобится сервис для проектирования сайтов esk.one

1 - Входим в esk.one от соц. сети или регистрируемся, кому как удобнее. Быстрее вход от соц. сети. Заходим в личный кабинет и создаем новый проект с названием «Прототип сайта». Открываем его для редактирования.

2 - Добавляем фон. Включаем заливку цветом и задаём общую прозрачность заливки, чтобы тест лучше читался. Можно включить градиент и настроить ему цвет прозрачность и направление.

3 - Перетаскиваем виджеты заголовок и текст. Выбираем шрифт. Если не знаете какой ставить, ставьте Roboto (дизайнер мне так сказал). Тексту применяем тот же шрифт что и заголовку.

да, я не дизайнер

4 - Адаптируем под экраны. Включаем все версии (вверху иконки девайсов). Кликаем версии, меняем положение элементов, размер шрифта, проверяем что все смотрится так как надо, сохраняем.

вот ссылка на то что получилось заглушка

Мобильные версии можно не включать, так будет быстрее, по умолчанию когда включена 1 версия, у нас работает viewport, и заглушка будет смотреться нормально на всех экранах.

Разработчик

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

5 - Выгружаем проект в HTML. Скачиваем. Распаковываем.

это распакованный проект

Можно открыть index.html проверить в браузере как все работает.

В выгрузке идет robots.txt в нем стоит Disallow: / чтобы заглушка не индексировалась. Если нужно чтобы индексировалась замените Disallow на Allow.

6 - Загружаем содержимое папки себе на хостинг в корневую папку.

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Vadik Sh", "author_type": "self", "tags": [], "comments": 28, "likes": -6, "favorites": 57, "is_advertisement": false, "subsite_label": "design", "id": 50583, "is_wide": false, "is_ugc": true, "date": "Sat, 10 Nov 2018 17:43:46 +0300" }
{ "id": 50583, "author_id": 162764, "diff_limit": 1000, "urls": {"diff":"\/comments\/50583\/get","add":"\/comments\/50583\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50583"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

28 комментариев 28 комм.

Популярные

По порядку

Написать комментарий...
21

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

Все равно заморачиваться с конструктором, css, редактированием кода. А если это делает новичок первый раз ? Больше вопросов, чем ответов.

Ответить
0

Если покупали домен с хостингом, обычно домен уже привязан к хостингу, в аккаунте понятно что куда ложить, но положить нечего, этот метод подходит в таком случае

Ответить
8

Класть

Ответить
0

В точку!!!

Ответить
4

<html lang="ru>
<header>
<title>Underconstruction</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</header>
<body>
<h1>Underconstruction</h1>
</body>
</html>

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

Ответить
4

клонируем репозиторий с шаблоном заглушки, делаем заглушку на фреймворке, засовываем на вебпак и транспилируем через balel, и пока вселенная крутится, не забываем сделать заглушку на случай если заглушка не загрузилась из-за отключённого js, пишем и прогоняем тесты и убеждаемся, что котик загружается корректно, создаём репу на гитхабе для своей заглушки, пишем объёмный README по её использованию с проставлением лицензии и ссылкой на донат, заливаем на серв и запускаем через SSR, чтобы поисковики могли нормально заглушку проиндексировать и повысить наш сайт в рейтинге заглушек. И это всего за полторы минуты

Ответить
3

Зачем изобретать велосипед?

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

Не спеша уложился минут в 15, из которых 10 выбирал шаблон из нагугленных вариантов.

Ответить
3

Я в этой штуке прототипы делаю. Нравится.

Ответить
2

почему на сайте-примере даже кнопки соцсетей не работают?

Ответить
3

Отличаете рекламу от обычной статьи?
Никому там нет дела до кнопок, и уж тем более до того, работают они или нет

Ответить
0

Это даже не кнопки, а просто картинка с изображением иконоц соц. сетей с прозрачным фоном.

Ответить
0

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

Ответить
2

@ "Заглушка будет смотреться нормально на всех экранах"
@ На FHD здоровая белая полоса внизу

Ответить
0

можно высоту любую сделать и не будет полос, сейчас 900px у секции стоит не думал что высота есть такая огроменная

Ответить
0

Всё равно странно выходит. В full HD выглядит как увеличенная картинка.
https://esk.one/p/WjUHf1n2KJnmE6d/

Ответить
0

А можно к div с фоном добавить свойство
background-size: cover;

Ответить
0

там есть cover

Ответить
1

Фронтенд умирает, все больше работы отбирают у джунов

Ответить
0

Вы всю жизнь джуном собрались быть?

Ответить
1

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

Ответить
1

Это нафиг не нужно, а вот заглушка когда сайт повис и 500 ошибка, это да.

Здания ещё нет, но табличку на дверь заказали, ай молодца

Ответить
1

почти нативная реклама сервиса esk.one от самих создателей.
вам что, регистраций пользователей не хватает для отчета ?
а "лайфхак" ваш все равно, что забивать гвоздь микроскопом

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }