A Project Layout (formerly known as Device Mode) helps you apply a set of styling rules to your Vev content based on the screen size it is viewed on.
The flexibility of designing for the web comes at the cost of having to keep (literally) billions of device screen sizes in mind. While you don’t have to design for each and every screen individually, it’s important to understand how Vev handles Project Layouts so that your content looks stunning on as many devices as possible.
This is a critical feature because you may design a fantastic-looking layout for a web page when viewed on a desktop device, but that same design simply starts to fall apart as the screen size gets smaller.
In visual terms, here’s what happens when you don’t utilize Project Layouts …
… and here’s what happens when you do!
What can change across Project Layouts and what can’t?
Short answer — Styling rules and transformation settings (size, position, and rotation) can change. Actual content can’t.
Long answer — Let’s take this example: Between Desktop Layout and Tablet Layout, you can change the size, position, rotation, color, padding, border, border radius, visibility, etc. of a text box, but you can’t change the actual text in it.
Now, someone clever may think of some tricks to show or hide two text boxes, each having different text in it, which gives the illusion of content changing for the same text box, but you get the point. In fact, that’s a handy trick you are free to use, but just make sure you don’t show/hide heavy content (e.g. big images, videos, some fancy elements) as that can affect page load performance.
A project will have at least one Project Layout and up to as many as you’d like, though typically you won’t need more than 3-5. Project Layouts are bundled together into what’s called a Layout Preset, which can then be reused in multiple projects.
Vev offers a number of Layout Presets, which you can select when you create a new blank project. You can also create your own Layout Presets and share them within your account. Lastly, once a Project Preset is applied to a project, you can add, remove, and edit its Project Layouts at any point in the lifecycle of a project.
When in doubt, just use the recommended Layout Preset of Desktop, Tablet, and Mobile and you can iterate from there.
A Layout Preset has to have one of its Project Layouts set as the “master” Project Layout, meaning that any styling/transformation changes in that master Project Layout will be applied in other Project Layouts unless those Layouts have changes affecting the same properties.
Translation — Let’s say you have Desktop, Tablet, and Mobile Layouts, and Desktop is set as the master. You have a text box with the default color of black. This is how the text color will be:
In Desktop Layout, changing the color from black to blue will apply those changes to all other Project Layouts.
If you switch to Tablet Layout and change the color from blue to green, that change will only affect Tablet.
Tablet(with local rules)
Now, if you go back to Desktop and change the color to red, it’ll only affect Desktop and Mobile. Tablet will not be affected as it has local rules.
Remember — Project Layouts are bundled into what’s called Layout Presets, which can then be used in projects.
Tutorial: Getting Started with Project Layouts
Step 1 - Select a Layout Preset for a new project
Create a new project
Click “Blank project”
Select a Layout Preset
The recommended option is “Desktop First” unless another option matches your needs better.
Step 2 - Switch between Layouts in your project
Open your project in either the Design Editor or Content Editor
Change the active Project Layout from the Project Layout list in the Top Bar
Press 1, 2, 3, etc. on your keyboard
Resize the viewport using the blue double-lines on the right edge, bottom edge, and bottom-right corner
Step 3 - Make changes to elements/sections
Switch between Project Layouts and feel free to move, scale, rotate, and style things. Pay attention to how those changes are/aren’t reflected in other Project Layouts. See Designing for different devices for a refresher on what behavior to expect.
Checkpoint - You could stop here!
The next steps go into how to customize Device Modes and Project Presets, which you may or may not need.
Step 4 - Manage your Project Layouts
Click “Manage Project Layouts” from the Project Layout list in the Top Bar
For each Project Layout, you can edit:
When on, the content will scale to fill up the entire width of the browser window even when it is beyond the limits of the Project Layout maximum width.
Set the dimensions for the viewport in your Design/Content Editor.
The width value, e.g. the 1440 in 1440x900, will be the trigger point for when the Project Layout becomes active/inactive.
Minimum/Maximum column width
Basic usage — keep them equal and your content column will keep the same width regardless of screen size within that Project Layout.
Advanced usage — set a range and your content will scale within that range if the screen size allows for it. [#TODO: revise and confirm, also what about safe zone?]
Lastly, you can create an additional Project Layout, e.g. Super Wide Desktops, and control the same settings listed above.
You can toggle on or off the ability to resize the viewport which leads to switching between Project Layouts. This only applies to when you are editing your project and may be helpful if you want to be extra careful not to switch modes by accident.
Step 5 - Create a custom Layout Preset
Building on the previous step, you may want to customize or create Project Layouts and re-use them in multiple projects. Layout Presets will be the perfect solution for that.
Create a new project
Click “Blank project”
Set configuration in the same way as before
Once saved, the Layout Preset will be available as an option whenever you create a new project. If “Share with account” is enabled, it’ll also be available to others in your account.