BBVA API Market
Used in moderation, parallax web design can provide a nice touch, more modern and professional, to a site. But what’s behind this technique?
The so-called parallax scrolling is the latest phenomenon in web design, adding movement and generating an illusion of depth as it displays two or more objects simultaneously at different speeds in a 2D plane. Although we are now seeing a huge boom in this type of web content presentation, video game designers and other artists have been using it for many years.
Firstly, there are several things to keep in mind before you start to apply it:
Approach the design phase of the web meticulously. A complex design can end up hurting the performance, the usability and the user’s experience.
Make sure all the content is aligned and focused on the main view.
Make your JavaScript as fast and efficient as possible to avoid excessively long loading times.
Always use multiple browsers to detect possible errors on the website.
Required technology
The development of a parallax website encompasses technologies such as HTML5, JavaScript and CSS. But don’t panic if you’re not an experienced developer: there are some libraries which will make your work easier. Some of the most popular are parallax.js, skrollr.js and jarallax.js.
To begin with, we’ve found a small clear and simple tutorial which will help you to start programming. But, first of all, remember you will be able to create the ‘containers’ and the body of the page with HTML. With CSS you can decorate the web’s paragraphs and texts, providing them with styles and colour, which are then converted into floating elements. Once the CSS is completed you can apply the animations with the help of JavaScript libraries such as jarallax.js.
Note that this type of web design is based on elements that move in and out of the screen, so if you want your site to be more efficient a trick to take into account is establishing an order in the code that detects when a container is located outside the window, so it stops calculating and adjusting its position. This will prevent any unnecessary calculations when the elements are off the screen, thus improving performance.
Parallax in mobile platforms
Today, developing a website not only takes into account the way it displays and performs on computers, but also on mobile devices, and in the latter parallax is usually slow and doesn’t look so good. So how is it possible to make our designs ‘friendly’ in both worlds?
A good solution is Jetpack. This tutorial shows how with this plugin, which features a mobile devices detection system, it is possible to adapt a parallax scrolling design to a smartphone or a tablet. For this it is necessary to disable the parallax JavaScript and load in an extra CSS file when a mobile phone or tablet is detected. In that style sheet it is possible to load smaller compiled versions of background images, and use media queries to adjust them to different sizes.
Some of the best examples
The parallax scrolling technique can cover everything, from the simplest designs, like Flickr, up to some really complex projects such as the site created by Peugeot to promote its hybrid vehicles. The key is to find a way to incorporate all the elements you want with a unique approach and without harming, as mentioned before, the performance, the usability and the user’s experience.
If the goal is to communicate different types of information, the parallax design allows you to create a website that draws attention and invites to browse and discover all the information it contains. An example can be found in this website
Given the lack of attention in today’s world, creating a parallax scrolling site is a good excuse to tell a story in an entertaining way, by combining web design and comic-style techniques, such as storytelling and illustrations. A good example is the site created by the team of ‘The Walking Dead’ to show the transformation process of a human into a real zombie.
Advertising is a field which can also take advantage of the possibilities offered by parallax, drawing the customer’s attention and showing the full potential of a product by engaging him up to the end to fully discover it. This is how Wii has created the promotional site for the Mario Kart video game.
The parallax technique is not only a way to display information, but also a new way to animate it and, as said before, to tell it. An interesting example is found in this story published by The New York Times.
In a connected world, APIs are the glue that keeps all the parts that form our day-to-day lives in place. The same way the power of glue depends on the material it is used on and the knowledge of its properties, APIs are only as useful as their documentation allows for.
There are different solutions to monitor the performance of an API, in terms of traffic, quality and speed of the answers it provides. Detecting faults in the code or quantifying the generated revenues are also some of the options offered by these useful tools.
App users must be aware that a button... is in fact a clickable button. Therefore, app buttons must be designed in such a way that users should feel invited to interact with the interface and actually click on it.
