Responsive web & animation

Web technologies evolve quickly and continuously, as does the hardware that supports them. In this article, we take a look at how Responsive Web and Animation techniques are currently used to enhance websites, and make some predictions for the future…

What is responsive web?

Responsive web is an approach to designing and building websites that ensures they display properly on all screen sizes and devices, responding to the current environment. This is usually achieved through the use of CSS Media Queries, which allows developers to set style rules that depend on a particular configuration, such as screen size or orientation.

What are the benefits of responsive web?

Creating a responsive website ensures it can be viewed correctly on any device. The majority of web content is now viewed on mobile devices, of which there are endless configurations, so having a site that adapts properly to all of these environments will ensure your site is reaching the maximum number of people.

The future of responsive web

Media Queries have solved the majority of modern day issues for web developers, allowing sites to be viewed on a vast array of devices based on their screen size and other features for the foreseeable future. However, as the web finds its way onto more and more devices such as ‘wearables’ and Virtual Reality headsets, developers will need to find ways of making sure their sites cater to these new environments. For example, if a pair of smart-glasses allowed the wearer to browse the web, sites could provide AR functionality, or a VR headset could show 3D animations specifically for that environment.

Animation Techniques

There a number of different ways to create animations on the web – from native APIs to plugins, and even creating your own libraries. They are generally grouped by the 2 underlying technologies used to power them – CSS and JavaScript.

CSS

CSS animations were introduced a few years back and have quickly become the go-to method for web animations due to their general simplicity and their performance vs JavaScript (due to hardware acceleration. Relatively complex animations can be achieved using CSS alone, for example this impressive rendering of the solar system:

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

or this very busy pigeon:

See the Pen Pure CSS Pigeons #weeklycssimages by Julia Muzafarova (@miocene) on CodePen.

but we can also add simple animations to interactions throughout the site to improve UX with very little overhead.

JS

Before CSS animations, JavaScript was the only real way to create animations on the web, due to its ability to do complex calculations, run code at time intervals, and respond to a variety of user interactions. These features still set JavaScript apart when it comes to more complex animations, especially when using an animation library that can do calculations for you. Some of the more common libraries:

  • jQuery – jQuery has long provided a simple API for animating web elements, and is still included in a large number of sites as standard
  • GSAP – a favourite at Clicky, Greensock is an incredibly powerful animation library with a focus on performance
  • VelocityJS – a popular upgrade to jQuery’s animation API, but lacking some of the more advanced features of GSAP
  • Snap – Snap is used for working with SVGs on the web, allowing developers to easily create and manipulate vectors
  • Three.js – Three.js allows developers to create interactive 3D environments – built on the same technology as Google Street View

Using these tools, developers have let their imagination run wild and produced some really creative interactive animations:

See the Pen Mouse balls animation by Renato Ribeiro (@renatorib) on CodePen.

See the Pen TinyPolyWorld – ThreeJS experiements. by Zultan (@Zultan) on CodePen.

 

What are the benefits of animation?

Animations can be used simply to add movement and life to an otherwise boring page, but if used intelligently can also improve the way a user interacts with a site. For example, if a user on a touch screen opened the website navigation and this was to slide out from the right, the user could easily assume that swiping in the opposite direction will close the menu – making this a much easier interaction than reaching for and tapping on a small cross. Similarly, having an interactive element animate as it appears on screen will draw the users eye, indicating to them that there is something important here.

Beyond interactions, we can also use animation to add a certain flair to a web page, particularly on page load. By default, elements will appear on the page as soon as the browser can render them – but this can create a ‘janky’ feel if elements lower down the page are pushed down by, for example, a large image loading above them. To improve this, we can add loading animations to pages, gracefully displaying elements in a particular order when they are ready. This can help the user orientate themselves on a page, and provides a much smoother experience as they navigate around a site.

The future of web animations

The Web Animations API is a native way of animating elements using JavaScript. JavaScript continues to grow exponentially thanks to the proliferation of frameworks such as Vue and React, and having a native way to animate these elements will be a considerable boost to developers and users, as high-performance animations can be built right into the code without any dependencies.

As hardware continues to improve, animations will become more prevalent and complex – and developers will need all the latest tools to create animations that are performant, engaging and improve UX. As with responsive design above, the increasing variety of devices that have access to the internet means finding new ways of creating rich experiences for all users of the web.

Examples from our work

  • My First Super Yacht – an immersive experience, detailing three yachting itineraries for potential holidayers
  • Amazed By Science – fun animations aimed at families (including an actual launching rocket!)
  • Clicky (this site!) – smooth transitions between pages, keeping the user engaged and improving perceived load times

If you’re looking for help with ensuring your website is responsive or want to experiment with animations, get in touch. We’d love to chat.

Written by Rich Tarr

Senior Front End Developer

Follow Rich on Twitter