Javascript

Friday, March 1, 2013

Embedding in a tall, square, or wide shape

The OmniStore automatically adapts itself to the space it finds itself in, using a Liquid Layout 2.0 design which employs a number of techniques that work together.  For example, we might find ourselves in a very narrow space:




Wide format imagery won't look great in a tall shape.  In this case, the OmniStore has chosen tall brand images that fit the tall shape (aspect ratio) it is in.  Also notice that the store name (Wines) does not appear on the right hand side in this case, to make the layout look cleaner.

On the other hand, we could embed the very same store in a wide shape, in which case the OmniStore will choose a different set of brand images that better match a wide format:




This is the same store but this time the OmniStore is choosing wide format imagery.

If you look at the all the slides in both shows, you will notice that one image is the same - this is a square image which is allowed in both formats, although it will be somewhat distorted.  Note that depending on how wide or tall the space is, you may still get some stretching or distortion, but by choosing more appropriate imagery if available, that makes the store look much better.

To make your slide show most flexible, you may embed a variety of images with varying aspect ratios (both tall and wide, or square) and the system will automatically choose the best images for the show.

What if you have only wide brand images and your'e being asked to display inside a tall shape, or visa versa?  This still works though the store is greatly reduced in size to fit.

No comments:

Post a Comment