Exploration Of Single-Page Websites

Advertisement

We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that’s always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next.

Sometimes global navigation and scrolling are the best, most appropriate ways to move about, (however, they aren’t the only ways).

The websites in this article let you scroll, but they also provide alternative ways of finding cues and means for getting around. In several cases the designs encourage exploration, which is both more engaging and also teaches you how to navigate at the same time.

Timeline on Jess and Russ's website.1

Jess and Russ

The Jess and Russ’s website2 is a wedding invitation, though it’s also something more. As it says at the top of the page, it is the story of Jess and Russ leading up to this moment. It’s a narrative that begins with a few details before they had met, leads to their meeting and falling in love, and culminates with the invitation (complete with RSVP form).

Jess and Russ's RSVP.3

How do you navigate a story that’s told linearly through time? Sure, there are flashbacks and other narrative devices, but for the most part you tell the story from beginning to end. You move through it in a straight line and so here the navigation is simply scrolling through the page. Nothing more is needed.

I started this post suggesting we could provide more than scrolling. This example shows that, at times, scrolling is the most appropriate way to navigate. Jess and Russ’s website could easily have been broken up into several pages (navigated through the “next” and “previous” links at the bottom and top of each page). That would still keep things moving linearly, though each click would momentarily disrupt the narrative. In this case scrolling was the better choice.

Fortunately the website makes us want to scroll. Along the way we get an engaging story, filled with wonderful artwork and with interesting parallax effects4. With this website you won’t get bored scrolling — instead, you’ll be looking forward to the next part of the story and how it will be told.

Artwork from Jess and Russ's website.5

The story your design is telling may not be as linear as this one, though it’s likely parts of it will be. The lesson from Jess and Russ is that when you’re designing the linear parts of a website and you want people to move through it in a single direction, scrolling is possibly the best option. You also may want to consider a single, longer page as opposed to several shorter ones that are connected by links.

Ballantyne

Ballantyne6 creates luxury knitwear from cashmere. The website itself contains different types of information. There is the standard “About Us” and “Contact” information, as a start. Beyond that there are product images and chunks of text to go along with the images. It’s easy to imagine yourself thumbing through the pages of a catalog when browsing through this website.

As with Jess and Russ, this website is entirely on a single page, and as such, scrolling is once again a predominant way to navigate. It’s not the only way this time, though it’s perhaps the more interesting method.

Ballantyne.7

On the landing section for the domain there are links that read “Established 1921″ and “Contacts”. Clicking the former scrolls the page up to see the “Who We Are” section (the “About Us” info) above. The latter scrolls you through all the images and text to the bottom of the page as well as the contact information.

When arriving at either of these ends of the website you’re also presented with additional ways to navigate. The “Who We Are” part of the page contains an “X” to close it, though this information doesn’t actually open or close — it just scrolls you back to the main landing section for the page, which you can also do yourself.

At the top of the contact section of the page a header drops down containing the company name and the links for “Who We Are” and “Contacts”. Unfortunately, the company name isn’t clickable, which is conventional for navigating back to a home location.

You can equally scroll through these two end sections of the page. As you do, there’s a nice parallax effect. The outer two columns scroll as you’d expect, while the middle column scrolls in the opposite direction. The effect creates additional interest beyond simple scrolling as more information and imagery pass through your view. The two header links along with the company name are also present as soon as you scroll below the root landing spot.

Contact section on Ballantyne website.8

As with Jess and Russ, the Ballantyne website is more enjoyable to scroll than most. Here we’re also given an alternative means of navigation in addition to scrolling. There are a few problems, though:

  • No link is provided to navigate back to the original landing location. You have to scroll to get there, or first go to the Who We Are section and close it. This seems odd.
  • Clicking to either “Who We Are” or “Contacts” isn’t quite a smooth experience.
  • There’s no way to scroll up to the “Who We Are” section.
  • The link at the landing location to “Who We Are” reads “Established 1921″ and isn’t clear where it leads.

Another minor complaint is while scrolling, the images don’t always align where you’d like them to — you see a full image in one column, but not the others. This might have been done on purpose to get you to scroll slowly through the website, but I kept wanting things to align better. While it won’t affect your experience of the website, it can be a little jarring.

