How to make a stub page. Leave your contact information

A stub is a page that is placed on a site when it is unavailable for one reason or another. For example, when you are finalizing or changing the design of the site and at this time it is unavailable or is displayed somehow incorrectly. It would be advisable to put up a stub page at this time, on which it will be written that the site is under maintenance.

So let's get started...

We will make a simple placeholder with a background image and text that .

Let's create a folder on the computer in which we will place all the necessary files for our stub.

In this folder we will create another folder called images. In it we will place our background image and, possibly, other images that may be needed during the work.

Open the Notepad++ program (or a similar one, for example Notepad). We create new document. Next - File - Save As, select our folder with the stub and save the document with the name index.html

This is what should now be in our folder:

Open the file index.html in our editor (after saving it should be open for you). Now we need to make sure that the encoding of this file is set correctly. To do this, go to the “Encodings” menu item and click on “Convert to UTF-8″

In order not to accidentally lose the achieved result while working, I recommend periodically saving the document while working. This can be done in the "File" menu or with the keyboard shortcut "Ctrl + S".

We write the following code in the editor:

Any web page consists of these tags.

Now let’s add a title to our page, because it won’t be very nice when someone opens it and sees index.html in the title of the browser tab (you can open the page in the browser and see what happens). To do this, add the following code between and:

The site is under maintenance

Background picture

Now let's select a background image for our placeholder, and then return to editing the page.

To do this, go to Google Images and look for an interesting picture that could serve as a background for our page. It is important to select an image with a width of at least 1920 pixels so that our page looks good on large screens. I entered into the search bar and selected one of the pictures.

Open the image in full size and save it to your images folder. Then we rename it. Let's call it bg (don't forget about the image format, in my case it's jpg).

Here's what I picked up. This is a photo of the city of Chicago. In my opinion, it is quite suitable for the background image of the site.

We attach a background image to the page using CSS styles:

The site is under maintenance

The text will consist of a title and, in fact, a paragraph of text.

The site is under maintenance

Here's what happened:

Now we will add our contacts so that visitors can contact us immediately, and not wait until the work on the site is completed.

Let's add 3 blocks containing the phone, Email and Skype.

The site is under maintenance The site is under maintenance, check back later!

The site is currently undergoing engineering works. Please come back later or contact us in one of the following ways:

Tel.: 333-33-33

Email: [email protected]

Skype: admsite_ru

All that remains is to work with the styles.

Let's enlarge the title, align it to the center and lower it closer to the center of the screen.

Let's increase the font of the text paragraph to twenty pixels and make a small indent from the heading. We will also make a border at the bottom of the text, which will separate it from the contacts.

Let's make blocks with contacts in 3 columns, increase the font, align each block to the center and change the text color.

The site is under maintenance The site is under maintenance, check back later!

The site is currently undergoing technical work. Please come back later or contact us in one of the following ways:

Tel.: 333-33-33

Email: [email protected]

Skype: admsite_ru

As a result, we have a placeholder page that we can use when the site is undergoing technical work.

When a site is awaiting launch or is under renovation, there is a need to notify site visitors that it is about to open. And the perfect solution to this problem is to create landing page with appropriate notice.

As modern web development tools have evolved, pages like these have evolved from simple pages with text into more interesting solutions.

Creating such a placeholder for the site increases the level of expectation of visitors, thereby creating interest among them. In addition to simple notification, it is also possible to collect information about interested users by inserting subscription forms and feedback.

In this tutorial, we will create just such a stub for a site, which will contain a subscription form and a countdown timer, implemented using a jQuery plugin from Keith Wood.

Materials needed for the lesson:

• Any background image
• Time and patience.

index.html - main project file

“js” folder – folder with JavaScript/JQuery scripts

folder “img” - folder with project images

“css” folder – folder with project style sheets (css files)

Let's get started

The first stage of work will be connecting to the main html file of style sheets and jquery libraries.
We include the files inside the head tag.

Coming Soon with Counter

HTML

Let's create markup for our html document. All page elements will be inside a div tag with the identifier “container”. Inside this block we will have headers, a counter, a feedback form and a footer (the bottom block with copyright).

