As a designer in the ever-evolving world of the web, it’s essential to stay up on hot trends, topics, and methodologies. With that responsibility comes the assignment of analyzing every interactive experience you encounter. For better or for worse, I can’t seem to use a computer, phone, tablet, or touch screen device without picking apart every pixel of the interface or experience of the interaction.
With this vocation in mind, I’d like to talk about something I’ve been noticing a lot of lately: single-page websites. Unlike conventional websites that host several pages (and usually with a hierarchy), single-page websites keep all the content on that site in one, scrollable location. They may feature a conventional navigation, or other nods to familiar website practices, but you’ll know a single-page site when you see it because as you click around the URL will not contain child folders or references to other indexed content. One common practice is that single-page sites will anchor links all on one page, so when a user clicks on a link within the universal navigation or otherwise, they’ll simply go to an anchored section somewhere on that that page rather than an entirely different page on the site. This may be hard to detect at first, but hopefully the following examples will give you a better idea of what I’m spotting in this growing trend.
Issues Single-Page Sites Solve
As interaction becomes more and more screen-based, I think of responsivity (how well your application or website reacts to displaying on a desktop computer vs. a phone or tablet) to designers and developers like the black smoke monster in the TV show LOST—it can sniff out weaknesses, it’ll creep up on you if you’re not watching out, and it can be a beast to tangle with. Because of the complexity of responsivity, I believe single-page sites are a reaction/solution to fully optimizing content for the ultimate, browser- and device-compatible experience. So, is this just another new trend like gradients and rounded-corners, or is it here to stay? Hard to say just yet, but here are some of the difficulties that single-page sites address:
- Complicated Navigation. Single-page sites require only one (or sometimes in the case of scrolling, none) type of navigation. No matter where users go, they’ll ultimately be guided through the site in a linear or non-linear fashion, no matter how the navigation (or lack of) is displayed.
- Catering to minimal or maximum content. Single-page sites range in complexity. For the most part, they’re meant to inform a user about a product or service and generally only have one call-to-action, or funnel the user towards one goal. I’ve also noticed that some companies use single-page sites to cross-promote other services, products, or initiatives within their own company, which take users to entirely different sites.
- Designing for Responsivity. As we move towards an increasingly mobile audience, how well your web page appears on a mobile device is vital. Whether you’re having trouble creating a mobile-friendly menu, or deciding the hierarchy of content for mobile, fully responsive, single-page sites solve these design hurdles by stacking all the content and forcing users to scroll from the get-go. This way, you take a mobile-friendly approach to your design, and the technology doesn’t dictate design.
- Simplistic technology, expedited development. A basic information architecture (IA) and simpler design make for easier programming.
Single-Page Sites in Action
Now that you’ve got a good idea of some of the perks of single-page sites, let’s see a few in action. Here are a few that I have recently discovered, in order from least to most complex:
This is probably one of the simplest single-page sites you’ll find. Its purpose is simply to promote/satirize the HBO series Silicon Valley. Since the content is so simple and short, there’s no need to even use the main nav menu, but if you do, notice that the ScrollSpy dots on the right tell you where you are on the page. It’s also fully responsive, allowing for seamless viewing between devices of any size.
This site, in my opinion, is beautifully designed and intricately executed. Much more complex than Pied Piper, GE’s Ecomagination Global Impact single-page site is a culmination of rich media and diverse content, helping keep users (and designers and developers like me) very engaged! The page’s anchors take the form of different “bands” of content within the site. Instead of a top, horizontal navigation, you’ll notice a ScrollSpy-enabled right nav. Clicking on one of the dots takes you to different bands, or (like one of my outlined characteristics of single-page sites) you can ignore the navigation altogether and simply scroll. Scrolling, by the way, provides a lovely experience as well, since Parallax scrolling is employed. Parallax scrolling is another fun and trendy thing happening on the internet. Perhaps you’ve noticed it while surfing other sites.
Another thing that GE’s Ecomagination site does well is it provides an opportunity for horizontal content. You’ll notice tiny horizontal dots in the middle of your browser frame within almost every band of content. We are familiar with these dots through mobile applications, and they therefore signal to us that there is other content to explore, in addition to the text, video, or images already provided. Since GE is one of the largest companies in the world, you can appreciate the use of cross-promoting other services, products, reports, and divisions within the company. For this reason, the use of a single-page design for the Ecomagination site provides the utmost exposure to content, as it is not buried within other pages like in a conventional site. Finally, the only thing that does not make me die of starvation from the digital drooling I do over this site is the fact that it’s not fully responsive. Almost a perfect 10, but not quiet… sorry, GE!
While this may go against one of the solutions I laid out earlier about expedited programming, the fact that this single-page site tells a most intriguing timeline-based story about one of our most beloved (and Italian!) gaming heroes of all time makes up for it. Plus, it is unquestionably skillfully, and exquisitely executed. Because Mario’s evolution is as simple as a timeline, the story is told in the most linear fashion as you scroll from the top to the bottom of the site. Keep in mind that this linearity is not ideal for most types of content—as outlined in the two previous examples. Using principles of game theory, a playful design, savvy tech, and rich media, this single-page site is one of the more complex examples you will see. Did I mention it’s also responsive? Take that, smoke monster! I won’t give all the magic away by going into every tech-heavy, nitty-gritty detail, but you should definitively take the time to appreciate this designer/developer’s dream of a site.
Drawbacks of Single-Page Sites
Although so far it seems like single-page sites jump over a plethora of hurdles that UI/UX designers and developers face every day, there are some drawbacks to be aware of:
- Content. As mentioned in the Mario example, sometimes your content just doesn’t fit the single-page model. Remember that content is king, so if you are thinking of creating a simple story about a product you’re working on, a single-page site might do the trick. Otherwise, perhaps a more conventional approach is the way to go. This is probably the biggest point to consider if aspiring to build a single-page site.
- Simplicity. Have you ever heard of just keeping things simple? Sometimes the best approach to showcasing an idea, or service, or product through a website is by letting the simplicity tell the story. Don’t get caught up in techy gimmicks or overly complicated designs—if it doesn’t get your message across, it’s not worth the time!
- Trendy is just that. Just because Flash animations were the trendy thing circa 1998 doesn’t mean they’ve held their ground in today’s web world. Remember that things change quickly in the tech world, and just as fast as one trend comes, another one goes. Sometimes taking a more conventional approach is the way to go, but sometimes, trends hook audiences. And we like risk-takers anyway!
Think You Can Spot a SPS?
When it comes to building a site, taking a look at the newest practices is essential. Now that you’ve been introduced to single-page sites (SPS), do you think you can spot some good or bad examples? Or maybe times when a conventional, multi-page site should have been used instead? We urge you to keep an eye on this growing trend, so let us know if you spot any! And of course, if you’d like help building your own SPS, Manning is here to help.