The Art Of The Single Page Web Site

Designers are using their skills to create one page web sites to showcase portfolios, applications, launch sites and landing pages. The skill lies in providing the user with the information they need in a single page. It is a challenge both in terms of design and writing, to produce a site which is brief and straight to the point. In this post we’ll take a look at a small selection of creative sites which manage to fulfill these requirements.

While some sites have minimal information, others have managed to cram the same amount of information onto one page as a multi-page web site. The sites which contain a lot of information tend to use a navigation bar but instead of jumping to a new page, there is a jump farther down the same page, often using jQuery to provide a smooth downward or upward scroll.

So without further ado, for your inspiration and viewing pleasure here’s a collection of eight beautifully designed sites which endeavor to provide all the information required in just one single web page.

Mitchell Shepard uses a letterpress effect on his single page site, which offers links to his work on Behance and contact on social media sites.

MitchellShepard

It’s The Jumpoff is a long one page online wedding invitation.

Jumpoff

Aboard Entrepreneurship has beautiful nautical illustrations and a smooth scrolling action.

Aboard

HTML 5 Poster is a simple sales page for an illustrated poster by Will Phillips.

HTML5

Fliprate is a single page site dedicated to an iPad application. It’s nicely designed with an attractive wooden background which scrolls seamlessly.

Fliprate

Visual Republic have a retro style portfolio site with beautiful typography, all happening on one page.

VisualRepublic

Empire State Recordings provides music samples and information in a small space.

EmpireState

135 Design is a portfolio and contact site for an Italian company.

135Design

Do you like single page web sites? What other “one-pagers” have you come across that you felt were really nicely designed?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Will

    Thanks so much for including my HTML5 Poster page. I’m honored. I may be a little biased, but nice article. :) And great round-up. I think this is a growing trend that we’ll start to see more of.

  • http://www.tyssendesign.com.au Tyssen

    Here’s one for a law firm that also uses HTML5 and CSS3: http://grigorlawyers.com.au/

  • flash

    really nice collection // i currently have a one page site (( http://bkpkr.info )) that i’m looking to remix — gonna use these links to do so (:

  • http://www.tyssendesign.com.au Tyssen

    I forgot about: http://onepagelove.com/

  • jluce

    It may be just me, but a “one page” web site that navigates off the page to another web site for information is actually a multi-page web site. A 1 page web site needs to stand on its own, like Empire State Recordings where all the information and “try it” are all there.

    I don’t count pointing to purchase points as a strike against it.

  • http://justcarl.me Karl

    Amazing examples.
    I specially liked the Mitchell Shepard , it’s so simple but complete. Very well done

  • Anonymous

    Have users abandoned their fear of the scroll wheel?

  • Anonymous

    Have users abandoned their fear of the scroll wheel?

  • Joe Martin

    If you expect people to scroll….DOESN’T HAPPEN!
    I have over 100 sites up at the present…if the data is below the visible screen…
    if you are lucky 10% of the viewers will ever see it.

  • Ekta

    Amazing examples.
    I specially liked the Aboard Entrepreneurship .
    if you can give one page website example on weather report which only describe the temperature, then plz do this. i need it………………