Laying out fixed pixel ads is a pain. Responsive web design is not fool proof. Such are the ongoing challenges web designers and developers face when building websites. But is there a truly holy grail in building web layouts that adapt and scale appropriately? Yes there is, and its possible through vectors.
First some definitions:
Screen - a region of a physical visual device
Viewport - a rectangular region that is a portion of a screen
Take a box
A box lives within a viewport
A box has color, borders, margins and padding
It also has dimensions that can be defined in:
pixels
percent in relation to its viewport
percent in relation to the screen
related to the size of a scaleable font
The box can expand, shrink, keep its size
It can expand and shrink proportionally or disproportionally
Its contents can do all the above as well (font, image, video, etc.)
Boxes can be placed adjacent to each other
A box can go outside the top of the other
A box can go under the bottom of the other
A box can be shadowed by the other
A box can envelope the other
Take a layout
A layout consists of one or more boxes
The layout lives within a device screen
Portions of a layout can be shown in a viewport
Contents in the viewport (which is a box) can be scaled too
We want layouts that snap to the viewport and scale proportionally.
In the world of technology where new devices are coming online every day no screen size is standard. There are infinite sizes possible and as web developers, we must find a model that works in all cases. If a box is to be proportionate to its surrounding environment it needs to be mathematically described as a vector. It must stretch, it must shrink, and it must scale. This is the only way you will get true responsive design.
