Design Editor
Templates
Hosting
INTEGRATIONS
Layout & Design
One of the key differences between designing for print and the web is that the page size, and by extension, the size and position of content on the page, remain static in print but not on the web.
Follow these guidelines about layout, to ensure that your projects are easier to adapt to different screen sizes.
Safe Zone
As you move things around on the canvas, you may notice that there are two blue vertical lines that turn red if you try to place something on top of them.
Those blue lines indicate what we’d like to call the “Safe Zone”, which is the area that you can safely assume will be visible to anyone viewing your content regardless of their screen size. You can still place things outside the Safe Zone, it just may not be visible to viewers who have smaller screens.
The safe zone is only concerned with the width of the screen. The height is not an issue as scrolling is the expected behavior when content is too long on the web.
You can never be 100% sure what every single viewer will see, but the recommended width we set for the Safe Zone is based on research of the most popular screen sizes and finding the lowest common denominator (within reason).
There’s no One-Safe-Zone-Fits-All, so each category of devices needs its own Safe Zone. More on devices in the next section. One last note — when you set the width of an element by percentage, the value is applied in relation to the Safe Zone, not the actual screen/browser width.
Adaptive Design
Your content will be viewed on so many devices and there’s no magic about how to handle that. However, a little bit of knowledge and Vev can go a long way.
There’s quite a bit to say on Adaptive Design that we leave it to a separate article you are encouraged to see next: Designing for different devices.
Last modified 5mo ago
Copy link