Developing sites that work responsively across multiple devices is no longer a nice-to-have—it’s now an industry standard. That’s why Vev offers infinite responsive and adaptive capabilities between a selection of different breakpoints. Since there are a variety of routes you can take to achieve a responsive design, this article breaks down how we recommend going about it.

As you experiment with Vev, you’ll undoubtedly discover workflows that work best for you. Yet, by using the best practices we’ve outlined below from the start, you can save yourself a lot of effort. We recommend that you optimize your content section by section when creating new projects. This allows you to tick off project sections as you progress through development, as well as reuse them further down your page without having to worry about re-optimizing for other mobile devices.

Breakpoints are arguably the most important concept in modern-day web design, due to the sheer scale of device sizes that can now access the internet. In Vev, you have the ability to define specific breakpoint sizes in your project and adapt your design accordingly. In Vev you can also decide between the option of fixed and fluid breakpoints.

You will also need to define what your “main” breakpoint is. The main breakpoint is the starting point for your design, which means that any styling adjustments will automatically flow through to the other breakpoints unless a specific change is made on a subsequent device.

There is a lot of personal preference involved in deciding your main breakpoint decision. Due to the majority of web traffic now being dominated by mobile devices (62% of all website traffic), it is highly recommended by most web designers to opt for mobile-first design.

However, we recommend that the main device should be led by your website’s demographic. By reviewing your analytics you can easily see which device most of your web traffic uses and make the decision based on data. That being said, depending on your user demographic this may not be true for your audience and if you’re more comfortable with a desktop-first design then there is no issue with developing for desktop and adapting your tablet and mobile designs.

Learn more about breakpoints.

Auto Layout allows you to easily space and align items within a frame without needing to click and drag elements to be “pixel perfect”. You can easily rearrange the items within the auto layout frame as well as “wrap” the content so that they automatically stack for smaller devices.

To apply Auto Layout, select the desired group of elements. When more than one element is selected, a new option will appear within the Style panel on the right-hand side. Press the + icon next to “Auto Layout” to group these together with Auto Layout applied.

To wrap content, you will need to tick the option within the Auto Layout menu. This can be found in the Design panel when selecting a frame with Auto Layout applied, or after you apply Auto Layout to a group of elements.

What is best practice for using Auto Layout?

We recommend to use Auto Layout wherever possible, to ensure your elements are spaced evenly and so they wrap, ensuring the content is optimized for smaller devices.

Learn more about Auto Layout.

The size of each component in Vev can be controlled by specifying a set width and height. For all elements, you will have the option to specify the width and height to be either a percentage (%), viewport size (vw & vh) or a pixel (px) value. On some elements, you will also get an option for “Auto”. For more information on how these values work, we’ve created a helpful sizing components article.

Vev’s default settings for elements are designed with responsiveness in mind. When adding a new element to your canvas it will automatically default the width to a percentage value. This is because the element will adapt its width depending on the size of the screen. For example, if you add an element to your canvas that’s set to 50% width, it will always be half of the screen size for desktop, tablet, and mobile.

The height value for most elements, by default, will either be set to “Pixels” or “Auto”.

“Pixels” is a fixed value, so it will be set to a specific size for all devices. “Auto” adapts the container of the element depending on the content within it. For example, a text container set to “Auto” height will adapt the height depending on the length of the text within it.

For the most part, you won’t need to. We’ve designed our components in a way that they are already responsive without having to put in unnecessary effort. That being said, we also want to be able to give designers freedom with their design and sometimes a fixed (pixels) value will be needed over a responsive (percentage value).

For example, if you add a logo to the header of your site, and set the width to 10%, it will appear fairly large on a desktop device. Yet, it will likely be too small on a mobile device, to counter this we can set it to a fixed pixel value so that it’s a good size on all devices.

Aspect Ratio

In some instances, when an element is set to a percentage width, the height will be set to “Pixels”. This means that no matter what device you are using, the height of that component will always be that fixed height. However, for things like images, this means the content will be cropped to ensure it fits into the container.

Sometimes, based on a design you might want to keep the aspect ratio. One way to do this is to go into each of the device views and adjust the height manually. Another way, which requires less work, and is our best practice recommendation, is to lock the aspect ratio. To do this, select the desired element and navigate to the style panel on the right-hand side. From here, between the sizing for the width and height of the element, you’ll see a link icon, by clicking this the aspect ratio will now be locked.

This is a tough question to answer as there are a lot of factors that come to mind when you are sizing components in your project. Percentages (%) are the default when you add new components to the canvas for the reason that it allows your design to be responsive without any additional work.

As we showcased above, there will be points in your design where a fixed size (px) will be better to achieve the results you are after. It takes time and practice to familiarize yourself with the Design Editor to make informed decisions on what to use and where.

Learn more about sizing components.

Constraints decide how a component’s position behaves inside a container (i.e. inside a frame or section), and how it reacts when changes are made to the device size. It essentially sets up a fixed anchor position for your component that is maintained across all device sizes.

When adding an element within a container, the constraints are set automatically according to the position the element is placed. The constraints settings can be found at the top of the Style panel on the right-hand of the canvas. Constraints can be adjusted by either interacting with the element directly or by changing the numbered values of the elements within the Style panel.

For more information on available options, read our constraints article.

Due to the automatic anchoring when clicking and dragging elements around the canvas, you might be comfortable with letting Vev do the work for you in the background. However, if you’re aiming for precision, you might want to input the values of the constraints manually from the right-hand Style panel.

It’s important to note that constraints will only be automatically assigned horizontally (left, center, right). If you wish to change the constraint vertically (top, center, bottom) you will need to manually adjust this in the Style panel.

In the example below, you can see two versions of the same section with a button that has its constraints set to the top vs. the bottom. When expanding the section with the constraints set to the bottom, you can see that the element moves with the base of the section. When the constraints are set to the top, the element does not move as there are no changes to the top of the section.

When using constraints, we recommend that you set the element to the nearest side of that container. This works for both content within sections and frames. For example, in the image above we would anchor the button to the center-bottom. This ensures that when you decide to resize the height of your section or frame you will keep the position of that element in the right place.

Read more on constraints.

The Style Indicator is a useful tool that lives within the style panel, helping you understand where the style of an element originates from. Usually, this will originate from the main layout (Desktop, Mobile, etc.) and filter through to your additional breakpoints, unless manual adjustments to an additional device are made.

Style Indicators apply to all configurable items of an element within the style panel such as constraints, sizing, background and padding.

Style Indicators are a true representation of responsive vs. adaptive design. Where possible, it is advised to ensure that your master device is set up in a way that allows you to do little to no work on subsequent devices. By using sizing and constraints smartly you can create a responsive design with ease without having to make manual adaptations to your other breakpoints.

Learn more about Style Indicators.