One-page scrolling websites have become increasingly common, often enhanced by the so-called “parallax” effect, where objects and background images move at a different rate than the foreground. These trendy sites are perfect for telling a single story in a linear format. They also make great “microsites” — sites used to promote a specific event or occasion — or landing pages for larger websites.
One of my favorite sites was created for the 50th Anniversary of the Seattle Space Needle and includes a great scrolling home page experience that actually scrolls in reverse. The creators use stunning imagery to provide you with a virtual tour as you “travel” up to the top of the Space Needle and beyond. This site also works on mobile devices, though it takes a long time to load.
There’s no doubt that scrolling sites like these are gorgeous to look at and fun to navigate, but they often come with their own set of challenges. Is a scrolling site right for your organization? The answer depends on your goals and expectations…
One-page sites may seem easier to program and manage than traditional websites, but in practice they come with a different set of challenges. For example, if a one-page site incorporates a ton of text, photos, videos, or fancy scrolling effects, it can become very content heavy. The result can take a long time to load, which can harm SEO by increasing the number of users who abandon the site.
In addition, a one-page site can only contain one keyword in the site’s URL and incorporate one H1 tag — another strike for search engines — unless you divide the homepage into multiple pages. One way to get around this is to design a cool scrolling homepage that links to a more traditional website.
None of these challenges are deal-breakers, but paying attention to details like these can make or break a one-page site. Here are a few examples that illustrate the difference — click through to get the full experience of each one.
What’s Working
Walt Disney Concert Hall developed a beautiful microsite in honor of their 10th anniversary that reflects the beauty of the actual concert hall itself. The site does a beautiful job of organizing and displaying information, both about the creation and design of the concert hall as well as program highlights for their 2013/14 season. Unlike many one-page sites making the rounds in the cloud, this one saves bandwidth — and thus loads faster — by omitting the popular “parallax” effect.
Another great example of a scrolling site is this one created by Jessica Hische — an illustrator and type designer — announcing her engagement/wedding by visually telling the story of how she and her fiancé got together. The illustrations — each donated by a friend — and layering effects give this site incredible dimension and visual interest. This site not only looks cool, it shares their story with their wedding guests in a creative and engaging way while ultimately allowing guests to RSVP to their wedding by inputting a password.
What’s Not
The official site for the movie The Wolf of Wall Street incorporates a mix of video and still photography. The complex interface uses traditional top-to-bottom scrolling as well as left-to-right scrolling and clicking. The site requires long loading times and the scrolling motion isn’t intuitive. What’s more, many of the most entertaining desktop scrolling effects aren’t available in the mobile version.
For more inspiration, check out this collection of examples that use parallax scrolling.
But is it right for your organization?
As trendy as the one-page scrolling format seems, it has clear strengths and weaknesses. If your primary interest in creating one is because everyone else is doing it, you’d be wise to take a step back and make sure it’s right for you.
First, consider your message. If it’s simple and concise, or if you’re promoting a one-time event, a one-page format may be right for you. If you have a more complicated message or many large files to share, a more traditional site might be in order to keep load times quick.
Consider your goals and your target audience before you commit to a one-page design. If SEO is a key part of your strategy, you’ll need careful advanced planning to create a one-page site that is both visually appealing and friendly to search engines. You’ll also want to be sure the site performs well on smartphones and tablets, especially your audience is tech-savvy.
Need help with converting an existing site to a scrolling design (or want a special event microsite to take this trendy look for a spin)? We’re eager to help boost your mission’s efforts!
|