JB2
Images with text calls to action and retina display
With so many B2C emails image heavy, I'm challenged to comply with retina display. If an image is 1200 px wide, and the inclusive call to action text is nice and crisp, I'm going to hear it from the client who opens the email on a non-retina display device. Is the practice of making images retina display ready currently something for segments?
Fabio Carneiro covered some interesting strategies for optimizing images for retina displays in his talk during our responsive workshop in February. Essentially, he's seen a lot of success with saving images at 2-4x their intended display size but very low quality to achieve that sharpness without a giant file size. You can watch his talk over on the Extras tab in your account.
This is another of those situations where knowing your audience is key. If lots of folks are opening with iPhones and in Apple Mail, chances are good that they are on a Retina display and that their experience is less than ideal.
One thing to think about—does the practice of slicing "one big image" emails into several smaller images change at all when considering Retina-ready graphics?
Just chiming in - the bit of my talk that covers compressive images should be pretty self-explanatory, but I'm around and happy to answer questions in case there are any.
Retina images can be used the same way as non-retina images, you won't really be experience tiny CTAs or text, everything is scaled accordingly on the display.
The method is to have your retina images be twice the size of what your non-retina image is, just scaled down to the non-retina proportions via your HTML code.
So, let's say you have a 600x200 hero image with a CTA and some text. Pretty run-of-the-mill. When creating the image for retina, you would make it at 1200x400 and then scale it down in code like:
It will be scaled proportionally so that the CTA and text won't be small or anything, but instead of the image and text being blurry on a retina device, it will be beautifully crisp.
For some further reading, check out these articles:
https://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/
http://ramin.is/blog/2012/03/30/fix-blurry-images-in-emails-viewed-on-retina-devices/
Keep in mind you will want to test this out, as some email clients don't play well with resizing images via code. Data usage on mobile devices can also be a problem if the images are really large or there are a lot of them.
Hope this helps, Joi!
Another way to use 2x images is through using the background-image CSS property. You can target retina devices through a media query to switch out a non-retina image for a retina-optimized one. The code would be:
Good markup code can control a lot, but mobile first -- at least in theory -- would (should) put image slicing onto the back burner. "High" design can be compartmentalized into product-bytes. Where the "hero" shot is either eliminated or replaced by a promotional CTA, then sometimes followed by a few rows of individual product images that tell their own short-stories through design. Remember the adage, a picture is worth a thousand words.
I love Apple emails, and they are designer archetypes. BUT, mobile condenses both space and time.
Thanks for the good words. Will share the conversation with my crew and test test test.