Tag Archives: site organizaton

The Beauty of a One-Page Site

Want to build a website, but don’t want to have to deal with tons of pages?

Well, these days you don’t have to! One-page sites are not only useful–they’re a Web “trend” that’s become a staple.

Why Choose a One-Page Site?

It used to be that lots of separated pages were just about required for having a “good” site. But these days, with wide screen monitors and larger screen resolution sizes, we designers and developers can put more information on one page without it looking crowded and hard to read. This can (potentially) be easier to code as well as to design, with less content files and more ability to concentrate on attractive design and function elements.

(click for larger image in new window) Take my about me page on my domain, for instance. I condensed all the information that used to make up my overly-complicated personal SITE and made it into a much simpler PAGE, using banner-like columns in different colors to organize the information in a pretty but functional way. No scrolling, no extra pages–just a well-designed presentation of who I am.

One-page sites are great for personal “about” sites like mine, but there are many other applications for this design/development style, including:

  • Homepages for apps
  • Portfolio pages for creators and performers of all sorts
  • Online resumes
  • Lifestream aggregators
  • Small fansites

How to Design a Great One-Page Site

One-page sites can be floridly designed like an onscreen, interactive painting, or they can have a more minimalist vibe, or anywhere in between; your site designs don’t have to be hampered by the lack of “pages.” In fact, as the following sites will show, it can set you free from web design cliches!

OnePageLove, OnePageMania, and WebDesignerDepot’s pictorial article on single-page sites are all great places to start gaining inspiration for your own designs. When you’re ready to start coding, check out TeamTreeHouse’s list of open-source jQuery plugins for one-page sites and 1stWebDesigner’s parallax design tutorial, both key for building sleek, interactive one-page sites. (Or you could just do what I did and fit everything onto one page literally and figuratively without any special code…but then again, I’m not exactly on the cutting edge when it comes to web design, LOL!)