Our website is Coming Soon WE APOLOGIZE FOR INCONVENIENCE

YOU NEED TO WAIT...

SEND ME DETAILS ABOUT IT

Copyright - 1stwebdesigner.com - 2014

Notice that we left the div with the ID "counter" empty. We will later use this identifier to associate it with our jquery plugin and add css styles to it.

CSS

Now let's create a css file for our project, which will contain all the styles. First of all, let's add styles for the main elements: body, h1, h2 and the block with the identifier “container”. For the “container” block, we specify the width as a percentage so that it changes depending on the size of the browser window.

For the h1 tag, apply a CSS3 transformation, which will allow it to rotate 360 ​​degrees along the X axis. You can read more about this property.

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

The next step is to create a cross-browser style for the text field.

::-webkit-input-placeholder ( color: #fff; ) ::-moz-placeholder ( color: #fff; opacity: 1; ) ::-ms-input-placeholder ( color: #fff; opacity: 1; ) .placeholder ( color: #ff; )

Now let's create styles for our counter. Let me remind you that in an html document it is located in a div block with the identifier “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; )

Now let's add styles for the feedback form. The maximum width of the form will be 610px and we will set the relative positioning for this form (position:relative). Let's place the button to send a message to the right of the text block and set its absolute positioning (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; )

And at the end we will add properties for the elements of the footer block.

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

To make our page responsive, we will add media queries. You can read more about this property (English)

@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; ) )

If you check the page display in the browser, it should look like this:

JQuery

Please note that we do not display a counter. To make it appear, you need to add the following code before the closing body tag. But before that, download the plugin file, specifying the path to the file.

Then add the following code to display our counter. You can change the date on the meter according to your wishes. It is enough to specify the desired date inside the “launchdate” parameter.

$(document).ready(function() ( var launchdate = new Date(2014, 6 - 1, 7); $("#counter").countdown(( until: launchdate )); ))(jQuery);

Conclusion

Congratulations! You've just created a cool countdown timer page. This page will allow you to inform your visitor about the launch date of your site and not lose it.

I hope you enjoyed this lesson. Leave your comments and questions, I'm always happy to answer them.

If you are planning a redesign of your website, carrying out routine maintenance on it, or launching a new web resource, then it is very important that visitors are not greeted with a blank page. People who visit the site will be lost in the mysteries of what is happening, and this is not very good. It is best to take care of users and inform them about the soon opening or resumption of the site using a special HTML page. In common parlance, such a page is called a “stub”. Its importance can hardly be overestimated, especially if you want to talk about your site and promote it a little. There are two types of stub: it is either a static page that tells users the information they need, or a page that arouses curiosity and forces the visitor, for example, to subscribe to notifications. FreelanceToday brings to your attention 10 free HTML templates to create attractive placeholders for your websites.

Heartbeat is a simple and stylish HTML template. The clean monochrome background image and countdown timer make this plugin ideal for business websites.

The Moon template is great for website PR. There are several points on the page where you can place important information and countdown timer. The page is responsive, it was created using HTML5 and CSS3, is displayed in most browsers and looks good on mobile devices.

Layla is one of the best free HTML templates for creating a stylish placeholder. Good color scheme, correct mesh and elegant appearance make this template ideal for use on fashion websites.

A great cross-browser template for creating a strict stub. Easy to customize and display well on mobile devices. There is a countdown timer and the ability to connect a melody.

This template is clean and modern design. Pros: adaptive design, contact form, cross-browser compatibility. The template was created using resources, all images are included.

A good placeholder that would be appropriate on tourism websites. Template features: 8 color schemes, W3C HTML/CSS validation, countdown, contact form and the ability to subscribe to notifications, parallax effect on the background, navigation bar.

A plug that has serious functionality. The template is easy to customize and compatible with most browsers. Pros: Google maps, countdown timer, section where you can post information about your team, footer with contact information.

The UX template is suitable for most websites. The plug has an animated timer, contact form, icons social networks. The template is easy to customize and does not require special knowledge of HTML/CSS. The template is responsive and cross-browser.