Even though the above items could be improved, they hardly cause problems when navigating the website. We’re talking about a limited amount of content, and within a moment or two, you’ve figured out where everything is. While clicking to the end locations isn’t the smoothest experience, seeing everything scroll from one end to the other does show you quickly how to navigate the entire website. In fact, it’s this behavior that cues you in if you didn’t immediately realize to scroll.

The lesson here is that even if your page will most likely be scrolled, you can still provide alternate options to navigate and help people understand what’s located on the page.

Cadillac ATS vs The World

Unlike the two websites above, Cadillac9 is a website with a couple of separate pages. Here we’ll look at one section of the website, specifically one page within that section. One of the ways Cadillac is promoting the ATS is as a vehicle that can take you anywhere and exhilarate you as it does.

The designers have set up a section of the website10 where you can explore four interesting locations around the world that you might not ordinarily get to see. It’s these location pages that we will consider here.

Cadillac ATS vs the World.11

A navigation bar remains fixed at the top of each of these pages making it easy to get back to the main section page, or switch to one of the other three locations. If you hover over the Cadillac logo, the global navigation appears and allows you to get to any part of the website.

We’re here to explore though, and there’s an immediate cue for how to go about it. An animation of a series of arrows pointing down suggest that’s where we look. They direct your eye to another downward pointing shape with the words “watch the video”. Shape and words are a link.

Cadillac ATS China.12

Clicking scrolls a video from below into place. Below the video is another now familiar downward pointing shape with the words “ATS vs The Wind”. Clicking once again scrolls content from below, this time complete with a change of background image and parallax effect.

Each subsequent click scrolls to a new part of the page. You can navigate the entire page by clicking one shape after another until you reach the end, where you can check in (share on FaceBook, Twitter, or Google+) or visit one of the other three locations.

You could, of course, scroll through the entire page instead of clicking at each stop — you’ll experience the parallax effect a little more, but otherwise navigating the page will be the same until you want to move back up the page (as there are no upward pointing shapes to click).

There are two additional ways to navigate, both located along the right edge of the page. At the very edge is a scroll bar, though not the default one that comes with the browser. It works exactly as you would expect and provides an immediate cue that there’s more on the page than on the screen.

Just inside this scrollbar is a long thin column with a series of lighter and darker dots. Clicking on any dot will take you to a specific section within the page. The dots also offer additional clues about the page.

Lighter dots mark the start of a section. Darker dots take you to a location within each section. Each section is further reinforced by a line separator.

Clicking any dot scrolls the page to the given section or sub-section. Hovering brings up a tool tip pointing to the light dot and containing the heading for each section.

Hovering on the Timeline of Cadillac ATS China.13

As with the websites above, everything here works well — the content is limited, and it won’t take long to work out the organization. You’re also encouraged to explore each location in each section, and cues are provided to help in your exploration.

  • The downward pointing shapes invite you to click and get started.
  • Content scrolling into place after a click suggests you can scroll the page on your own.
  • The scroll bar along the right edge further suggests scrolling and provides another mechanism to do so
  • The chapter/timeline feature might be the last thing you discover, but it’s ultimately the quickest way to navigate the page.

Each location is a new destination to explore — both literally (as a new page) and figuratively (with the content each contains). It’s part of the fun, and puts you in discovery mode from the start.

Aside: The main Cadillac website14 has more conventional navigation (a horizontal navigation bar with drop-downs), though it’s very nicely done and worth a look. The drop-downs present quite a bit of useful information.

The lesson here is that you can provide several ways to navigate for different types of visitors. You should provide immediate cues for how to begin navigation and let more advanced users discover other means to navigate as they explore.

Bleep Radio.15

Bleep Radio

Bleep Radio16 also encourages you to explore their single-page website. Unlike the websites above, there’s less of a directional nature to the scrolling. What you want to do could be located on any part of the page. As with the Cadillac ATS pages, there are visual cues in the form of triangles that suggest they are clickable for navigation.

