Mastering Layout
One of the key differences between designing for print and designing for the web is that the page size, and by extension, the size and position of things on the page, remain static in print but not on the web. That brings both flexibility and complexity.
Let’s go over a few key concepts in designing Vev content that will look nice anywhere.
Each element is positioned relative to the section it belongs to. For maximum adaptability, you can set the “origin” of an element to control precisely which points are being used to make that relative positioning.
The 3x3 grid selector may look familiar if you’ve used apps like Photoshop. However, there’s a slight difference in the approach.
In Vev — 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. A blue line from the element to the section will indicate this visually.
For example, if you select the top-right corner as the origin, then the top-right corner of the element will be positioned in relation to the top-right corner of the section it belongs to.
For those who know Photoshop In Photoshop and other Adobe apps, the “registration point” selector sets the reference point on the element itself only. The x and y positions are always relative to the top-left corner of the working area.
In this case, if you select the top-right corner as the registration point, then the top-right of the element will be positioned in relation to the top-left of the working area.
If the above is confusing, that’s okay. Just spend some time tinkering with the position and origin point of an element in Vev and you’ll intuitively get it.
As you move things around on the Vev 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.
