Development of the new Sound of Data website
By: Supersteil
During the development of the new Sound of Data site, we focused on rich user-interaction, new technologies and tried to make people 'wow'. Its base is built in HTML5, CSS3 and Javascript, and extended with jQuery.
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 not fully cross-browser supported, we made some simple tests with HTML5 + CSS3, HTML5 Canvas, SVG and a JavaScript 3D Engine. Eventually we made a decision to use HTML5 + CSS3 in order to create the elements with a fallback for older browser which does 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 mouse cursor, and turn or flip when hovering.
When opening i.e. the travel-page on your iPad, it will detect the device, and you're able to use the accelerometer to interact with the elements. A horizontal skew of your iPad image, 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 team-members on the about-page and the archive on the news-page.
The stats on the homepage will animate when scrolled and visible for the user, it's built with CSS3 and is variable of length. When changing the numbers and/or text, it will automatically change its behaviour. The team-members are randomly loaded within three different template-layout and interact with the mouse. When hovering, its background will go screen-wide and the image will turn from grayscale to colour using HTML5 Canvas. On iPad it will react using touch-click.
On the news-page we implemented an archive which will detect current date and variable build 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 elements 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 up-to-date high-standard site with rich user experience. It's optimized for the iPad, fully cross-browser and multi-platform.
We 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 loaded from a database which can be managed with our custom CMS. In this CMS we are able to publish projects and news-items per language and manage the team-member. The CMS is built in HTML5, CSS3 and JavaScript, extended with the newest jQuery and plugins to optimize user experience and daily use.