Close Menu

Websites as Storytelling

September 21st, 2011
By: Becky Lang

Lately I’ve become interested in the idea of using one-page HTML5 websites as storytelling devices. You’ve probably seen examples like Lost World Fair’s Atlantis:

Picture 2 500x444 Websites as Storytelling

But Nike Better World is my main object of study.

Picture 3 500x302 Websites as Storytelling

Why settle for a free PDF or a hasty about page when you can create a scrolling, moving, mystifying website to do the same thing?

Studying these sites, I’ve realized that there are many levels of storytelling, that go beyond just the writing and design.

Raw code as design and storytelling

Even in the CSS, you can see a lot about the project. It’s interesting to look at the way people arrange their styles and use comments to create structure and organization. The beginning of the Nike Better World stylesheet uses comments to look like the beginning of a real book, creating a table of contents and referring to parts of the site as “stories,” not just divs.

Picture 1 Websites as Storytelling

I stalked the creators‘ portfolios for awhile and found their main hub, a place called Thinking for a Living, which features creative writing essays about selected designs. Their HTML has a similar hidden narrative.

In the head of the site, they added a short manifesto:

Picture 4 Websites as Storytelling

Part of what’s interesting about these developers/ designers is that they treat their projects like films. Why shouldn’t a website have a table of contents, chapters, stories and credits?

More interactive, but less complicated

When you create a one-page website for a story, it starts to feel like something you can dig into. You can highlight all the text, copy, paste, email, remix. You can hover and watch it change colors. You can click its inner links to navigate around.

When this is done in HTML5, it starts to feel simple rather than complex. There’s no Flash player needed, no text made out of images. It’s all part of the same fabric.


Unless you somehow put a paywall on a 1-page site story, it’s going to be free. Anyone can access it at anytime, and there’s something democratic and cool about that. For brands, having your story be free is a given, but for publishers, that’s going to take more convincing. Then there’s the question of perceived value – are people more likely to read something if they pay for it? Probably. But they’re also more likely to read something if it’s beautiful, and unlike most stories they’ve ever seen.

I think in the future we’re going to see a lot more brands opting for one-page sites like Nike Better World, at least as part of their marketing.

What do you think?

  • ninjabiscuit

    For a (slightly) more standardized version of the credits you mentioned above, try looking for humans.txt in your favorite websites. I.E.

  • ninjabiscuit

    For a (slightly) more standardized version of the credits you mentioned above, try looking for humans.txt in your favorite websites. I.E.