Behind The Scenes Of Tourism New Zealand (Case Study)

Advertisement

In 2011 we saw the rise in popularity of two relatively new trends: responsive Web design and the use of HTML’s canvas. While some websites had experimented with both, in the last 12 months we’ve seen these trends move from the fringes firmly into the mainstream.

Responsive Web design is more a concept than a technology — an ideal that many new websites aspire to. Canvas, on the other hand, is an HTML5-based technology that opens the door to a new wave of interactivity. In this article, we’ll look at a website that embraces both of these elements, one that has been nominated for a Technical Achievement award at SxSW Interactive 2012: Tourism New Zealand1.

I spoke with the creative and technical teams at the New Zealand-based firms Shift2 and Assembly63 about the technology behind Tourism New Zealand’s home page, how it was made and how they balanced the breakthrough effect with bandwidth.

After we learn how Tourism New Zealand was built, we’ll look at the basics of putting together your own animated HTML5 canvas background.

The Inspiration

Tourism New Zealand has a history of strong media and advertising campaigns, particularly through TV commercials, and its destination marketing website has long featured these videos.

So, when a redesign of the website was planned without an accompanying TV commercial, the team at Shift had a new challenge: to showcase the landscape and breadth of activities in New Zealand to an audience that has come to interact with a website, not to watch a video.

Shift was inspired by, among other things, Nike’s Better World website (which Smashing Magazine has covered4). But whereas that website used HTML5 animation to create an effect of parallax scrolling, Shift proposed a camera view that moves through the real world.

Shift’s first idea was to use video as a background, with the camera descending through some of New Zealand’s most exciting locations. The problem was bandwidth: at 25 frames per second, Shift would need to deliver thousands of full-screen frames. This was an impossible goal, so instead the team set a target of around 200 frames for the entire website. But 200 frames for the amount of footage they wanted worked out to about three frames per second, which doesn’t look particularly good.

At this point, they nearly abandoned the idea.

By chance, though, a solution was found. Scrubbing through a QuickTime video, Shift’s creative director, Mark Zeman, noticed that being able to control the frame rate as you move the play head gives the illusion of a smooth experience. He suspected that if the browser’s scroll bar could be used to scrub the footage, it would feel similarly smooth. And if the camera shot photographs as it moved through each scene, it would create the illusion that the user was practically controlling the camera as it descended through New Zealand.

The first prototype was made with a few images and some JavaScript, just to prove that the browser could handle this type of manipulation. Freelance front-end developer Jeff Nusz5 was then tasked with turning this proof of concept into a working website. The brief was simple: no loading bar, and the first frame must load almost instantly. Furthermore, the website had to be usable even when the user doesn’t wait for all of the images to download.

On Location

With the prototype built and approved by Tourism New Zealand, it was time to load up the trucks with scaffolding and start shooting.

Shift worked with directors Damon Duncan and Matt von Trott of Assembly63 throughout development of the project, which enabled them to build the large motion-control rigs that were required for the shoot.

A 15-meter-high motion-control rig was built, with a vertical dolly track that housed a Canon 5D DSLR. The rig was set up at each location, and the camera travelled 12 meters down it, taking anywhere between 750 and 950 stills, a process that lasted at least two hours each time (and six hours at Milford Sound, the first location on the website), because the camera moved around 15 millimeters every 10 seconds.

7
Milford Sound8, New Zealand

Each location took three days to shoot. The first day was spent building the tower and putting together the motion-control rig. The second day was usually spent rehearsing the scene, and the third would be for the actual shoot, which included multiple passes of the scene. Indeed, the scene for Waiheke Island is a combination of two takes.


Time-lapse sequences from all four shoots (watch on Vimeo9)

Front-end developer Jeff Nusz had built a suite of tools10 to help the crew plan the photography. The directors also showed the original prototype to the cast and crew, which helped to demonstrate what they were filming and how the time-lapse footage would work.

11

Post-Production

There were only five days between the final day of shooting and the launch of the website. Most of the code had been written and ported to JavaScript using prototype images, and so it was now a matter of editing the hundreds of photos from each location down to 200 hand-optimized 1280 × 720-pixel frames.

The team spent time testing the website in each browser, noticing different memory quirks in Chrome and Firefox, and it worked on optimizing the website’s performance. Because many of New Zealand’s tourists come from China, the time was also spent making sure the website worked even in IE 6. To better understand the toll of such a heavy home page, Shift used WebPagetest12 to test it from various parts of the globe.

From 25 MB To 300 KB

Although the entire website weighs in at 25 MB, it enables a usable experience after the first 300 KB of data and images have loaded.

