One Pager

A one-pager is a website which consists of an HTML document and all of its content on just one page. Usually, you navigate through with skip links and parallax scrolling. With this, users can scroll down or reach corresponding sections with clickable links in navigation bars to view the content that is not displayed above the fold. One-pagers are often also referred to as a single-page applications or single-page web applications, especially when interactive elements, animations, and CSS effects, as well as the dynamic presentations of the content are used. One-pagers can create a coherent and interactive user experience by the web design improving storytelling from a technical point of view and exploiting the possibilities of web technologies such as HTML5, CSS, and various scripting languages.

General information

Websites that consist only of an HTML document differ significantly in terms of their infrastructure from conventional homepages with subpages, also called multi-page application. While multi-page websites structure content with subpages, one-pagers are divided into sections and events. Sections are similar to the chapters of a book. Users reach these sections by scrolling. It is also possible for skip links to work like traditional hyperlinks and direct the users directly to the content of interest to them. Web designers can also define events that influence the behavior of the web application. This allows you to integrate graphical elements, animations, and effects to help shape the user experience. Clicking on an arrow, for example, may take you to the next section where graphical elements support the narrative structure of the website.

In addition to client-side architecture, one-pagers also reduce client-server communication. Interactive web applications can be developed by means of special JavaScript frameworks such as Angular, Ember or Backbone, asynchronous data transmission with AJAX, protocols such as WebSockets, and browser plug-ins such as Silverlight, Flash, or Java applets. These applications, or rich internet applications, do not always require data exchange between the client and server so that the behavior of the web application can be controlled and dynamically loaded for specific events or defined conditions of the website. This results in an improved operating experience when implemented accordingly and can also influence the performance of websites.

How it works

One-page websites are designed to provide users with a coherent user experience. This is usually achieved by guiding principles, which are briefly outlined below.

• Parallax Scrolling: When you scroll down a website, individual layers of the site move at different speeds. This creates an impression of depth. For example, while scrolling, the background will move slower than the text content.

• Flat Design: Flat Design is a minimalistic design principle that puts the functionality of the application into the foreground and does away with optical ornamentation and elements such as shadows or textures. This results in advantages such as greater clarity, increased concentration on website content or better performance characteristics (such as loading times). In addition, users can be easily led to an action by, for example, adding a call-to-action element to increase conversions. A definite prerequisite is that the call-to-action elements are clearly visible and correctly implemented technically.
• Interactivity: One-page websites and single-page web application can promote customer engagement by incorporating scripts, animations, and other effects. Users can navigate within the HTML document and use the website with various actions. If you scroll down, graphic elements can support storytelling and direct you to the call-to-action button. By clicking on selected items, certain information can be presented in a more appealing fashion, so that the interaction with the website results in joy of use. One-page websites are generally designed for an increased degree of interaction.
• Storytelling: The technical capabilities of one-page sites facilitate storytelling in a specific way. Since all content is displayed on an HTML page, you get the impression that the content is interrelated information. Correspondingly, information can be presented in such a way that a common thread is recognizable and you get the message without any detours. With interactive elements and parallax scrolling, you will literally move through the story of the site. This guides the visitors and directs their attention to the core information. You are often directed to an action, such as completing a contact form or ordering a product.

Practical relevance

One-page websites are not suitable for any type of website. Online stores are dependent on several content levels to display products from different categories, for example. Websites that cover a lot of topics use multi-page approaches as well to cover different content and subjects. One-pagers are only suitable for clearly delimited topics, as well as a limited amount of information. For example:

• Advertising campaigns
• Product launches
• Events and projects
• Online business cards for freelancers, self-employed people and smaller companies
• Landing Pages for individual products and services

Depending on the usage scenario, the considerations about design, interactivity, and storytelling may vary. Fundamental strategic and conceptual considerations should therefore be oriented on the content to be presented. How can the content be presented in a specific way so that users can carry out a desired action? Content and technical implementation can complement each other in this context. It is also recommended to use responsive design to make the content available for different devices.

Relevance to online marketing

As with traditional websites, one-pagers have many different SEO guidelines and tips to take into account. One-pagers usually take up a clearly defined topic. Therefore, certain semantic aspects must be excluded from the outset. One-pagers are generally optimized for a few search phrases. Midtail and longtail keywords can often not be covered. The entire content still needs to be accessible to crawlers crawlability regardless and accessibility is a must, same as for other websites.

The length of the content is also relevant. Storytelling is only successful if users are not overloaded with content. The content itself should be well structured by using the markup of HTML5 and the selectors of CSS. Content can be structured with headings and sections, and can be named using CSS selectors and tags. The use of several H1 headings is still questionable in the SEO industry. Some developers advise you to do so with one-pagers. The same applies to skip links. They should be clearly labeled so that both crawlers and users can easily recognize where a skip links will direct them.

If single-page web applications are well implemented, they may increase some KPIs, length of stay, user interaction or scrolling behavior, for example. However, according to Google, a prerequisite for this is flawless implementation. The success of single-page applications depends on the topic, design and general implementation. The Google crawlers no longer have any problems with CSS and CSS effects, said Matt Cutts. He advises, however, to get done extensive testing before a one-page website goes online replacing a multi-page website.