A week ago I wrote about important trends that are affecting the design of your website. The paragraph regarding one pagers has triggered some reactions, so I want to go a little bit deeper today. Since one pagers are simply structured, they are very suitable for websites with little content or with content that is closely linked. They are especially popular with photographers and graphic artists showing their work, consultants introducing their services, or companies presenting their products.

More room to manoeuver
A one pager or a single page website has, as its name says, just one page. That leaves a lot of room for the designer to manoeuver. He or she does not have to think in pages or grids; stages or chapters (meaning pages) provide the design frame. This leaves more room, for example, to consistently use a graphic element. Navigation is located on the left or at the top of the screen. To move through the page, you click on the navigation graphic or scroll with your mouse up and down – or with the arrows on your keyboard. One pagers use HTML5 and CSS3; many of them automatically adapt to different screen sizes (responsive design).

There are now many templates on the internet; almost all of them originate in the US. A Google search for ‘one pager template’ results in more than 6.2 million hits. For example, you can find a wide selection of templates, some of them free, at One Page Love, CSS Templates and ThemeForest. Many free templates are good enough and well suitable for practicing. If HTML and CSS are not foreign concepts to you, you will be able to adapt them easily. If you want to make major changes, you should have JavaScript, and perhaps Ajax, knowledge.

One pager - put everything on one page

Practical tips
Five tips from practical experience for practical use:

  • Navigation must be simply structured; three to six navigation points are enough
  • The navigation menu must stay visible, even when scrolling to the very bottom
  • Every navigation point requires an anchor to enable linking within the page
  • Be short, restrict yourself, be succinct
  • Go for alternatives if there is too much content – for example, vertical scrolling

Curious? Look at the examples at Webdesigner Depot and be inspired.

One pager: put everything on one page

Sandro Bertschinger

He didn't find computers very interesting for quite some time. An Amiga 500 as a games machine was the high point at that time. Computers began to move into his focus with the advent of the internet and the possibility of building cool websites. In 2001, he crossed paths with an internet company by coincidence.