On the initial loading of the page, a 40 KB image is loaded that contains all 200 frames at a very low resolution. This means that as soon as the initial frame of Milford Sound has loaded, you can scrub through the entire website and get some approximation of the full experience. Then, when you stop scrubbing, the website loads the frame you’re on and starts loading the frames before and after it. Moreover, as you scroll the page, all downloading activity stop to ensure the smoothest possible scrolling experience. When you stop scrolling, all downloading resume.

Interestingly, Jeff’s background is mainly in working with Flash, so the initial website was built in Flash and then ported to HTML5 at the last minute. Jeff says that the similarities between ActionScript and JavaScript made this a relatively pain-free process:

ActionScript 3 is a lot like JavaScript. I did a lot of the work in Flash, and I wanted to see how well it would translate, and it was pretty much cut-and-paste for the most part. I just had to structure things in a similar way and make a few semantic changes. Ninety percent of the code ported as it was, which was great.

One of the team’s early breakthroughs was in figuring out how to split up the website’s elements. You can see in the sketch below how a website normally works: you have a long page and, conceptually speaking, the browser’s viewport moves up and down the page (i.e. the latter moving across the former).

13

In this next sketch, the page itself is a giant empty GIF that you scroll up and down; but the website detects every time you scroll, calculates your position and then translates that to the frame you should be on. The height of the window also changes depending on how big your browser’s viewport is, because if the page is huge and your viewport is small, then the scroll bar would be tiny; Shift wanted to keep the size of the scroll bar consistent, regardless of the browser’s size.

14

As Jeff notes, “Although it’s not exact, the goal was that one click of your mouse-wheel would be one frame”:

The tag layer and the UI layer is just HTML and CSS, but the background is either an HTML5 canvas that we draw to or it’s Flash. There’s about a 20-millisecond lag between the frames moving and the background changing in Flash, so the canvas version became the primary method used for browsers that support it.

The tags do not scroll in the conventional sense, but for each frame, they are assigned specific x and y coordinates based on the frame. This allows tags to be “glued” to background elements — a tree, mountain top, etc. — and these coordinates would be recalculated on the fly if the browser window was resized.

To create this effect, the team used Adobe After Effects to keyframe each tag and output the coordinates. Jeff built a PHP script into which the team could copy and paste the After Effects keyframe data, whereupon the script would generate JavaScript that the website could use15. Jeff then tweaked the tags in JavaScript to make sure they scrolled as expected.

16

Sprite Sheets

To create the illusion that the page loads quickly, Jeff came up with the idea of using sprite sheets. As he puts it, “The sprite sheets were the breakthrough that allowed us to make the website usable so quickly after the page loads”.

The first frame (of the background image) is 90 KB. So, together with the first low-resolution sprite sheet (which is 30 KB), these images initially weigh only 130 KB. Once the page has loaded all of the content, it loads a higher-resolution sprite sheet, and then another, and then it loads in the full-resolution images one by one. Rather than loading these large images in sequence, it loads them based on your scroll position within the document.

You can check that the sprite sheets load before the full-resolution images by turning the Webkit Inspector on and watching the “Network” activity after the page has started to render.

Using Inline JavaScript

I asked the team at Shift why so much inline JavaScript was in the head of the document. Best practice would suggest it should be moved to a separate file. However, something more is going on here.

Shift’s solution architect, Glenn Wright, has been working on the website for the last six years. He explains:

The inline JavaScript is there to define the configuration for each page. We can cache each page’s configuration in JavaScript, then all the external libraries that the page loads utilize that data. It gives us an easy way to configure the responsive grid and all of the interactions that the page will have to use.

Testing Mode

A testing mode on the website lets you see some of this loading process in action. Clear your browser’s cache, load Tourism New Zealand’s home page, and then hit the tilde (~) key five times to enable testing mode. You won’t see any change immediately, but once in this mode you can use the following keyboard commands:

  • 1
    Turn on the visualizer for “frames loaded”
  • 3
    Toggle tags on and off
  • 0
    Toggle the high-resolution image on and off
  • -
    Go to the previous low-resolution sprite
  • +
    Go to the next high-resolution sprite

Building Your Own Canvas Background Animation

While websites like Tourism New Zealand take months to design and build, creating your own animated canvas background is relatively straightforward. All it takes is a little JavaScript, a pinch of HTML5 and an enormous amount of imagination to dream up a worthwhile use.

