![]() For mobile we created two versions, one with a custom crop and focus point (on the left) and a non responsive image on the right. The source image is the same, but the focus and crop of the used image is optimised for the device. The image below nicely illustrates how we can affect the way images are being presented on mobile. After setting width or height to 'container', you need to ensure that the container’s width or height is determined outside the plot. After all, we have 3 breakpoints in our design and we want retina images since they look a lot better on mobile devices. The width and height can be set independently, for example, you can have a responsive width and a fixed height by setting width to 'container' and height to a number. It seems like a lot of markup for just one image, but in the end it’s worth it. A typical picture element would look like this (including prefixes for certain browsers): Our thumbnailing system in turn takes care of ‘retinizing’ images (3x or 4x would also be possible, but we don’t feel the need for those images yet) so we only have to make sure the source image is big enough. This usually results in a different crop for mobile images and for larger screens. We can define multiple crops of the same image with an option to define a focus point (the center point of your crop). ![]() Our backend system (Django) has various media library solutions that we tweaked to fulfil our needs for responsive images. ![]() So far this has worked out perfectly for us. We use Picturefill2 to make our solution work, even if the user has an older browser. Also nothing wrong with that, but what if the focus point of this image is a person? Their face would be 10x10 pixels big maybe? I think you get my point, using the same image for different screens is not gonna fly (not far at least). Shrinking the page to a phone viewport (let’s say 340 pixels wide) will make our example image 340x170 pixels. The problem gets even bigger when you use images as a background (since background images don’t affect their containers’ dimensions). This will result in a complete lack of layout on your page or weird image-to-text ratio’s. Typography and other elements don’t grow/shrink by a same fixed ratio as images. In most cases however, this single image for all breakpoints won’t work. If we would build this (with or without grid) and look at the page on a 24" 1920 pixels wide screen the image would be 1920 pixels wide and 960 pixels high. For argument’s sake, this image has a ratio of 2 wide and 1 high (in the design this image would be 512 pixels high). Imagine a page design for a tablet (1024px) and there’s a banner-like element with a full width image. Slider has an Auto Responsive Layout Slider’s gridwidth and gridheight set to 2000×500. If you have not encountered this before, let me describe the ‘problem’ with images and responsiveness briefly. Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP. W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP. ![]() Sure, bandwidth is a thing, but layout also requires extra attention. The built-in responsiveness of W3.CSS uses the DP size of a screen. If you have a lot of images/illustrations in your design it’s another story altogether. Changing layout of elements on different screen widths is trivial with the techniques outlined above. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |