Our first news of 2012 isn’t smalltalk. We love to show you our latest work: a brand new site for Sound of Data.

We are very excited about this project, because it has pushed us to get the best out of our skills. Using the latest web techniques and creating a pixel perfect smooth interface, we managed to take things to another level in many ways.

Sound of Data provides customer navigation offering progressive techniques and solutions to their clients, like call centre solutions, SMS services, mobile web or other smart telecom products. They are the crew behind the handling of your The Voice of Holland votes, booking your eTickets or handling your phone call to a charity callcenter.



We were challenged to create a new, stunning site using modern web techniques and integration of their new branding guidelines and had carte blanche to create something fresh.



Since the content of the site is a bit complex, we wanted to create a clean interface to make sure the focus is on the message. We kept things simple, but added a fancy layer of depth to the details. The new color pattern and shapes of the brand guidelines gave us the opportunity to design some smooth elements. These elements are purposed to explain the services the company provides.



During development of the new Sound of Data site, we try to expand these elements by focussing on rich user-interaction, new technologies and tried to make people ‘wow’. It’s base is built in HTML5, CSS3 and JavaScript.

After completing the base of the website, we had a solid start which challenged us to enrich it with great user-interaction and state-of-the-art animations. We came up with some great ideas of using 3D and multi-depth elements. Since it’s -still today- not fully cross-browser supported, we made some simple tests with HTML5 + CSS3, HTML5 Canvas, SVG and a JavaScript 3D Engine. Eventually we made the decision to use HTML5 + CSS3 to create the elements with a fallback for older browser which do not support the script.

While using both X-, Y- and Z-Axis of an element with multiple layers, we managed to create a fully interactive 3D-element as i.e. it is shown on the homepage, travel-page and media-page. The elements react to your cursor and turn or flip when hovering.



When, for example, opening the Travel page on your iPad, it will detect the device and you’re able to use the accelerometer to interact with the elements. Horizontal skew your iPad and the element will smoothly turn and you’ll experience the 3D-effect of it. Try it out yourself!

Other great custom elements are the animating-stats on the homepage, the HTML5 Canvas animation and team-members on the About page and the archive on the News page. The stats on the homepage will animate as soon as they become visible when scrolling down - they’re built with CSS3 and are variable of length. When changing the numbers and/or text, they will automatically change their behavior. The team-members are randomly loaded within three different template-layouts and interact with the mouse. When hovering one, its background will go screen-wide and the image will fade from grayscale to color using HTML5 Canvas. On touch devices it will react on the users taps.

On the News page we implemented an archive which will detect the current date and generates itself. When clicked, the content will refresh in-page using Ajax and the page itself will not have to be refreshed.

When browsing the site you’ll experience more interactive element such as drag & drop, filter by category and custom drop-downs. We combined our development-knowledge with great designs, interaction and animations to produce a clean and nowadays high-standard site with rich user experience. It’s optimized for iPad, fully cross-browser and multi-platform.

We’ve built a smart framework which detects your active language and renders the website with the right content using templates and clean functions. The content is being loaded from a database which can be managed with our custom CMS called “Rosie”. In this CMS we are able to publish projects, news-items per language and manage the team members. The CMS is built in HTML5, CSS3 and JavaScript, to optimize user experience and daily use.



Coming to a conclusion: we love this client and are glad we managed to create a product which we love both. Let us know what you think of it, check it out right here (best viewed in Chrome or Safari)!