Indeed, a word of caution is in order. We all know that with great power comes great responsibility, and just because we can load 50 high-resolution frames and animate them as the user scrolls the window doesn’t mean we should. As mentioned earlier, websites that use this technique are both lauded and criticized. Make sure that you are enriching the user experience rather than needlessly slowing it down.

First, we need to do a couple of things. Let’s grab some video (a time-lapse video works best for this), and then create our 50 frames. You can create as many frames as you like, but we’ll stick with 50 because this is how many Tourism New Zealand uses for each scene.

Next, let’s grab some royalty-free time-lapse footage from Artbeats17 and import it into iMovie, where you can export individual frames.

Choose Share → Export Using QuickTime, and in the pop-up dialog box select “Movie to Image Sequence.”

18

We export the images as JPEGs, which leaves us with hundreds of images. So, we have to do two things:

  1. Batch process the images in Photoshop to the required size (here, we went with 480 × 270 pixels to maintain the aspect ratio).
  2. Edit the number of images down to 50. Shift was painstaking in doing this, retouching and editing thousands of images down to just 200. To keep things easy for this tutorial, let’s just delete three photos out of every four.

You should now have 50 photos that, when played in sequence, make for a somewhat choppy time-lapse video.

On to the next couple of steps. First, we’ll figure out how to load the images in the browser and control them with the scroll bar. Secondly, we’ll create our own sprite sheet and use that instead. Open your code editor of choice, and create a new JavaScript file. Or why not head over to GitHub and download the project19 to play around with?

You’ll also need an HTML file with a canvas element in it, which is as simple as this:

<canvas id="canvas"></canvas>

Hopefully, the comments in the code sufficiently explain what’s going on, but here’s a breakdown anyway.

First, we set up the canvas element and use some basic maths to set start and end points:

// Create our timeLapseVideo object and cache the window object
timeLapseVideo = new Image();
$window = $(window);

// Define the timeLapseVideo element
timeLapseVideo.onload = function(){
  videoContainer.width = 960;
  videoContainer.height = 540;
  videoContext.drawImage(timeLapseVideo, 0, 0, 960, 540);
}

// Load the first frame
timeLapseVideo.src = 'images/TimeLapse001.jpg';

// Calculate how far to scroll before changing a frame
var scrollDistance = $window.height() - $window.scrollTop(),
    totalHeight = $(document).height() - scrollDistance;
    frameDiff = totalHeight / (numberOfFrames - 1);

Then, when the window scrolls, we work out which frame needs to appear on screen:

// Which frame do we need to show?
frameString = (Math.round($window.scrollTop()/frameDiff) + 1).toString();

// Change the image in the canvas
timeLapseVideo.src = 'images/TimeLapse' + frameString + '.jpg';

Make sure to go through the full source code20 to see it in action. Be careful, because there is no check to determine whether an image has already loaded; you could end up hitting your server with hundreds of requests per page. So, like Tourism New Zealand, you need to build in a check to see whether an image has been cached.

Creating And Using A Sprite Sheet

We can also create our own sprite sheet with our image to emulate more of Tourism New Zealand’s behavior. Some apps and websites are available to help you do the job (see the “Related Links” section at the end), but it’s probably easier to run a simple script that pastes all of the images onto a canvas and then take a plain screenshot of that. The code for this script is in the GitHub repository21 in case you want to take a look.

There are two main differences with this technique. First, we load only one image onto the canvas, which is the sprite sheet:

timeLapseVideo.src = 'images/spritesheet.jpg';

When the window scrolls, we then draw part of this sprite to the canvas:

videoContext.drawImage(timeLapseVideo, x, y, 80, 45, 0, 0, 960, 540);

In the line above, x and y are the starting coordinates of the sprite, which in turn are dictated by the frame. We’re using a simple loop to iterate through the sprite to find the right coordinates, but you could set up an array of values to look up. These tiny frames are 80 × 45 pixels, and they are drawn from 0,0 to 960 × 540 pixels. CSS then stretches this canvas to fit the entire window.

You can improve this script a great deal by, for example, preloading images when the user isn’t scrolling (some links are below to point you in the right direction). If you make improvements, please do share your work in the comments below.

Creativity In Design And Development

Distilling 18 months of hard work into one article like this is an impossible task. Shift had the time and budget to fly around New Zealand and take thousands of beautiful photographs. This is not an option for the average Web designer!

However, what is perhaps most striking about Tourism New Zealand is the imagination in its concept and execution. By taking the leap from virtual to physical world (and back again!), the scroll bar has become a conduit by which the user can control their experience of New Zealand — if only for 200 frames.

Jeff’s ingenious loading techniques and the use of sprite sheets also kept away the loading bar that is so familiar with websites like this. On an average broadband connection, the experience is effortless and fun.

