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.
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.
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.
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:[1]
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.
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.[2]
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.