Any browser open to at least 1200×900 will see most of the main menu, which is inside a large triangle showing the word Discover (again, encouraging exploration). The program link takes you to a section above the page (like Who We Are on Ballantyne). Again, there is an X to get back.

Aside from the Program link, most of the other links are located in the main Discover triangle. And of course, you can scroll up and down the page to find different content.

Bottom of Bleep Radio Website.17

While the layout is certainly original and interesting, I don’t think the navigation here works as well as with the other websites, for a few reasons:

  • Unless you navigate to a section toward the top or bottom of the page, you’re left without navigation back besides scrolling. The discover triangle is only present at the top and bottom.
  • Some triangles are clickable, while others aren’t, creating a bit of confusion as to what is and isn’t navigation.
  • The page is always wider than the browser, no matter what size it’s opened to. Scrolling vertically will at times shift things to the right or left.

In all fairness to the website, it’s written in Greek (and I don’t speak Greek) so I could easily be missing some obvious cues.

On a more positive note, the website does have some qualities that are both nice and fun:

  • Clicking the Just Bleep triangle at the top clears away most of the content on the page so that you can focus on the task at hand. Nothing specifically happens for me after clicking Just Bleep (though I’m guessing it would, were I logged into the website).
  • The bleeper section is a grid of member images. There are a few triangles sitting atop the images, and hovering over them results in their shifting to the right or left. There’s no functional purpose, but it lends an interactive feel to the website.

One other thing to point out is the triangle along the right edge that remains fixed in place when scrolling. Clicking on it opens the current on-air Bleep, along with some social buttons. I can’t help but think navigating the website would be easier if the Discover menu was similarly fixed in place along the left edge.

The lesson here is that a unique and creative design can encourage exploration, however you should be consistent in your navigational cues. If a shape, color or specific style is a link in one place, it should be a link everywhere it occurs, or it risks confusing your visitors.

EVO Energy: The Interactive U.K. Energy Consumption Guide

The Interactive U.K. Energy Consumption Guide from EVO Energy18 is what information graphics19 on the Web should be. As with the Cadillac website, we’re looking at a single page within a larger website. And as with all the pages, the primary way to navigate is to scroll from top to bottom.

However, scrolling isn’t the only way to navigate the content here. You are expected to interact with the page in order to get most of the information it contains.

UK Energy Consumption Guide - Primary Energy Consumption in 2010.20

For example, the first interactive section on the page offers data about the total primary energy consumption from fuel used in the United Kingdom. The main graphic is a tree with circles of various colors representing leaves. Each color is associated with a different type of fuel…

  • Electricity
  • Biomass
  • Gas
  • Petroleum
  • Solid Fuel

The more colored circles are shown in the graphic, the greater that fuel contributes to the total. Each of the fuel types are listed in another graphic to the right, and hovering over them reveals the actual percentage of the fuel within the total.

To the left is another list allowing you to view the same data over different decades. With a couple of hovers and clicks, you will see that solid fuel accounted for 47% of the total in 1970 and only 15% of the total in 2010.

UK Energy Consumption Guide Primary Energy Consumption in 1970.21

There’s little in the way of text on the page outside of a few basic bits of information and occasional instructions. It’s hardly needed (though it could enhance the graphics some).

These interactive infographics22 take advantage of what the Web can do and through interaction the information sinks in a lot more. You aren’t just being presented information — you’re actively selecting the information you want to see, making it more likely that you’ll pay attention and remember it.

The only issue I have with the page is that some panels aren’t interactive. After interacting with so many, I felt cheated when all of a sudden I couldn’t interact with one.

The lesson here is that navigation is more than moving about a website or Web page, it can also be a way to bring content to you in place. Instead of something that takes your visitors from one location on a page or website to another, navigation can be about replacing content in place — it’s a much more engaging way to interact with a website.

UK Energy Consumption Guide Final Energy Consumption Transport.23

Summary

The five examples above naturally allow you to scroll up and down their pages — but they don’t stop there, as they provide additional cues and means for you to get around.