22

Perhaps the biggest lesson to be learned here is this. Despite its many bells and whistles, Tourism New Zealand encourages the user to discover the website in much the same way they would discover the country.

Technology supports the great design, not the other way around. If we could all exercise this level of creativity, imagination and user engagement, then we, too, would create amazing websites that shape the future of Web design.

Related Links

I must extend my very special thanks to Jeff (@jeffnusz34), Glenn, Che and, in particular, Mark (@markzeman35), who were patient with my intermittent Skype connection and who were so transparent in offering their thoughts and many of the images and resources featured in this article.

(al)

Footnotes

  1. 1 http://www.newzealand.com/int/
  2. 2 http://www.shift.co.nz
  3. 3 http://www.assemblyltd.com/
  4. 4 http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
  5. 5 http://www.custom-logic.com/
  6. 6 http://www.assemblyltd.com/
  7. 7 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/milford_5.jpg
  8. 8 http://www.google.com/url?q=http%3A%2F%2Fwww.newzealand.com%2Fint%2Fmilford-sound%2F&sa=D&sntz=1&usg=AFQjCNFtSKivraHHvXVddMjjMVJXVZgIHA
  9. 9 http://vimeo.com/36803041
  10. 10 http://www.custom-logic.net/test/tnz/tower/
  11. 11 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/waitomo_4.jpg
  12. 12 http://www.webpagetest.org/
  13. 13 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/scrolling_1.jpg
  14. 14 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/scrolling_2.jpg
  15. 15 http://www.custom-logic.net/test/tnz/prod/data/tag_positions/tagData_milford.js
  16. 16 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/ae_shot2.jpg
  17. 17 http://www.artbeats.com/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2012/01/Screen-Shot-2012-01-27-at-13.41.36.png
  19. 19 https://github.com/richardshepherd/Canvas-Background
  20. 20 https://github.com/richardshepherd/Canvas-Background
  21. 21 https://github.com/richardshepherd/Canvas-Background
  22. 22 http://coding.smashingmagazine.com/wp-content/uploads/2012/01/rotorua_2.jpg
  23. 23 http://www.craftymind.com/factory/html5video/CanvasVideo3D.html
  24. 24 http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_canvas
  25. 25 http://www.html5canvastutorials.com/
  26. 26 http://www.phpied.com/photo-canvas-tag-flip/
  27. 27 http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
  28. 28 http://stackoverflow.com/questions/9334083/preloading-images-in-html5-javascript
  29. 29 https://developer.mozilla.org/en/Canvas_tutorial/Using_images
  30. 30 http://spritegen.website-performance.org/
  31. 31 http://instantsprite.com/
  32. 32 http://www.texturepacker.com/
  33. 33 http://spritesheetpacker.codeplex.com/
  34. 34 https://twitter.com/#!/jeffnusz
  35. 35 https://twitter.com/#!/markzeman

↑ Back to topShare on Twitter

Richard (@richardshepherd) is a UK based web designer and front-end developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and currently works full-time bringing VoucherCodes.co.uk to life. He has an awesomeness factor of 8, and you can also find him at richardshepherd.com.

