One-Page Scrolling Web Sites: a Great New Way to Tell a Story

One of my favorite ways of telling a story right now is the one-page scrolling site. While a Web site is a somewhat comprehensive showcase of everything related to an organization, certain campaigns, events, and other efforts require a different look and feel and need to stand out from the clutter. Increasingly these one-page scrolling sites are popping up to tell stories in interesting new ways.

For those who aren’t familiar, this is a flavor of micro Web site–a small site dedicated to one event, issue, or subject. One-page scrolling sites generally feature a narrative that advances as you scroll down.

These sites tend to encourage interactivity (which is great for readers with increasingly shorter attention spans) and often feature simple but effective visual designs as well as clever transitions, such as fade-ins and parallax scrolling, in which one layer of the background moves at a different pace than another, as in the Smart Phood example below.

Another great feature is that because scrolling down for more information is built into the experience of navigating the site, designers don’t need to cram so much into the top part of the screen.

While print reports and brochures used to accommodate the need to tell these stories, the wonders of the Web are offering much more engaging alternatives.

Here are a few examples from the world of philanthropy:

Bill Gates’s 2013 annual letter. While a little text heavy, and perhaps in need of a font upgrade, this site has some nice features such as big, beautiful photos, embedded video, and a navigation bar that remains at the top of the screen as you scroll rather than disappearing. Trying to dig all this information from a much larger site would be a huge hassle, and it’s easier to navigate than a PDF, which is also less interesting and more limited in its media selections.

Chicoco Radio. This site uses fantastic visuals, including nicely designed sections that lead into high-quality video footage with a unique perspective. The site also begins with a clear description of the organization’s purpose with important emotionally resonant context.

Smart Phood. This site is dedicated to healthy eating habits and does a great job of focusing the viewers’ attention on one thing at a time. This is a big advantage of these sites and a design principle too often overlooked in Web design: People easily get overwhelmed by choice. Designs using bright colors with big icons and nothing to choose from makes it easy to move at your own pace.

Do you have a compelling story that would work as a one-page scroller? If you are working on a campaign that is struggling to get its story out, let us know. Perhaps you are highlighting a social injustice or shining a light on a critical but overlooked issue in education, health, or the environment.

Share your project in the comments below.

If we hear about a compelling story that seems like a good candidate for a one-page scrolling site, we will work with you to create one free of charge and will link to it in a future post.

Please submit ideas only if you are currently working on a project and have the information needed to put a good story together.