Since the Deckspert system is intended to work across all devices, its output is designed to be “responsive” – which means that the content will resize to fit whatever screen the end-user happens to be using at the moment. In a responsive application like Deckspert, it is not possible to know in advance exactly how images will be displayed to the end-user: an image may be framed slightly differently on a iPhone 6 than on Samsung Galaxy, and differently again on an iPad or laptop.
You can plan and prepare for this variation in advance by taking your photos with responsiveness in mind. There’s really only one simple rule to follow to take responsive-friendly images: center your content and provide wide margins on all sides so that cropping won’t impact important visual information.
Since Deckspert will always try to scale the image to prevent borders from showing in the view pane, there will be greater variation in the right and left margins for landscape images, and in the top and bottom margins for portrait images. In both cases, the same general rule applies: position your content within an imaginary square in the center of the camera frame for best results. Let’s look at a view examples.
Framing Content
The darkened zones in these three images represent areas that might be cropped when the image is displayed on multiple devices. As you can see, the third image loses nothing important, even with extreme cropping on the top and bottom, but it still looks professional when displayed as a full-sized portrait or landscape image.
When it comes to taking photos of people, you should be especially careful about potential cropping effects: one-eyed models can be disturbing and distracting.
Images with text, like logos or diagrams, can be especially challenging to work with in a responsive context. In general, always make sure that any important text is also included in the content of the Deckspert card, where you can be sure that it will be legible. If you must include text in the image, just make sure to follow the cardinal rule: center the content, and leave lots of room on the margins.