Home Page Version for each Device Category

[SJ_Med]

I'm trying to ensure that our pages, starting with our Home Page, which has various customer logos and other images, shows best on each device category - desktop, mobile, and tablet. 

I need some guidance on how I can create a version of any page that only displays on the targeted device type so that images display best. 

Right now, each type displays differently, and I can't seem to find any settings that work best for all. My only solution is to create a version fo reach type, unless there's a better way?

How do sites handle this?

[Marcin Kwiatkowski]

Hi,

from my experience, enough solution is having two versions of images: the first one for desktop and the second one for mobile.

From the technical side you can use <picture> HTML element (but keep in mind that this not works in IE11):

<picture>
  <source media="(max-width: 667px)" srcset="img_mobile.jpg">
  <source media="(min-width: 668px)" srcset="img_desktop.jpg">
</picture>

On the other hand, you can use CSS to show/hide each one image on different resolutions/devices.

Also from the backend side, you need to take care about provide versions of images for each view (device/resolution). 

I hope that this is helpful to you.