1. Technology

Les Ours Coca Cola


Les Ours Coca Cola
Les Ours Coca Cola Website

Les Ours Coca Cola Website

Screen shot by J Kyrnin for the HTML5 Design Gallery courtesy Les Ours Coca Cola


Side-scrolling web pages can be annoying, but this site by Coca Cola (France) does their best to make it as easy as possible for you. When you come to the page for the first time you get instructions for three ways you can move through the page. I don't speak or read French, but I could still figure it out. This is important. If you are going to use unconventional navigation , which side-scrolling most definitely is, it's important to make it as easy as possible for your readers to use it. In this case, you could use arrow keys to move to the right and left, use the left mouse button to click and drag the scenery (behind the bear that walks through the page) to the left, or use the mouse wheel to scroll.

Another feature I liked of this site was the walking bear. Again because this site doesn't act like other websites, it's nice to have something to focus on. The bear acts like a character in a side-scrolling video game, walking along the ice until he gets to the balloon. I wanted him to be able to jump, too, but this is really just a static movie and not a game.

This type of innovation isn't good for every site. For example, there were many parts of the site where you were supposed to click (to buy movie tickets, to watch embedded videos, and so on), but I was so focused on seeing where the bear was walking (and then flying) to that I didn't notice them at first. If you design a site like this, you should keep this type of action in mind and make sure that the end of the site isn't anti-climactic. In this site's case, you get a pop-up window talking about Coca Cola and their commitment to green energy and preventing climate change. This is a good end, but after you close the window it doesn't come back. That was disappointing.

One part they did really well was the red paw prints in the middle of the journey. If you click these two things happen: 1. you get a special video or slideshow or something else, and more importantly, 2. you change the History on the page. This changes the page URL and makes it possible to bookmark specific spots on the page, so that you can point your friends to where the bear is riding in the hot air baloon or where the bear learns about the IMAX film. Having these internal markers are another way they make the unfamiliar navigation easier to use.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Inspiration
  6. HTML5 Design Gallery - Les Ours Coca Cola

©2014 About.com. All rights reserved.