Landing Page as a replacement for the entire site

Hello, dear users! I suggest to talk about landing page. Many of you have heard, but for sure, most know what it is. But I would still like to focus a little on this.

Landing page (Target, landing page) is an opportunity for a seller or a service to tell about their products and services the most important thing in a few seconds, and for a potential client to make sure that he is “right on target”. One of the tasks of creating landing pages is to form a positive perception of advertising and replace the “standard” trick based on different implications with a full-fledged information block.
')
Today, with the development of the development of Internet resources is very difficult to stand out in the market, especially for a web studio. Since you need to offer the user something else, unlike analogs in this direction. For a web studio it is important to create your own personal, creative website to attract customers and demonstrate your own capabilities.

In view of the foregoing, it was decided to develop a one-page website, but with a well-constructed structure for the convenience of the user: so that the search for the information he needs does not take a long time. The choice fell on a one-page website because it takes some time to follow links, and I would like to avoid this and give the user all the content at once.

I would like to tell about the process of creating such a resource, which tools were chosen, why the choice fell on these tools, etc. And I want to share this on the basis of comments and feedback from users and outsiders.

Development process

Like any development process, everything began with the choice of design and the right tools. Why this design was chosen, I will not tell, because this article is not about that. It's about the design itself.

So, after the approval of the design, it was decided to think which stack would be used in the development. For styling the site, it was decided to use samopisnye styles, since the design is individual and the frameworks did not fit. To revive the site, jQuery library was chosen, because with its help you can quite easily manipulate elements on the page, create animations. The most important tool that helped us in development is fullPage.js. This plugin helped to implement the main idea and create a scrolling of full-screen sections.

Writing styles

We stopped at the samopisny style sheet, because the content that is placed in the sections had to change depending on the resolution of the screens.

Using CSS media queries, at different resolutions screens, you can proportionally reduce blocks, fonts, and other elements on the page. Thanks to such manipulations, the same content looks equally well on both large screens and small ones.

I will give below the code of a particular block, where, thanks to media queries, the blocks are reduced.


Picture 1


Figure 2

Let's look at the code:

.animation-box-2 { position: absolute; bottom: 0px; left: 0px; height: 24%; font-size: 36px; } @media (max-width: 1200px) .animation-box-2 { font-size: 22px; } @media (max-width: 1400px) .animation-box-2 { font-size: 26px; } @media (max-width: 1500px) .animation-box-2 { font-size: 30px; } 

As you can see from the code above, at certain screen resolutions the font in the block is reduced or increased. By this principle, the entire landing. This method is very convenient if you have content that should always be visible, but at some resolutions it is poorly displayed or does not fit in the blocks. In such cases, media queries will come to your aid.

Plugin fullPage.js

Now I would like to talk about the most basic concept that was used in this project. This is jQuery plugin Fullpage.js .

When developing this project, there was a question of how to make the site quite easy to manage, informative, but at the same time creative and memorable. After much thought, the idea came up - to place all the main sections on one page and make easy navigation between the screens. When choosing a stack for this task, a lot of pages were viewed on Google, but at that time there was no decent equivalent in functionality (and even now, if you look, there are not so many plug-ins). I will give a couple of arguments why the choice fell on this tool:

1. Easy setup
2. Very flexible and diverse functionality.
3. Cross-browser compatibility (up to ie8)
4. Excellent product documentation
5. Updates
6. Responsive

Below is the code that shows how easy it is to use:

 <div class="js-allscreens"> <div class="js-screen"> </div> <div class="js-screen" data-title="Why choose us"> Some Content </div> <div class="js-screen" data-title="Design"> Some Content </div> <div class="js-screen" data-title="Development"> Some Content </div> <div class="js-screen" data-title="Digital Marketing"> Some Content </div> <div class="js-screen" data-title="Integrated"> Some Content </div> <div class="js-screen" data-title="eCommerce"> Some Content </div> <div class="js-screen" data-title="Niche"> Some Content </div> <div class="js-screen" data-title="Additional"> Some Content </div> <div class="js-screen" data-title="Who We Are"> Some Content </div> </div> 

As seen above, everything is very simple. When creating the HTML structure for this plug-in, the main thing is that all sections that should be included in scrolling should be wrapped with one “div”, the class of which will call the plug-in. As in the example below:

 $(document).ready(function() { $('.js-allscreens').fullpage(); //     .js-allscreens }); 

I would like to give the settings of the plugin, but since there are quite a lot of them, I’ll give the most relevant ones for development:

• anchors - section link identifiers (as an array); allow you to quickly move to the desired section;
• menu - menu identifier; necessary to mark the links corresponding to the selected section;
• scrollbar - if this setting is set to TRUE, the browser's vertical scroll bar will be displayed;
• scrollOverflow - required to display the scroll inside the section, in the event that the content goes beyond its borders;
• navigation - if this setting is set to TRUE, the navigation panel will be displayed in sections;
• navigationTooltips - an array of tooltips; for each item in the navigation bar;
• slidesNavigation - if this value is set to TRUE, the slides section will show navigation through slides;
• navigationPosition - section navigation position (supported values: left and right );
• slidesNavPosition - slides navigation position (supported values: bottom and top );
• loopTop - if this setting is TRUE, the movement in sections will be infinite (but only in the upward direction - to the first slide). If you rotate the mouse wheel forward on the first slide, it will move to the last slide.
• loopBottom is similar to the previous setting, only the direction is down.
• loopHorizontal - similar to the previous settings, only works for slides.

Conclusion

I do not want this article to be regarded as if they are trying to teach you something super-complex or to impose their opinion. Just decided to share the experience of how to create a one-page site with an original look, nice design and informative content. We know that there is still not a presentation quality, but as an exchange of experience, we ask you to love and favor.

Thanks for attention!

Material prepared: greebn9k (Sergey Gribnyak), V1pBoy (Vitaly Kalashnikov), silmarilion (Andrey Khakharev)