Loki
- 2011
- PG-13
- 2hr 10min
- Action/Adventure
On the Web, we never know what exact client dimensions we'll run into. But designers always create comps with fixed aspect ratios. RatioRight preserves these ratios, regardless of how the design is delivered. This is especially handy for full-screen designs.
For instance, imagine you have a comp that's designed as 1024x692. RatioRight allows you to present that design at any scale while preserving the intended reference design ratios. Look at the example below. It's not an image, nor an iframe, and it's not scaled using CSS transforms. It's HTML scaled automatically using RatioRight.
Ratio Right is best used to help designs scale between similarly, but not identically sized, devices. The use case I had in mind was getting a full-screen design to fit on tablets, which have roughly the same dimensions, but which are not not exactly the same. Even an iPad can have more or less room depending on whether or not the bookmarks bar or tabs are showing.
RatioRight helps you to fit a given design, with correct ratios, into a given container or viewport, but it can't work miracles. If you have a landscape reference design, you can even preserve the design while presenting it in portrait by adding whitespace below it.
Try these examples, resizing your window or changing device orientation to see how they adapt.
Natch.
Since this is an adaptive design, start with a nominally flexible layout using percentages or flex-box. The examples shown are all -webkit-specific flex-box layouts, but there are other workable approaches. This gets you part way down the road.
Not everything needs to be flexible. Use "em" for everything that needs to have a "fixed" dimension (versus a flexible dimension). This is pretty easy, because RatioRight uses a 10px base. As such, 10px = 1em. So if you have a box that is 220px wide in your reference design, make it 22.0em. If a font is specc'd at 14px, make it 1.4em. And so on.
In order for images to scale, implement them as background images of flexible or em-bound elements, or size them with EMs using CSS. Don't provide a width and height within the IMG tag.
Make sure YUI3 and the RatioRight plugin are available. Then plug RatioRight into the node you want to scale. Pass in the width and height of your reference design. Optionally, pass in the "locked" parameter. It will lock your node to either landscape or portrait mode, regardless of device orientation or the viewport.
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> <script src="ratioRight.js"></script> <script> YUI().use('ratioRight', function (Y) { Y.one('#master').plug(Y.RatioRightPlugin,{ 'referenceWidth': 1024, 'referenceHeight': 692, 'locked': true }); }); </script>