Responsive template design and dynamic images

Hi Guys,
We are create a responsive template for a CM client - and obviously this is all new ground.

I was wondering if anyone can explain to me how CM handles the dynamic images a client uploads into their template each campaign.

Example we want to have a desktop CSS which has an image at 300x200 however on the mobile CSS we want to display this as 600x400 and fill the screen.

We are worried that CM won't serve the larger image and just stretch up the smaller one.

Or do we use percentages for images in our CSS - Desktop width=50% and Mobile width=100% and ask the client upload an image at 600x400:

Any help would be appreciated.

Cheers
Mark

roshodgekiss roshodgekiss, 4 years ago

Hey again, Mark! Happy to help you out here :)

Or do we use percentages for images in our CSS - Desktop width=50% and Mobile width=100% and ask the client upload an image at 600x400:

Generally, we use the reverse approach - desktop width: 100% and mobile width: 50% - given that mobile screens are usually much smaller than desktop email client preview panes. 'Scaling up' images is generally not recommended for quality reasons, as you can understand.

There are a couple of approaches you can take to optimizing images for mobile, which we've dedicated a chapter of our responsive email design guide to. Keep in mind that while it's possible to serve up different images for the 'desktop view' and 'mobile view', the majority of the time folks just adjust the width of images to fit into their design, not only to save development time, but bandwidth, as well.

Thanks, Mark! Let us know if you have any questions about this :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098