Menu icon Foundation
Using Ink and my custom Template

I've been working with Foundation Zurb's Ink for building new responsive templates for TacticalGear.com. So far the experience has been somewhat frustrating dealing with all the difference browsers and rendering issues that can arise. However, based on my Email On Acid test results, it appears I have been able to get the email to degrade nicely in over 98% Desktop / webmail and mobile clients.

I wanted to share some things I've learned as I built out this template through trial and error. While supporting retina images is nice, they caused rendering issues is some of the email clients that were deal breakers for using retina image.

The First Test
In the first test, I used used an image that was larger than the space allocated thinking it would scale down. In some test cases it did exactly that. However, in Gmail it caused the table to increase in size and essentially rendered to the actual size without any scaling occuring.

Undefined

The Second Test
I then performed the same test again, only this time I specified the image width on the image tag. For example, I used placeholdit images that were 580px by 400px. I specified a height of 280 by 193. (You may ask yourself, why didn't I just use 290 x 200? I wanted to test leaving space for the gutter). The results were better but not great. The image did scale this time, however it caused alignment issues. See the screenshots below. As an FYI, I also tested 290x200 and experienced the same alignment issues.

Undefined

I also noticed when I specified the height and width of the image on the image tag that some email clients like Android were squishing the images instead of scaling them. In addition to that, I also lost my gutter completely. See the screenshot below.

Undefined

Another example of rendering issues with retina images when specifying the height and width on the image tag. The example below if from Thunderbird.

Undefined

In my final test which is the code provided below. I decided retina images were causing too many problems. So I decided to design emails using the actual image height and widths. However, the solution I went with also has some draw backs.

Considerer the following
When deciding to use the actual size of the image, keep in mind your images will appear somewhat blurry. Ex. IOS devices will be blurry because of the pixel density of those devices. If this is something you can live with, you will find that testing goes much more smooth and more support.

In addition to the somewhat blurry image, there's some margin issues to consider as well. For example, I created a two column format with one image in each column. The width of each image was 280 x 200 as was the size of the image. This meant that when the image stacked on small devices, it was only 280px wide. Depending on the width of the viewport, this means you will have some larger margins to the left and right of your stacked images.

Conclusion
As an ecommerce company, we wanted to support as many clients as possible. For this reason, we decided non-retina images were the way to go. This means my team and I will have to "design around" the fact that we may have larger margins on some small devices with a large viewport. but we think this is something we can design around.

Check out the template below.

inktemplate

I've been working with Foundation Zurb's Ink for building new responsive templates for TacticalGear.com. So far the experience has been somewhat frustrating dealing with all the difference browsers and rendering issues that can arise. However, based on my Email On Acid test results, it appears I have been able to get the email to degrade nicely in over 98% Desktop / webmail and mobile clients.

I wanted to share some things I've learned as I built out this template through trial and error. While supporting retina images is nice, they caused rendering issues is some of the email clients that were deal breakers for using retina image.

The First Test
In the first test, I used used an image that was larger than the space allocated thinking it would scale down. In some test cases it did exactly that. However, in Gmail it caused the table to increase in size and essentially rendered to the actual size without any scaling occuring.

Undefined

The Second Test
I then performed the same test again, only this time I specified the image width on the image tag. For example, I used placeholdit images that were 580px by 400px. I specified a height of 280 by 193. (You may ask yourself, why didn't I just use 290 x 200? I wanted to test leaving space for the gutter). The results were better but not great. The image did scale this time, however it caused alignment issues. See the screenshots below. As an FYI, I also tested 290x200 and experienced the same alignment issues.

Undefined

I also noticed when I specified the height and width of the image on the image tag that some email clients like Android were squishing the images instead of scaling them. In addition to that, I also lost my gutter completely. See the screenshot below.

Undefined

Another example of rendering issues with retina images when specifying the height and width on the image tag. The example below if from Thunderbird.

Undefined

In my final test which is the code provided below. I decided retina images were causing too many problems. So I decided to design emails using the actual image height and widths. However, the solution I went with also has some draw backs.

Considerer the following
When deciding to use the actual size of the image, keep in mind your images will appear somewhat blurry. Ex. IOS devices will be blurry because of the pixel density of those devices. If this is something you can live with, you will find that testing goes much more smooth and more support.

In addition to the somewhat blurry image, there's some margin issues to consider as well. For example, I created a two column format with one image in each column. The width of each image was 280 x 200 as was the size of the image. This meant that when the image stacked on small devices, it was only 280px wide. Depending on the width of the viewport, this means you will have some larger margins to the left and right of your stacked images.

Conclusion
As an ecommerce company, we wanted to support as many clients as possible. For this reason, we decided non-retina images were the way to go. This means my team and I will have to "design around" the fact that we may have larger margins on some small devices with a large viewport. but we think this is something we can design around.

Check out the template below.

Corey Schaaf over 3 years ago