How to make a stub page for a site: methods and examples

How to make a stub page for a site: methods and examples

A site stub is a separate page that is shown to the user in cases where the main content of the resource is not available. At first glance, it seems that it is not difficult to create such a page, but it is important to understand what elements it should consist of in order not to cause negativity among visitors.

Direct Line
Who are we

Largest agency
Internet marketing outside the Moscow Ring Road:
1200+ projects
65 specialists
fourteen years on the market
TOP 10
the best online promotion companies in Russia 2020

Commercial offer

Why create a stub page?

A stub page for a site acts as a temporary home page that informs visitors that a resource is temporarily unavailable.

There may be several purposes for which such a page is installed:

  • The site is undergoing technical work and it is necessary to notify the user that this is temporary.
  • The site is at an early stage of development and the stub page is serving an advertising role.
  • A stub for a domain that is up for sale.

In any of these cases, it is important to maintain audience loyalty to the resource, so the stub may contain relevant content. If the user has any questions about the site’s management, then such a page will inform how to contact him.

If the development of a site for a commercial organization is delayed for a long time, then instead of a simple stub, it is better to publish a page about the company.

The main elements of a stub page for a site

Before you start designing a stub page, it is important to determine what elements it should consist of.

  • The first thing to understand is that it is not enough to place the inscription “The site is undergoing technical work” or “The site is under construction.” Here it is important to notify the visitor about which particular resource he came to, indicating the name and logo of the company.
  • Second, this is contact information, it must also be indicated. Perhaps a potential client came to the site and got to the stub. In this case, if there are no contacts, he will most likely leave the resource and turn to competitors for help. Therefore, contact information should be published on the stub.
  • It will not be superfluous to publish brief information about what the company is doing. The main thing here is not to overload the page with data, but to indicate only the key directions.
  • Speaking about the previous point, in addition to text and graphic information, you can publish a video about the company. In some cases, this will be more appropriate, for example, if there is a lot of information.
  • You can put a form for an email newsletter on the stub, but then you should motivate the visitor to leave their contact. In addition to other newsletters, this function is often used to notify the audience when the site will again be available for visiting. But this option is more suitable for well-known companies that already have regular visitors.
  • Notifying users about the timing of technical work. You can approach this element creatively by indicating not just the date of resource activation, but making an animated counter that counts down the time.
  • A stub can be used to solve marketing problems, for example, by indicating on it information about a competition, the results of which will be summed up already on a working site. Thus, you can motivate the visitor to return to the resource.
  • Speaking of contact information, I would like to highlight links to groups and project pages on social networks as a separate element. This will allow you not to lose potential customers, moreover, there is a chance to increase the number of subscribers on other platforms.

When creating a dummy page according to the above recommendations, you want to fit as much data on it as possible. But the main rule is to publish extremely relevant information, maintaining a balance between the volume and usefulness of the content. At the same time, you should take into account the peculiarities of the audience’s behavior; in some cases, an overly creative page can play a negative role.

How to create and install a stub on a website?

There are several options for creating a stub page. The choice depends, for example, on whether the site works on a ready-made CMS, whether there are corresponding plugins for it, etc.

But in general, a stub is a full-fledged page of the site and should be approached in the same way for its development. Initially, a prototype of the template is designed. Elements of the future stub are placed on it in a graphical form, usability is also being worked out. Further, based on the prototype, a template layout is created with the finished design.

Creating a website stub from a ready-made HTML template

If you do not have the resources or desire to create a prototype and layout of the template from scratch, you can use ready-made solutions.

One of the popular sites on which you can download and further edit templates in a convenient graphical editor is Nicepage.com… Here are dozens of ready-made stub pages, before downloading which, you need to install a graphical editor.


Graphic editor Nicepage.com

After that, a template is selected on the site, on the page of which there is an identifier – we indicate it in the installed editor and the template will be available for editing.

Choosing a template on the site
Choosing a template on the site

Search for a template by ID
Search for a template by ID

Each element of the page is editable, so you can create a great placeholder in just 10 minutes.

Editing the template
Editing the template

After it is created, it is suggested to export it in various formats.

We export in the format we need
We export in the format we need

Conveniently, all exported templates from the editor are adapted for different types of devices (mobile, tablet, desktop), and you can see how they will look in one resolution or another in the program itself.

Adaptability check
Adaptability check

More details about tariff plans and terms of use of templates can be found at website

Examples of stubs based on ready-made templates

We have collected the most successful, in our opinion, ready-made HTML stub templates.

An example of a stub for a site - 1
An example of a stub for a site – 1

Link

Example site stub - 2
Example site stub – 2

Link

An example of a stub for a site - 3
Example site stub – 3

Link

Example site stub - 4
An example of a stub for a site – 4

Link

Example site stub - 5
Example site stub – 5

Link

Stubbing with HTML Code

This method can be used on any site and CMS. Its essence lies in the fact that the page template is laid out in HTML-code, and then installed on the site.

Create a stub file that contains HTML layout with , and blocks.

<!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>

Thus, the entire stub page is assembled.

Next, we place the created HTML file to the root of the site via FTP.

We find the .htaccess file in the same place, open it with a text editor (you may need to copy it to your computer for editing, and then replace it).

At the very top of the file, we write:

<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>

The second and fifth lines contain the name of the generated stub file, to which users and crawlers will be redirected. The third and fourth are the IP addresses from which it will be possible to enter the site without redirecting. Usually, the data of administrators and those who work on the site are registered there.

Plugins for CMS

Most of the popular CMS, such as WordPress and Bitrix, have ready-made plugins that allow you to activate and install stub pages. This greatly simplifies the job for inexperienced webmasters.

For example, the plugin is popular for WordPress WP Maintenance Modewhich has over 800k active installations in the repository. It allows you to create beautiful and modern stub designs, including integrating animated counters, contact forms. At the same time, all templates are adapted for mobile devices.

For Bitrix, you can also find ready-made plugins, for example, the eponymous “Stub: technical work, the site is under construction“. The developer company provides all technical support for the paid versions of the plugin.

Examples of design of stubs for sites

Example - 1
Example – 1

A stub in a minimalist style, links to social networks and a form for signing up for notifications are indicated, as well as a timer before the launch of the site.

Example - 2
Example – 2

This is an extended version of the stub, which includes the first screen with a timer, there is a main navigation menu, since the plug consists of several screens. As blocks, you can use information about the company, an extended feedback form, etc.

Example - 3
Example – 3

Site maintenance notice and contact information, in some cases this is sufficient.

Example - 4
Example – 4

A stub with an abstract background image, in general, it is advisable to adhere to the style of the site.

Example - 5
Example – 5

The name of the project, a timer with a countdown to launch, and a subscription form are indicated.

So, now you know how to make a stub and install it on the site, the main thing in this is the correct definition of its goals and objectives.

# Web development

Leave a Reply

Your email address will not be published. Required fields are marked *