Stylish and at the same time functional plug. Features: 100% responsive design, cross-browser compatibility, Google Maps, Twitter integration, two header styles with parallax effect and slider. There is also a countdown timer where you can quickly correct the site launch date.

An elegant HTML template suitable for websites of various subjects. The plug does not have any special bells and whistles, but it has everything you need: timer, central text block For information message, social network icons. The template is responsive and displays perfectly on mobile devices.

Lately, many new resources have been appearing on the Internet: some have launched quite recently, others are about to start, and some have just started developing an online store or another project and are thinking of launching it in six months or a year.

Is it possible to use some marketing elements even before the project with all its functionality is born? Undoubtedly! One of the first stages of marketing is communication with the visitor of a site that is not yet working using stub pages or so-called splash pages.

Not many people use Splash pages, so their presence on the site gives an advantage and an early impetus for development. However, not every plug will work equally effectively. Below are some tips on how to create the right landing page and launch a project in the future, already having a potential audience.

Principles of an Effective Placeholder Page

Placeholders are essentially landing pages, and many of the principles of effective landing pages apply to them. Let's take a closer look at the most important ones and look at a few examples.

1. Know the limits for simplifying a page

On the one hand, the page should be as simple as possible. But it would be a mistake to leave only a message that the site is under development.

The visitor has a logical question: where did I end up and why do I need to perform this or that action that I am asked to do (for example, contact by phone). Add a little more information to the page, making it as useful as possible for both the visitor and you.

2. Provide information about yourself

Show the visitor that he is exactly where he needs to be. Tell him where he is using a short text and bulleted list. This is your first time meeting a person, where do you usually start?

3. You can do a video review

Some sites practice posting video reviews. This good way tell more and more clearly about how you can be useful to the visitor.

Video reviews are a good tool, but don't go overboard. It would be a mistake to annoy your visitor with automatically turning on video or audio effects, unless, of course, your future site is dedicated to online games.

4. Use a logo or other imagery associated with your industry

The images you use on the site should be associated with the company's area of ​​activity or the topic of the project. Women and cats are great, but not always appropriate. This is what a stub page for a radio website might look like:

And here the designer’s creativity is well displayed, although it is not immediately clear that the site will be dedicated to design.

5. Tell us what to expect

It's good that you exist and plan to become closer to Internet users, but also tell us why people should return to your site later? What are your plans for the project or its functionality? Or maybe something else?

Add intrigue to arouse curiosity. For example, a message can be used as intrigue that your service will be a technological breakthrough or that the company will provide discounts or freebies to the first registered customers. Additional services. Below is an example of how the guys from Netpeak created intrigue before organizing the 8p conference, playing at the much-discussed end of the world in 2012. This idea seemed creative to many, and they shared the link to the stub page with their friends on social networks.

You don't have to create intrigue, just encourage the person to come back later. A landing page should not only inform the visitor, but also encourage them to share the page with their friends and return in the future.

6. Leave your contact information

Depending on the topic of the future site, sometimes it is appropriate to leave only an email address, in other cases - more detailed information, including the physical address of the office and its opening hours.

In the future you will need to create a community. Do this right now using ready-made tools - social networks. In addition to the fact that the presence of these links will increase trust in the company and the future site, people included in your community will always be aware of news about the stages of development or launch of the resource.

However, don't social profiles empty, fill them with useful content so that your target audience has something to subscribe to. People don't like or follow low-authority accounts, zero-authority accounts, or profiles with standard avatars (like an egg on Twitter).

8. Place a subscription form for updates

In addition to using social networks, connect email newsletters. Collect email addresses your potential audience now. You can send them a message only when the site is launched, or you can do it regularly, informing them at what stage the development is at or some other important ones in your topic and, of course, useful for those people who trust you with their contacts, aspects .

In addition to the form for sending email, you can use other channels of communication with clients/audience, for example, a blog, adding it to a subdomain or subfolder and installing standard WordPress there. Perhaps this blog in the future will not only have a positive impact as an inbound marketing tool, but will also help increase the authority of the resource in the eyes of search engines.

