Including Animations in Mobile-Friendly Website Designs

Animations bring a sense of rhythm and dynamics to website experiences.

They can set the beats between content sections, signal what to pay attention to, and keep up the momentum as someone flows through. While animations bring so much in terms of artistry and usability, there are some considerations to keep in mind, especially when designing for mobile devices.

We’re going to cover what you need to know about animations and mobile-friendly website design so that your Vev creations will look good and perform well—even on smaller screens.

The importance of mobile-friendly website design and animations

Whether commuting on the subway, taking a break at work, or sitting on the couch at home, most of us reach for our phones when we have some downtime. While these digital devices offer a convenient way to get on the web, they have limitations. Animations that function well on the big screens and processing power afforded by desktops or laptops can be less impressive when viewed on mobile.

Designing mobile-optimized websites means being more selective and strategic in using animations and using simpler effects that work better on lower-level processors.

Mobile-friendly animation best practices

Mobile-friendly website design is led by intent

As web developers, one of the guiding rules we follow is to design with purpose, and website animations are no different. Especially on mobile, there’s no space to spare, and every animation should have a clear reason why it’s there. Whether it’s a scroll-triggered animation revealing a story line-by-line, or a visual effect giving someone feedback after clicking on an interactive element, mobile website animations should be utilized strategically.

Don’t use too many animations all at once

Imagine a wall of televisions, all blinking with the action of different shows. It would be almost impossible for someone to know where to look. Just like having too many TVs on at once, a website that’s too busy with animations can be overwhelming. Mobile-friendly website design takes a minimal approach for more focused user experiences.

Consider less powerful processors

Generally, mobile devices like phones and tablets don’t have the same level of GPUs and CPUs found on desktops. The CSS and JavaScript that powers my common web animations can take up too much of the limited processing of mobile devices, making them glitchy, slow, or not function at all. Mobile-friendly website design utilizes lightweight animations and reduces what’s on screen for better-optimized performance.

Mobile-friendly website design and breakpoints

Breakpoints are screen sizes at which a website adapts its layout, UI, and graphics. One of the most important lessons in learning how to be a web designer is understanding breakpoints and how to use them in crafting different variations of a website based on resolution or screen size.

Designers who work directly with CSS, use the @media rule to designate element properties based on defined breakpoints. Media queries can be used to control things like font-size, padding, alignment, and other styles depending on a device’s viewport. Breakpoints offer a great deal of flexibility in how a layout appears, letting designers create website experiences specifically for desktops, tablets, and mobile devices.

For those who aren’t well acquainted with CSS, @media queries can seem a bit abstract and intimidating, but thankfully, no-code web development tools make it possible to work with different breakpoints without having to write any CSS or HTML.

Using breakpoints with Vev 

Vev gives you options to use both fixed and fluid breakpoints.

Fixed breakpoints represent preset sizes for mobile, tablet, and desktop. While there’s nothing wrong with fixed breakpoints, a layout that adapts to these defined screen sizes can look a bit abrupt from one to the next. Fluid breakpoints change less dramatically, with layouts that scale and change within a range rather than a set size. Whether you're working with fixed or fluid breakpoints, you never have to worry about modifying CSS with Vev, as this all happens behind the scenes. Such is the beauty of no-code and how it facilitates mobile-friendly website design.

What to consider when working with Vev’s fixed breakpoints

Desktop (1440 px main breakpoint)

This breakpoint represents large screens, and it offers plenty of room for complex animations like multi-part parallax animations, dramatic transformations, and intricate 3D visuals.

Tablet (600 px to 1439 px)

As we move down to this smaller breakpoint, designers need to consider how animations may impact a user's experience. Complex animations that look and function well at 1440 px may perform differently at this breakpoint. Elaborate transitions, 3D graphics, animated UI components, and full-screen modals, while generally all compatible on smaller screens, should still be evaluated in terms of performance and usability.

Using less drastic animations like fade-ins and fade-outs, low-key transformations such as scaling or rotating, and slide-in effects, leads to better optimized and more mobile-friendly website design at this breakpoint.

Mobile (599 px and below)

This breakpoint is the smallest designation in Vev’s visual editor. At this screen size only essential animations should be in place. Simple scroll-triggered effects, such as fade-ins and basic parallax scrolling along with user-triggered feedback like click-triggered button state changes, are still effective on smaller screen sizes. Simple effects are less hardware-intensive, making them better geared for mobile-friendly website design.