Advertising
  1. 1

    Couldn’t resist to read until the end. Utterly stunning article about a captivating project. Keep it up!

    12
  2. 2

    Wow, what a website. That is so so clever.

    Great article thanks!

    2
  3. 3

    Wow.. Awesome Article.. Amazing work by Shift.. I really love the concept!

    0
  4. 4

    The kind of site that blows your mind when it launches, but can become dated very quickly. I think of early Flash websites when I see this. Could be just jealousy talking, because creative ran wild on this and must have had fun doing it! At the end of the day, it doesn’t make me want to go to New Zealand though, so I wonder if “coolness” overshadows the natural beauty of the desitnation. Fascinating process and a great read.

    2
    • 5

      I have to agree, its cute but this will date really quick. What is more concerning to me, is that in order to see the cool canvas effect a user has to do something they usually hate doing, scrolling. Its fine to scroll when your invested in a site, but when your coming to a new site its a bite annoying. On top of that, if you are on a large screen, there is very little reason to scroll (I actually looked at this website, and wondered what all the fuss was about. It actually looked messy to me with the content strewn all over the pIace, and I didn’t get any encouragement to scroll and was not going to do so just for the hell of it).

      I may be alone in this but i want to get content quick and scrolling through some pretty animation really doesn’t do that. If I didn’t know NZ was as so amazing already, I would have given up on this.

      2
      • 6

        I sense a lot of haters in this thread… I saw this site and was impressed when I started going through it.

        It will date really quickly? You provide no real analyses for this besides comparing it to flash or just saying it with no basis at all. A marketing site needs to be revamped at least every 12 – 18 months anyway…

        Also, you hate scrolling. Well this quality effect should make you hate it less. I mean with the clouds rolling through doesn’t catch your interest when you start scrolling and then make you scroll all the way to the bottom?

        I mean god forbid making anyone scroll… IDK, I get the point you’re trying to make, but I think it just doesn’t hold any weight in this case.

        I really dislike people who just bash creativity without at least offering some positive feedback on a decent to great feat.

        Way to suppress innovation karina

        -1
      • 7

        Agreed. It’s not clear to me how / why scrolling – which NO ONE likes – adds value to the experience.

        I’d also be curious to know what kind of analytics are hooked into the UI / UX so the client and the devs can evaluation the effectiveness of the experience.

        Finally, and I realize I’m somewhat atypical, but on my tethered 3G connection it’s a very difficult site to consume.

        It’s a great live proof of concept but I wouldn’t be surprised if they end up with a total makeover in a year or less. The whole idea strikes me as being too much about the brand and the designers/developers with the most important element, the information consumed, being an afterthought.

        Perhaps it’s just me?

        4
        • 8

          Ziad Naseriddin

          March 25, 2012 5:13 pm

          Scrolling is cool! very cool animations … though; Usability tests showed that almost 80% of the visitors don’t think of scrolling down unless there was something telling them …

          If i was in this website team I would recommend having something in the design to indicate or point at scrolling down, especially considering that most of the visitors of this website are not experts in web …

          I also have my observations in regards to SEO.

          However; I must say, It’s a very clever idea of how the front-end developer dealt with the content.

          Thumbs up for the concept!

          1
          • 9

            Totally agree with folk who are saying there’s no indication to scroll down.

            With all that effort gone on design, how hard is it to stick a button on, saying, ‘Scroll down to discover NZ’.

            Even then, I found the lack of smoothness and the moving people a little distracting. Would have been better to have just one consistent image instead of people moving around in the frames.

            Great for the portfolio, not sure about the NZ tourist board though.

            0
  5. 10

    While it is visually very nice. I’m running a brand new i7 mac on FF and it’s almost impossible to scroll down because the page “chugs” like crazy. It’s very cool, but man I can’t imagine what it’d be like on a less powerful machine.

    *I just took another look, and tried again. I closed the page, it’s unusable imo.

    13
    • 11

      Matthew Shipley

      March 8, 2012 7:17 pm

      Interesting point, I’ve been looking at this on an old(ish) Windows XP box with Chrome, which ran rather well.
      Moving over to Firefox gave me a much rougher ride and was disappointing.

      I’m wondering if this will improve with new browser editions, as hardware wouldn’t seem to be the issue…

      0
    • 12

      No problems in Safari, whatsoever.

      0
    • 13

      I’ve got the same experience. I’ve been to New Zealand recently and I tried using this website to plan our journey. The result was failure, the only way to use this website is to disable JS.

      0
  6. 14

    quadcore mac pro: 100% cpu usage on scroll, choppy scroll.
    + for the idea
    - for the implementation

    13
  7. 15

    Matthew Shipley

    March 8, 2012 7:08 pm

    Great write up, its refreshing to see an article that both explains the ideas behind the project and also covers the teams findings and technical challenges along the way.

    Love the website, great work (needs some tinkering on my phone…). The time and effort developing this really show with an impressive site that ultimately does showcase New Zealand very well. It’s projects like this that remind me why I love the web.

    1
  8. 16

    From a technical stand-point this is very very cool, but in terms of implementation I have to agree with Paul and some of the other comments. Dell is using a similar technique for the dedicated site of their new 13″ ultra-book and it just doesn’t feel like it will age well. It’s too neat an idea to just go away, so hopefully we see it evolve or applied to something else.

    1
  9. 17

    Nice article, shame the site doesn’t work for me. Like doesn’t load, takes too long…

    2
  10. 18

    Great Article and wonderful website. What a brilliant idea Tourism NZ to attract holiday makers. Plus, what a wonderful creativity to Shift implementing this project..!! that’s what I call Kiwi Ingenuity… 100% Pure Creativity.. Thanks for this awesome Article

    1
  11. 19

    Great article, i always curious about the technologies behind the awesome looks. It’s really a cutting-edge website. It’s great for user experiences and blow people’s mind.
    Encourage more dev and design agencies doing more out-box-thinking and make the web a better world.
    Cheers.
    Alex

    0
  12. 20

    once you click a tag and dive into an article from the scrolling canvas, i have no idea how to get back to the scrolling canvas fun I just came from. All i can do is see more articles and get further into a wormhole until I hit ‘home’. then i have to re-scroll down the page to find where I left off.

    While i love the tech and visually stunning, UX needs a bit of polish.

    Running FF9.0 on mac and it did not work. Had to open Chrome. For something that should be accessible to the masses (i’d think they’d want anyone and everyone to be able to view it as everyone s a possible tourist) there seems to be browsers that cannot access some content via scrolling. Top nav is required to be used. Wish there was a fall-back for scrolling content on non-HTMl5 browsers.

    Please do reply if I have totally missed something as I want to like it more. Thanks for the in-depth behind the scenes write up.

    3
  13. 21

    I love the concept of this site and this article, its quite an interesting.

    Critique:
    As previously mentioned it is substantially choppy, in chrome, and firefox for me. ( Macbook pro 2009, core 2 duo, 8gb ram, intel 320 series ssd )

    In safari it is still a bit choppy but much smoother than the previous 2.

    I love the immersion of the giant photos, however I would have likely got the same effect from a static background image, that may change from page to page. Generally when I visit tourism sites, I’m already sold on the idea of going there, and am looking for information. This site provides lots of useful information including flights and planning. However the choppy loading and amount of script going on hinders the entire smoothness of the site experience.

    One last thing that I love about this site, in regards to the carefree use of massive images, huge load on the browser, and use of responsive design, is that it’s really a future move. By that I mean it’s so technically fat, that even the most modern browsers can’t handle it, and it’s further pushing competition and the idea of not hindering what you want to create by what is feasible to create.

    And they made it work back to ie6 which is impressive.

    I recently implemented this idea, although not nearly in a comparatively impressive scale, by building css3 navigation menus. People with the newest browser get an animation. People with ie8 get a dropdown without an animation. Ie6 users get no dropdown. Push for the new technology. ( This was a business’ site )

    0
  14. 22

    Love the home page on a desktop, but the experience on mobile is another story. It is almost unusable.

    4
  15. 23

    Pretty pictures over usability. A step backwards in my opinion.

    5
  16. 24

    Apart from the gimmicky homepage effect, to me this site has UX problems.

    I personally didn’t know where to start, and I would love to visit New Zealand someday.

    Is a website a ‘success’ if it’s audience can’t use/understand it?

    10
  17. 25

    I’m curious who was the first person to come up with this? This is the third example of this technique that I personally have seen, and I’m sure there are more. The first time I saw it was on Samsung’s Galaxy S II page and then again when Dell launched the XPS 13 . The effect is amazing, so thank you greatly for giving it some attention and detail. With “everybody doing it” I think it will be cliche fairly soon, but then again, it is the tip of the iceberg and will lead to even greater creativity down the road.

    2
  18. 26

    Wow, what a website. That is so so clever.

    Great article thanks!

    1
  19. 27

    Thats what i called dedication and creativity

    0
  20. 28

    There’s nothing here that can’t be done using HTML4 and Javascript. I am tired of people talking about HTML5 like it’s the best thing since bread came sliced. It’s just markup like any other markup and without Javascript, HTML5 can’t really do anything on its own. The two stars here are Javascript and CSS3. End of.

    2
  21. 29

    This webpage (newzeland) is so awesome! Hmm is not a web page is an web app!

    -4
  22. 30

    On Mac OSX, using Firefox… and the homepage isn’t working. Nice idea… but looks like they still need to do some bug testing.

    1
  23. 31

    > camera moved around 15 millimeters every 10 seconds.

    I wonder how they managed to take shots of people, especially on the terrace above the restaurant. Were they instructed to move every so often and remain still for most of the time? If the camera travels 12 meters down and the process takes “at least two hours each time”, it’d be hard to do…

    0
  24. 32

    Catherine Khetagurova

    March 9, 2012 7:23 pm

    I want to say for sure: it’s a great job, and anyone who thinks otherwise simply has never worked creatively! Yes, not all browsers the site is working correctly. Yes, it is not very clear as to return to the home page after viewing the interior pages. Yes, a little distracting bakgraund slow-loading, incomplete, in my view, navigate to the inside pages … Yes, the comments are, but … Who are we to judge the development of this truly amazing site! Someone left a comment here has done something a little similar? And do not blame the creators of the site in that browser vendors can not and do not want to agree with each other! And finally, for browsing on mobile devices, there is a mobile web design.
    I shouted “Bravo!” team!
    I say “Thanks!” author of the article!

    0
  25. 33

    amazing! i want to experience this kind of project totally in web field.. :)

    0
  26. 34

    I can just see the meeting with the marketing executive saying…”wouldn’t it be cool if the site was like a giant movie and when the user scrolls down the movie plays?…can we do that?” While the development team sits there and nods their heads approvingly, all the while thinking, “IDIOT”. Very creative but what the heck is the point? New Zealand isn’t some fancy gadget that needs to impress people with a “revolutionary” web site. I mean I checked out the site and I thought it was mildly cool in a 90′s Flash kind of way, but nothing inspired me to visit the country. I actually found it a little difficult to get information on visiting. I commend their use of large scaffolding rigs, but they could have saved their billion dollars and just used the marquee tag. :)

    5
  27. 35

    I agree with some of the previous comments. The concepting, design and thought process are undeniably forward thinking. And even though the site still chugs on initial load for most users of the site, it’s obvious a LOT of thought has gone into making it work as well as it currently does. The image sprite replacement approach is a really great idea too.

    I do, however, disagree with relying heavily on the user to take notice of all the things changing while they interact – the background tags, the small map, the book & plan area, etc. Leaves room for ‘missing’ a lot of great things. Secondly, when I click a tag, it presents me with articles, where suddenly it’s a blog-style content site? I would have expected more of a marketing push versus people stories. Just my opinion though – great job on the site!

    1
  28. 36

    Its awesome.

    However the background images are horridly slow to load and load in pixelated to begin with.

    A real shame because once it has loaded the effect is epic.

    1
  29. 37

    Hey! wow, I love this Site. Great job.

    0
  30. 38

    You can’t move a mountain without pushing a few rocks.

    These guys did something really spectacular with this site. Yeah there’s a bunch of issues, and i’m sure the developers & designers are aware of them. But you’ve really got to marvel at this group’s ability to think differently. They had a vision, and didn’t stop until they had it built.

    These days sites can have the ability to look quite similar. And yes this took inspiration from the crazily imitated Better World site… but they also managed to try something different and unique.

    It’s really up to us now – this is a starting point – a challenge for creativity. We need to continuously try new things, and not just replicate the creative successes of others.

    On a side note – even if you hate the site, you’ve still got to marvel at this company’s ability to get the concept past the client. There aren’t many clients in the Oceanic market willing to part with this much cash on a concept that hasn’t been tried before.

    4
    • 39

      Richard Shepherd

      March 12, 2012 8:41 pm

      I couldn’t agree more with you, Glen.

      The SXSWi Technical Award goes to “projects that are re-inventing and re-defining the technical parameters of our online experience”. NewZealand.com does exactly this.

      Some browsers and some computers struggle with the amount of data being pushed around, but we should not stop pushing the envelope. Only when we try to achieve the impossible can we make the discoveries which change trends in web design.

      I applaud the teams of web designers and developers who, as you put, offer “a challenge for creativity”.

      1
  31. 40

    Giacomo Colddesign

    March 12, 2012 9:54 am

    Great and original article!!! Thanks!!

    0
  32. 41

    Excellent article, and interesting idea, but the site was really unintuitive, I had to read the article before I realised I could scroll down. Also each page transition seems too jarring. A shame as the video stills were really impressive.

    1
  33. 42

    Hi

    Agree with above, looks great but doesn’t get the sell across. It’s a website for designers not users.

    I’d also like to know what this site cost the client in the end? Anyone know?

    Lee

    1
  34. 43

    I find the site very confusing, I am not jumping on the hater bandwagon this is meant as constructive feedback, I applaud the technical achievements but it seems to be at the users’ expense. A good chunk of budget should have been given to UX (the homepage is a mass of buttons and menus with a questionable hierarchy, some seeming moveable but are not ) and making the site not only visually interesting but intuitive and user friendly as people want to switch from inspire me, to book it!. I look forward to V.2, and I am sure we will see these measures.

    1
  35. 44

    For a web savy guy like myself it took about about 1-2 minutes to adjust; to get the grasp of navigation, and to discover that you can actually scroll down and down to uncover the hidden frames. For a regular user, it might take longer to figure out. But once you do figure those thing out, it does tend to grasp your senses. The site is bandwidth intensive, but great job to the design team that actually took the time to solve some of these major problems.

    0
  36. 45

    I wonder if they have tested to see if it works any better than the old site in getting people to visit NZ ?

    1
  37. 47

    Awesome site. works really well for me on chrome. super smooth and loads really quick. a real shame others didn’t have the same experience. love the idea. thanks for the great article.

    good to see people pushing forwards. cmon browsers! KEEP UP PLEASE!

    0
  38. 48

    superb artical…keep it up

    1
  39. 49

    Pushpinder Bagga

    March 14, 2012 2:26 pm

    Now that is how websites are made.

    I am pretty sure most client would see if and say “Eh, what so special in it? My korean friend could make this in a week”.

    Hope our clients could understand the technology and hard work behind unique concepts.

    -3
  40. 50

    I know everyone is entitled to their opinion, and I believe in that because I like to express my own. My opinion is that when something like this comes along there are two ways of looking at it, which is evident by reading the posts on this article. One way is to tear it down and the other is to build it up. When I see something like Tourism New Zealand I tend to do the latter.

    I have an open mind about breaking new ground and respecting creative breakthrough. I see the big picture and don’t like to look through a pin hole. I tend to look forward and not backward by talking about old browsers FF9 IE8 and computers and with such and such ram and video card. Technology has always been about the future not the past. And just to note I didn’t have one problem with loading or scrolling.

    I also believe that the two most intuitive things about UX is CLICKING and SCROLLING. If it takes you 1-2 minutes to realize that you can scroll it must be the first day you’ve used the internet. That’s like saying no one told me that I had to drink water or eat food or I would die. The only thing I can say about the UX is that once you click on a tag and move to an article you should be able to click back to the location you left on the home page… a minor fix.

    Overall I feel this site is both beautiful and has a great immersed experience. I loved how it is NOT one still background to the next and how it shows people moving through the scenes actually experiencing New Zealand. It made me feel like I was experiencing it with them because of the interaction of my scrolling to see it. Obviously the responsive design I think is a big plus and NOT a hindrance where everything is spread out and unintuitive. The UX/UI are tremendous when it comes to finding things to do in New Zealand. The main nav makes that easy, the explore tab with the tags makes that easy and with the interactive map on the side you can move around and find exactly what you’re looking for. This site would be my go to site if I were going to book a trip there and the only site I would use once I got there. MISSION ACCOMPLISHED!

    -4
  41. 51

    Tried the site on my iPhone. And it displays an endless spinner, horizontal and vertical scrollbars. The net result is an unresponsive mobile safari. The site is 100% unusable.

    As clever as the design may be, for a tourism site not to work on all major devices in 2012 gives me a rather amateur impression.

    1
  42. 52

    “NO ONE” likes scrolling?

    What an odd statement. Care to share some stats on that one?

    The real bugbears about this site are:
    - There are links that go nowhere (Explore)
    - A rather confusing layout that’s very high detail
    - Slow page load unless you’ve got a lightning fast connection
    - No visual clues to scroll

    The way the page animates on scroll, however, is brilliant, and creativity is a good. That said, the people viewing this site may understand very little about what’s going on, and is this site not a primary portal for New Zealand tourism?

    The usability/Flash wars had a winner, and that was simpler sites. This site is innovative, yes, but also over-designed.

    I suppose it’s better than a boring info-template site. Stats will tell (if the makers ever publish any).

    1
  43. 53

    Great stuff, this is one of my favourite websites, I’m so happy that it’s gained so much interest around the globe.

    0
  44. 54

    What a site… and thanks for the amazing article. Its really a huge resource for us to learn from.

    0
  45. 55

    Funnily enough the scrolling aspect has been removed from the site.

    8
  46. 56

    After a year, going back to this site I see they’ve removed the entire layering effect, and ALL of the parallax scroll. Some of that might have still been cool, without adding 50GB to the page load like the original.

    Pushing boundaries is great but they designed the equivalent of an intergalactic spaceship when the only propulsion systems available were internal combustion engines of sometimes questionable efficiency (web browsers).

    The original site will always be remembered by any designer that saw it. For which reasons, however, that’s up to you. I’ll remember it as something akin to the Sinclair C5: a good idea in theory, but people couldn’t use it in a practical fashion. Design is for function, with aesthetic gloss, but it must have a use and be usable unless purposely designed not to be. Art is for its own ends and self fulfilling.

    1
  47. 57

    I don’t think I ever saw the site in all it’s scrolling glory, but today as I look at it, they’ve just gone back to static images. So what do we learn from this?

    Don’t over-complicate; it’s more important for your users to be able to navigate the site, and to pick and click on the most important nav elements than it is for them to have a “lush” visual experience.

    Because lush visual experiences can easily lend themselves to confusion.

    Simplicity simplicity simplicity, and then you can start to iterate.

    0

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