Some of the lessons these websites teach us about navigation:

  • Choose appropriate navigation based on the needs of the content.
  • Provide alternate forms of navigation when it benefits your visitor.
  • Provide immediate and obvious cues about how to navigate.
  • Offer advanced ways to navigate for advanced users.
  • Encourage exploration, but don’t require it for navigation to be usable.
  • You don’t always have to take people to the content — you can bring the content to them.

Hopefully this brief look at the websites above will get you to explore further and help you generate ideas for alternate ways to navigate content.

(jvb)

Footnotes

  1. 1 http://jessandruss.us/#j1
  2. 2 http://jessandruss.us/
  3. 3 http://jessandruss.us/#j33
  4. 4 http://richardshepherd.com/smashing/parallax/background.html
  5. 5 http://jessandruss.us/#closed
  6. 6 http://www.ballantyne.it/
  7. 7 http://www.ballantyne.it/
  8. 8 http://www.ballantyne.it/#bottom
  9. 9 http://ats-vs-world.cadillac.com/
  10. 10 http://ats-vs-world.cadillac.com/#!/home
  11. 11 http://ats-vs-world.cadillac.com/#!/home
  12. 12 http://ats-vs-world.cadillac.com/#!/china
  13. 13 http://ats-vs-world.cadillac.com/#!/china
  14. 14 http://www.cadillac.com/flash.html
  15. 15 http://www.bleepradio.gr/
  16. 16 http://www.bleepradio.gr/program
  17. 17 http://www.bleepradio.gr/#unite_text
  18. 18 http://www.evoenergy.co.uk/uk-energy-guide/
  19. 19 http://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/
  20. 20 http://www.evoenergy.co.uk/uk-energy-guide/
  21. 21 http://www.evoenergy.co.uk/uk-energy-guide/
  22. 22 http://www.smashingmagazine.com/2011/10/21/the-do%E2%80%99s-and-don%E2%80%99ts-of-infographic-design-revisited/
  23. 23 http://www.evoenergy.co.uk/uk-energy-guide/