Testing your web design across different devices

While many of us have access to both desktops and mobile there’s no way to account for the multitudes of different tech that’s out there. As mentioned previously, Vev makes it possible to view your design at three major breakpoints, but there are other mobile-website friendly design testing tools you can also use in evaluating your web apps.

Chrome DevTools

Chrome DevTools not only lets you see how web apps will look at different viewport sizes, but also how they will run. With a dropdown menu of devices, CPU simulations, mobile-network emulation, and the handy Animations panel, you can review, analyze, and modify animations to ensure they’re optimized for a variety of devices and screen sizes.

Firefox Developer Tools Suite

Firefox also offers a suite of mobile-friendly design tools with an Animation Inspector that utilizes timelines in visualizing properties like duration, transformations, and easing, and offering optimization analysis. Viewing animations, seeing how they perform, and inspecting and making changes to code all happen through the browser, making it possible to make edits in real-time and seeing how they affect mobile website animation performance.

Creative ideas for mobile-friendly website web design and creating animations with Vev

Micro-interactions

Above: https://www.cca.edu/glance/ - made in Vev

Micro-interactions are light and versatile, giving visitors small touches of visual feedback as they interact with a web app. Since they don’t take up much space or make heavy demands on processing capabilities, they’re common features in mobile-friendly website design.

Vev offers plenty of opportunities to apply micro-interactions to buttons, icons, text, visuals, and other components. Effects like changes in opacity, color shifts, rotation, scaling, and other animations enhance usability as well as lead to more visually engaging web experiences.

Parallax scrolling and scroll speed

Parallax scrolling, which offsets the rates that text and images appear as someone advances through a website, creates the optical illusion of depth. When everything in a design moves at a single speed, things can feel a bit flat, and parallax scrolling with is staggered scroll speeds is an effective way to add variety in how visuals and text appear.

When used selectively parallax scrolling effects don’t put a strain on a mobile device’s processing power, and are effective in keeping people’s eyes on what’s on-screen.

Scrollytelling

Above, left: https://www.vg.no/annonsorinnhold/frelsesarmeen/fattigdom-i-norge/ - made in Vev; right: https://hakai.org/the-demon-river/ - made in Vev

Scrollytelling is a technique that displays content over a background that fades in or evolves as someone moves from one segment to the next. It indicates changes from one part of a story to the next, and provides a steady sense of movement, guiding visitors forward. In the above mobile-friendly website design example built with Vev, the juxtaposition between the text scrolling over shifting background illustrations is impactful even at smaller breakpoints.

Sliders

A new addition to the Vev components library, Sliders offer plenty of flexibility in chaining together images, graphics, text, and other related content. Sliders are effective at different breakpoints, but when designing for mobile you’ll want to specify whether the slider is navigated through triggers like scrolling or swiping.

Integrating Rive with Vev

Above: https://impact.economist.com/projects/the-business-case-for-ai/ai-is-putting-a-new-spin-on-fan-experiences/ - made in Vev

Rive is one of the newest no-code animation tools out there, and is being used by everone from Pepsi to Duolingo to enhance their digital content. It’s also super easy to integrate with Vev—just check out how HLabs have used Rive in their Vev project for client Economist Impact.

So, "how can I add Rive to my Vev projects?" you may ask. Well, after creating your animated, interactive graphics in Rive, you can:

• Embed it in your Vev project using our Embed Anything feature
• Export your Rive creation as a video and add it to your Vev project by uploading it and using it in a video block
• Hard-code the creation into your site

Here are a couple of best practices to keep in mind when using Rive with Vev:

• Make sure you have optimized any images and graphics used in the Rive animation.
• Run a performance test to make sure you haven't missed anything that will slow your page down once the Rive creation is embedded in Vev, and then another test on your final content.

Build mobile-friendly website designs with Vev

Creating more responsive websites doesn’t have to be a mystery hidden within the intricacies of HTML and CSS. Vev lets you dial in your designs at various breakpoints, helping ensure that users will have positive experiences, no matter how they access your site.

With an expansive library of layout components, UI elements, animations, and other essential features, Vev’s no-code visual editor opens up design to anyone.