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.
or this very busy pigeon:
but we can also add simple animations to interactions throughout the site to improve UX with very little overhead.
- 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:
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
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.