9. Add a call to action

Your first goal is to build an initial audience and get people to come back once the site is live. By calling the user to action, you communicate your intentions and remind the visitor of their options. “Subscribe”, “Look first”, “Come back”, “Contact us”, “Read more about us”, “Follow us on social networks”, etc. Use one or more calls to action depending on the size of the stub page. If you simply write that the site is under construction, then few of your current visitors will return to it in the future.

In the example below, the call to action is located at the top right with an arrow, and also again at the bottom of the page, along with the notification subscription form.

10. Don't optimize stub pages for search engines

Of course, stub pages are also good for SEO, since you can start promoting a site without even having one. At a minimum, the resource will already be in the index; at a maximum, you can already post links to it both on forums or on social networks, and in print media.

And while stub pages can be used for SEO, they serve more of a marketing purpose. It is strongly recommended not to spoil the first impression of a resource with SEO text.

I hope these tips will help you fill out technical specifications for programmers now. Below are two more examples for motivation. :)

Come up with your idea and set up a stub page today, so that when you launch your site, you don’t have to look for an audience, but continue to work with it!

A beautiful website remains in the visitor’s memory for a very long time, and this is undoubtedly wonderful. Today we would like to talk about a wonderful plug for your site, namely an interactive animated page that will constantly be in motion, in addition to responding to the mouse cursor and performing actions. The idea is to create a land and an airplane that will constantly be in gliding; when the cursor moves, the airplane will change its position. This kind of interactive looks very cool and pleasant.

SOURCES

This page can be used as a website background, a page with a small text message, or a placeholder on a page; in any case, you can’t go wrong. This effect is achieved thanks to the jQuery-Three.js 3D library.

Step 1. HTML

Our markup and styles will be quite simple, since Three.js will do all the work, and the parameters that we specified in JS, all we have to do is call these functions by assigning id="world":

The styles are also quite simple, so we won’t dwell on them and move straight to the next step.

Step 2. JS

All event processing will be performed by JS and Three.js. To implement such a layout, we set the following values ​​for the looping, random event.

Var Colors = ( red: 0xf25346, yellow: 0xedeb27, white: 0xd8d0d1, brown: 0x59332e, pink: 0xF5986E, brownDark: 0x23190f, blue: 0x68c3c0, green: 0x458248, purple: 0x551A8B, lightgreen: 0x62926 5, ); var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; function createScene() ( // Get the width and height of the screen // and use them to adjust the // camera aspect ratio and renderer size. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Create the scene. scene = new THREE .Scene(); // Add a FOV fog effect to the scene. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Create a camera aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Camera position camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Create a renderer renderer = new THREE.WebGLRenderer(( // Make the background transparent, anti-aliasing performance alpha: true, antialias: true )); // set the renderer size to full screen renderer.setSize(WIDTH, HEIGHT); // enable shadow rendering renderer .shadowMap.enabled = true;//Add Renderer to DOM and DIV events container = document.getElementById("world"); container.appendChild(renderer.domElement); //Responsiveness window.addEventListener("resize", handleWindowResize, false); ) //Responsiveness of functions function handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, shadowLight ; function createLights() ( // Color gradient light sky, ground, intensity hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Parallel rays shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // define the visible area of ​​the projected shadow shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight.shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // Shadow map size shadowLight.shadow.mapSize.width = 2048; shadowLight .shadow.mapSize.height = 2048; // Add lights to the scene scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //rotation along the x axis geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //create a material var mat = new THREE.MeshPhongMaterial(( color: Colors.lightgreen, shading: THREE.FlatShading, )); //create a mesh of the object this.mesh = new THREE.Mesh(geom, mat); //receive shadows this.mesh.receiveShadow = true; ) Orbit = function() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( color: Colors.yellow, shading: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Create an empty container for the cloud this.mesh = new THREE.Object3D(); // Cube geometry and material var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math.random( ) * 3); for (var i = 0; i

As a result, we get a wonderful site plugin with responsiveness and adaptability.