OnePager

OnePagers are websites that present their content to the visitor on only a single page and are usually built from one HTML document. Parallax scrolling and jump masks are usually used for navigation. Thus, the visitor of the site can reach relevant sections through links placed in the navigation bar or simply scroll down. Other names for the OnePage are also single-page web application or single-page application.

Definition and general

Internet pages that have only a single HTML document as their basis are very different from conventional websites. This is especially true with regard to their infrastructure and information architecture. The conventional websites are called Multi-Page Applications.here the content is structured by sub-pages. This is taken care of by events and sections in the OnePager. Sections can be compared to the different chapters of a book. The individual sections are reached by visitors by scrolling. Jump labels, whose function corresponds to that of normal hyperlinks in the internal link structure, can also be used so that the visitor can directly reach the content that is of interest to him. The behavior within the application can be influenced by events.

This corresponds, for example, to the integration of effects, animations or graphic elements through which the user experience is actively shaped. For example, an arrow can lead the user to the next topic section. The narrative structure of the website is thus supported by the graphic elements.

A OnePager usually makes the client-side architecture much more complex, as special Java Script frameworks are used for this purpose. Known Single Page Frameworks are for example

• React
• Vue
• Angular

With the help of these frameworks, as well as with asynchronous transfers of data, the interactive applications can be developed on the web.

Rich Internet Applications do not necessarily require an exchange of data between server and client. In this way, the behavior and certain events of the web application can be controlled in the case of previously defined states and the dynamic loading of content can be realized. The consequence is an increased usability, as well as partly a better website performance.

How does a OnePager work?

The goal of a OnePager is to provide a cohesive user experience. There are various guiding ideas that need to be pursued for this. These are explained below:

• The Parallax Scrolling: When the visitor scrolls down the web page, the speed at which the different levels of the page move is different. This creates an impression of depth. The image in the background moves slower while scrolling. In this way, the content is placed in the centre of the user’s perception.
• Flat Design: This is a design principle that is very minimalistic. Visual embellishments such as textures, shadows or ornaments are dispensed with and the focus is placed on functionality. Advantages that arise from this are, for example, a higher clarity, a highlighting of the contents and improved loading times of the website. It also makes it easier to lead the visitor to an action. The call-to-action can be easily integrated and thus contribute to an increase in conversions.
• Interactivity: When animations, scripts or other effects are integrated into single-page applications and OnePagers, customer engagement can be promoted. Within the HTML document, users can use and navigate through the web page by performing various actions.

When scrolled down, storytelling can be supported by graphic elements. If selected elements are selected, a more appealing presentation of content and information is possible. The result is the so-called Joy of Use between the website and the visitor. With OnePagers, the logic of presentation follows the focus on increased interaction.

• Storytelling: Storytelling benefits in a certain way from the possibilities that OnePagers offer in technical terms. All contents are displayed on a single HTML page. This gives the visitor the impression that the information conveyed is related in terms of content. This means that there is always a common thread in the information, so that users internalise the message more quickly.

The history of the website is explored piece by piece by the user via parallax scrolling and interactive elements. Actions, such as ordering a product or filling out the contact form, are thus more likely to be carried out by the visitor.

Where are OnePagers used?

A OnePager is not suitable for all websites. For example, online stores rely on offering multiple levels of content so that different product categories can be displayed. Websites that have a wide range of topics also make better use of multi-page designs so that they can cover the different topics and content. OnePagers are suitable for topics that are clearly delimited and offer only limited information. These include, for example:

• Landing pages for individual services and products
• Online business cards for small companies, self-employed and freelancers
• Projects and events
• product launches
• Advertising campaigns

Depending on the scenario, the concepts of storytelling, interactivity and design can be different. It is important that the conceptual and strategic considerations are always based on the content of the page. The technical implementation and the content can complement each other well. A responsive design should also be considered so that the page is optimally displayed on all devices.

Importance for online marketing

Even with OnePagers, there are a few things to keep in mind regarding SEO. Some aspects of semantics must be excluded from the outset. Optimization of OnePagers is usually limited to only a few phrases, and coverage of long-tail or mid-tail keywords is usually not fully comprehensive. Nevertheless, crawlers must be able to reach the content. Therefore, the accessibility and crawlability must be the same as for other projects.

The length of the content is also relevant. Storytelling is only successful if the content does not overwhelm the user. Good structuring of content is a must. Selectors of CSS and the mark-up of HTML5 can be used for this. For example, content can be structured by sections and headings. The naming is done by tags and CSS selectors. Jump tags should always have a clear label so that users and crawlers can see exactly where it links to.

Conclusion

If an optimal implementation of OnePagers takes place, then KPIs can possibly be increased, such as scrolling behavior, user interaction and dwell time. According to Google, however, the prerequisite for this must be that the OnePager is implemented flawlessly. Success depends mainly on the general implementation, design and theme. Before putting a OnePager online, extensive testing should be done regarding Google crawling.