In Vev, you have the ability to use both the Adaptive and Responsive approaches when designing your project to make your content look and behave exactly as you want it to across multiple devices. Let’s quickly break down what both of these terms mean, and how they work together.
What is Adaptive design?
Adaptive design is where you design set layouts for different screen sizes, using width and device type as breakpoints to present the best layout for a given device. The layout of the page switches to a different layout once the set breakpoint is reached, for example switching from laptop mode to tablet mode.
What is Responsive design?
Responsive design is where you only design one layout that automatically adjusts to any given screen size. The webpage will automatically re-arrange the elements on the page, typically by wrapping the elements and stacking them appropriately to suit the device.
How do these two work together in Vev?
When creating your project in Vev, you are given the choice to choose the breakpoints you want for your project at the start (you can always add more at any time if you choose).
As you design in your main device mode, the design cascades down to the other device modes, making it easy for you to go to the other device modes to adaptively arrange the elements as needed or hide elements as needed. For example, in the gif below, you can see the “246+ unique plants & flowers…” text disappears once it gets down to the mobile view.
On the main device mode, you can always make your designs responsive by incorporating fluid breakpoints, auto layout, percentage/auto-sizing, lock aspect ratios, and other such responsive design configuration components to make your designs automatically adjust across the breakpoints. The example above incorporates these configuration components, as you can see the text automatically resizes and the placement of objects automatically changes as we move across the different device modes.