↑ Back to topShare on Twitter

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Kenneth D. Wiggins

    November 5, 2012 3:08 pm

    Great article!

    I love creating one pagers. It really makes for a nice presentation and it allows the user to take in information minus extra distractions.

  2. 6

    I loved the Jess and Russ website, one of the first single paged websites that I have actually wanted to scroll through and engage with in a timely manner. A lot of the time I find single paged websites to be slow, frustrating and restricting. This was done in a very nice way and enhanced my overall experience rather than hindering it.

    • 7

      It isn’t easy to create great, interactive and beautiful single-page websites. This involves a lot of design decisions and JavaScript implementation. Unfortunately, what often happens is that the JS is far from being fast or optimized. One example is http://www.beetle.com/ where scrolling faster than 3 FPS on a brand-new Apple laptop.

      Another thing that is important to consider while creating these websites is the actual interactivity design. I would assume that if the website has only one page, there will be much more animation and transitions to make it interesting. This is when this guide (and experience) comes to play: http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

      • 8

        Wow. That Beetle website is somewhat awful.

        But I do agree, single paged websites are very difficult to implement successfully. A lot of times they seem to serve very little functional purpose. I think this is perhaps why I found the Jess and Russ website so appealing. I think the function of the website fitted the form very successfully; to portray a linear story with a definitive beginning and end.

    • 9

      I agree. Jess and Russ was probably my favorite of all these sites. It keeps making you want to scroll and you enjoy yourself the whole way.

      The Volkswagon Beetle site is bad, at the least scrolling part. It looks like it could be a good site, but the scrolling is truly awful.

  3. 11

    I’ve creares this one page website and tho I’m still working on it some of the challenges that I had to overcome was how to keep call to action relevant throughout. I’ve implemented some things suck as having the offer right in the navigation and having call to action button always on the navigation. Still don’t know if this is the right path so is appreciate feedback on the site as well. Here is the link http://www.ionmysleep.com/home-sleep-test thanks

    • 12

      It looks good to me. I don’t think it’s bad to have the call to action in the navigation. My guess is it will be more effective when it’s right there in the content at the appropriate place, but it’s also good to have it visible at all times.

      I see you added the call throughout too. I really do think the site looks good.

    • 13

      Your site is better then all others, ye, it’s great:) You know why? It’s clear. Simplicity is the thing, many designer forget about.

    • 14

      Good job! Sticky navigation is so handy! It allows users to skip to the parts they want / need.

  4. 15

    I’ve been having success with my single-page website for years, but I won’t link to it because that’d just be advertising.

  5. 16

    Well, apart from EVO energy, it seems that creativity exhausts itself in repetition of the parallax effect. It’s sad. And dizzy.

  6. 17

    The Jess and Russ website is absolutely fantastic. Am a big fan of single page websites when the content allows, but only certain types of content really make sense in that type of format. Built my personal site as a one pager and feel it works well, but most client websites have not fit the bill.

    I also feel that, sadly, many clients feel that a single page site is too “creative” and that users won’t engage in the way they want. I hope I get to work on some things where “creative” isn’t seen as a negative. When done properly, like many of the sites in the article, I think it can really lend itself to engaging the user. The Jess and Russ site did this wonderfully by creating a narrative. Excellent round-up.

    • 18

      I completely agree that only certain sites can pull off a single page. There’s only so much information that can work without more of a hierarchy of pages.

      Interesting that clients might see it as too creative. I guess I can see that with some clients in some industries, but I have had clients he encouraged me to be more creative. It depends a lot on what they do and the specific personalities involved.

  7. 19

    Excellent article. The design element aside, are there any SEO-related benefits to having a single page. The obvious downsides are the lack of multiple meta-tags in the head but other than that I would assume the non-specific nature of a one-pager would be detrimental under the ever-changing Google SERP.

    Any insight would be awesome. Cheers.

    • 20

      I would think where seo is concerned a multiple page site is going to be better. It’s not really about the meta tags. They aren’t particularly useful in helping you rank. More pages will give you more opportunities to rank for different keywords and phrases. You can better target multiple pages, link between pages, write more targeted page titles.

      On the other hand if you create a single page site and it gets a lot of attention, maybe even some links from Smashing Magazine, it probably picks up more links from other sites and gets shared more on social sites and likely gets more traffic from both search engines and other sources.

  8. 21

    Not the topic of this article, but I hate seeing this one site getting credits, especially here.

    Bleep is actually a nasty copycat.
    See this markdearman.com, which has been released long before

  9. 23

    I got many ideas from this article and its all design are nice and attractive. Website with Creativeness and With highly Page rank that really good for the Marketing.. so i think Website should be more attractive for users

    http://www.standalonemarketing.com/website-design.html

  10. 24

    Sorry – web sites that break without JS are not professional and should not be showcased anywhere.

    • 25

      Which website(s) are you referring to? Also, this is not a showcasing, but an exploration of the websites provided. I don’t recall the author stating these were professional websites being showcased.

  11. 26

    I loved Jess & Russ! I think their linear design would be great for lots of microsites. I also really liked how you gave examples of what doesn’t work so well for a one pager. Great, well-rounded article. Thanks!

    ~Steph
    studiofj.com

  12. 27

    Great collection. I just love it. Looks great and quite unique. Thanks for sharing.

  13. 28

    These are great examples of how one-page websites can be more engaging and interactive for users. This post is a fantastic resource for designers and developers. Thanks!

    Kate
    katemats.com

  14. 29

    The single page website worked well for the Jess and Russ website because each scroll down unveiled more of their story. The moving graphics (while scrolling) was simply genius. So I got lost in the love story and I got lost in playing with the movement of the graphics. Super fascinating!

    I don’t know that this would work for a company website or anything meant to be serious and informative.

  15. 30

    Very nice article! I see many sites with only one page.
    Also great for mobile users I think!

  16. 31

    Wow these sites are incredible! They are such geniuses and very talented. Good job!

  17. 32

    After a long time I got something fresh and quality content on related topic. I searched a lot for the related material but got almost replica work. Keep it up! It is really very informative.

    http://www.ocularcolumbus.us/

  18. 33

    Very professional website designs, I had not seen designs like these before, I seem spectacular by the way that give added value and justification to the websites of a single page, personally I think all good designs, but I finally evo energy looks very professional in the way that integrate computer graphics and web design, simply stunning. Congrats to the designers.

    Jorge Forero
    dweb3d.com

  19. 34

    Hi there,

    great stuff! that wedding invitation is incredible, like nothing I’ve seen before. I designed a one pager a while back would love to get some feedback / comments. I feel that sometimes these kind of pages are a bit to big and see a lot of users drop off before reaching the end.

    http://75toolsforcreativethinking.com/

    thanks for sharing!

  20. 35

    A helpful article with some sublime examples of one page websites. There is no denying that they are a powerful asset, I just wonder whether they are largely for novelty / one-off promotion / informant based websites. They look impressive and are incredibly visually engaging but they are limited somewhat by the fact they are just one page. That said, I want an excuse to use one properly!

  21. 36

    Ah, the single-pager– a truly groundbreaking layout. I’d like to see an example for it being used as something other than “novelty”, as Matthew described.

  22. 37
  23. 38

    What’s the different between “Single-page website” and “Parallax website”

  24. 39

    I really liked it. its a wonderful collection. i learn many ideas about web designing through it. Use of single pages as a whole website is a unique idea. A single page describe all information about company is a very impressive work. i love to do it.
    Thanks

  25. 40

    Benjamin Antoni Andersen

    December 26, 2012 9:07 pm

    Would this be considered a one-pager?
    honestlyit.com/

  26. 41

    I have some mixed feelings about one-page web designs. I am all about simplicity and the whole “less is more” thing, but the chances that your website will rank or fail well in search engines cannot be ignored. Sure, you can have a blog section that pushes value to your home page, but that limits you to one (maybe two) keywords that you can target.

    We dealt with this during our website redesign for axzm.com. By having other secondary and tertiary pages for services (and blogs) you increase your chances to show up in more searches. I don’t think you should create additional pages just for the sake of creating more pages, but if you can expand your page count and it’s relevant, why not?

  27. 42

    I am thinking of designing a single page website, however, I am one worry- SEO. I have read mixed reviews on this. The site I am creating has about 20 food products that are basically the same, but different flavors.

    What is the consensus on whether or not they are good or bad for SEO?

  28. 43

    Ahhhem. Really?

    These break so many goals for good interaction design & UX it’s not even funny. Do you really think that one page sites are good for SEO too?

    Pretty much all of these are bad patterns to consider. Bad for UX conventions and unity. In all my years watching this trend get going have I seen one that I would recommend to my clients or that I’ve seen work well enough to make me reconsider using them in the first place. Of course I’m not surprised that this article comes from a site that just let me get 10 page heights down with no handrails in sight….

    Best

  29. 44

    easy navigation = easy understanding, easy understanding = easy achievement of goals

  30. 45

    Good article. It seems like there is certain content made for single page websites. Usually anything having to do with timelines or sequences. I’ve started to see more sites that are single page and scroll horizontally.

  31. 46

    Single Page websites are cool and fun to create. You can have alot of fun with movement and call to action. However there are some definitely drawbacks to having a single page website. Make sure your web designer or web design company is aware of these drawbacks. Our last business website was a single page website and we had it up for several years. Even though we received terrific feedback and the website was easy to navigate we ran into all sorts of issues with SEO. That was just one of the few issues we encountered so be careful!

    Alex
    Isadora Design – Professional Web Design Company

  32. 47

    Good interaction design and UX is relative to the goal of the website. For instance, I’ve used parallax with great success for event sites (e.g. a NYE hotel event) where the majority of users (40%+) are using a smart phone or tablet. The primary function of such a site is to sell tickets and convey information about the event, and the horizontal scrolling ability does well to further this goal. In reviewing GA goal and event tracking such a site converts at almost a 2:1 rate for these purposes versus a traditional multi-page design; which I believe speaks to the strong UX for the purpose.

    I will concede there lies a sacrifice to SEO; but again if the majority of site traffic is from direct or referral links, the site is legacy in SEs, or is alive long enough before organic search for it begins you can overcome the deficiencies in traditional SEO.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top