Layout
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.
Each element on the canvas is positioned relative to the section it belongs to. A blue line extending from the element indicates the origin position to the section. Depending on your design, changing the origin of an element might greatly help you out when adapting the design to different screen sizes, and will ensure that your content stays within the section and not "bleed" into other sections or off the canvas.
By default, the origin position is the top-left corner. To change the origin position, locate the 3x3 grid selector on the right-side panel, and click either of the squares to change the origin.
The origin selector sets the reference point on both the element itself and the section it belongs to so that the x and y positions of the element will be relative to the matching point on the section.
Let's say you want to add a burger menu in the top-right corner of your page and keep the default origin position. As you can see in the GIF below, the position of the burger menu is 836 px in the x-direction and 87 px in the y-direction from the origin. If you switch to tablet or phone mode, the element's x and y value would still be the same, but since the screen sizes on tablet and phone are smaller than 836 px, your element would now be off the canvas.
To prevent this from happening, change the origin to the top right corner instead, as it is the closest origin point of the element on the canvas. Now you will see that the blue line has switched to reference the top right corner instead, and the x value has changed to be 88 px in the x value from the right corner. If you now resize the canvas, you will see that the element will stay inside of the canvas, as the x value is less than the screen size of tablet and phone.
As a rule of thumb, we recommend that you change the origin selector of the element to match the positioning on the canvas.
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.
The above innocently short sentence needs some unpacking:
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 still place things outside the Safe Zone. It just may not be visible to viewers who have smaller screens.
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.
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.
