Menu icon Foundation

Foundation Forum

Foundation Forum

Seamless Image in 2 column format Foundation For Emails

 

My team and I have been trying to create seamless two column layouts with images.  The reason we are doing this is to have two unique links for a products in an email.  We just want them to appear seamless so we can have and atmospheric background. However, when we try to do this, on iPhone devices and android devices is there is a 1px space added when the email shrinks down. Is there anything that can be done about this? Otherwise, we are not able to do layouts like the one below. 

Check out the results on email on acid (check the mobile devices): 

https://www.emailonacid.com/app/acidtest/display/summary/B8pgYGwXq6l48eDtZDpXObGQ9fciD7SBlHbsfI4f3x9uw/shared

Notice the spacer down the middle. I added a background color to the table so you could see the issue that happens when the images shrink on mobile. 

 

Sometimes the gap appears on both columns. 

 

 

Sometimes the gap appears between the rows. 

 

INKY markup for the columns. Note that the columns are nested. the class called "no-padding-b" just removed the default padding on the bottom of the rows because in some cases we want the rows to appear seamless in addition to the seamless columns. 

ALSO I USE PANNINI IN MY MARKUP BELOW. IF YOU WANT TO TEST THIS, YOU WILL HAVE TO ADD SOME TEMP URLS. 

<!-- 2 columns CTA / non collapsable / no gutter -->
<row class="no-padding-b">
    <columns>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-cumulus-18-asics-blue-silver-safety-yellow" title="Women's ASICS GEL-Cumulus 18" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-01.jpg" width="290" height="425" alt="Women's ASICS GEL-Cumulus 18">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-cumulus-18-imperial-safety-yellow-black" title="Men's ASICS GEL-Cumulus 18" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-02.jpg" width="290" height="425" alt="Men's ASICS GEL-Cumulus 18">
                </a>
            </columns>
        </row>
        
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-kinsei-6-lapis-black-silver-flash-coral" title="Women's ASICS Kinsei 6" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-03.jpg" width="290" height="425" alt="Women's ASICS Kinsei 6">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-kinsei-6-poseidon-carbon-copper-black" title="Men's ASICS Kinsei 6" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-04.jpg" width="290" height="425" alt="Men's ASICS Kinsei 6">
                </a>
            </columns>
        </row>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gt-2000-4-lapis-safety-yellow-soothing-sea" title="Women's ASICS GT-2000 4" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-05.jpg" width="290" height="425" alt="Women's ASICS GT-2000 4">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gt-2000-4-safety-yellow-onyx-carbon" title="Men's ASICS GT-2000 4" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-06.jpg" width="290" height="425" alt="Men's ASICS GT-2000 4">
                </a>
            </columns>
        </row>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-poseidon-safety-yellow-cockatoo" title="Women's ASICS GEL-Noosa Tri 11" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-07.jpg" width="290" height="425" alt="Women's ASICS GEL-Noosa Tri 11">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-carbon-silver-hot-orange" title="Men's ASICS GEL-Noosa Tri 11" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-08.jpg" width="290" height="425" alt="Men's ASICS GEL-Noosa Tri 11">
                </a>
            </columns>
        </row>
    </columns>
</row>
<!-- /2 columns CTA / non collapsable / no gutter -->

 

 

 

 

 

 

foundation for emailsSeamless Imagesbug in IOS device.

 

My team and I have been trying to create seamless two column layouts with images.  The reason we are doing this is to have two unique links for a products in an email.  We just want them to appear seamless so we can have and atmospheric background. However, when we try to do this, on iPhone devices and android devices is there is a 1px space added when the email shrinks down. Is there anything that can be done about this? Otherwise, we are not able to do layouts like the one below. 

Check out the results on email on acid (check the mobile devices): 

https://www.emailonacid.com/app/acidtest/display/summary/B8pgYGwXq6l48eDtZDpXObGQ9fciD7SBlHbsfI4f3x9uw/shared

Notice the spacer down the middle. I added a background color to the table so you could see the issue that happens when the images shrink on mobile. 

 

Sometimes the gap appears on both columns. 

 

 

Sometimes the gap appears between the rows. 

 

INKY markup for the columns. Note that the columns are nested. the class called "no-padding-b" just removed the default padding on the bottom of the rows because in some cases we want the rows to appear seamless in addition to the seamless columns. 

ALSO I USE PANNINI IN MY MARKUP BELOW. IF YOU WANT TO TEST THIS, YOU WILL HAVE TO ADD SOME TEMP URLS. 

<!-- 2 columns CTA / non collapsable / no gutter -->
<row class="no-padding-b">
    <columns>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-cumulus-18-asics-blue-silver-safety-yellow" title="Women's ASICS GEL-Cumulus 18" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-01.jpg" width="290" height="425" alt="Women's ASICS GEL-Cumulus 18">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-cumulus-18-imperial-safety-yellow-black" title="Men's ASICS GEL-Cumulus 18" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-02.jpg" width="290" height="425" alt="Men's ASICS GEL-Cumulus 18">
                </a>
            </columns>
        </row>
        
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-kinsei-6-lapis-black-silver-flash-coral" title="Women's ASICS Kinsei 6" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-03.jpg" width="290" height="425" alt="Women's ASICS Kinsei 6">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-kinsei-6-poseidon-carbon-copper-black" title="Men's ASICS Kinsei 6" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-04.jpg" width="290" height="425" alt="Men's ASICS Kinsei 6">
                </a>
            </columns>
        </row>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gt-2000-4-lapis-safety-yellow-soothing-sea" title="Women's ASICS GT-2000 4" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-05.jpg" width="290" height="425" alt="Women's ASICS GT-2000 4">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gt-2000-4-safety-yellow-onyx-carbon" title="Men's ASICS GT-2000 4" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-06.jpg" width="290" height="425" alt="Men's ASICS GT-2000 4">
                </a>
            </columns>
        </row>
        <row class="collapse no-padding-b">
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-poseidon-safety-yellow-cockatoo" title="Women's ASICS GEL-Noosa Tri 11" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-07.jpg" width="290" height="425" alt="Women's ASICS GEL-Noosa Tri 11">
                </a>
            </columns>
            <columns small="6" large="6">
                <a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-carbon-silver-hot-orange" title="Men's ASICS GEL-Noosa Tri 11" target="_blank">
                    <img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-08.jpg" width="290" height="425" alt="Men's ASICS GEL-Noosa Tri 11">
                </a>
            </columns>
        </row>
    </columns>
</row>
<!-- /2 columns CTA / non collapsable / no gutter -->

 

 

 

 

 

 

Corey Schaaf about 3 years ago

Anyone have any ideas on this? I thought about bullet proof backgrounds, but that seems a bit too tedious for something so small. 

zacbrown@me.com about 3 years ago

Unfortunately this is an example of a very old rendering issue that's present in both Webkit and in Blink. So far as I know there is no real solution to it. Here's a very in depth discussion and example of it: https://productforums.google.com/forum/#!topic/gmail/Fxt78gN5q5E

 

Here's the associated StackOverflow discussion: http://stackoverflow.com/questions/28502129/gaps-appearing-in-an-email-in-only-android-gmail-how-do-i-fix-this-issue

 

I'd LOVE to be able to squash this bug, but so far the only thing my team and I have been able to do is use VERY creative image slicing and try to match bgcolor with the image as best as we can.

 

[edit] This is not a common that is unique to or introduced by Inky, it's something you'll see hand-writing your HTML from scratch as well.

Corey Schaaf about 3 years ago

Hey Zrb0529 - We've been doing the exact same thing when it comes to creatively slicing images and matching bgcolor with images to make it seamless. Nice to know we're not the only one having this problem. 

zacbrown@me.com about 3 years ago

Yeah it's a real head banger. You can actually see it in action in real time! In the case study link there's a file you can download that's comprised of a series of black squares. If you zoom in on it, or if you re-size the browser window, you'll see breaks appear and disappear seemingly at random. It's mind numbing for sure.

Currently, though, I'm actually hard at work developing responsive templates for my team along with a set of reusable content blocks. I switched this morning from MJML (mjml.io) which is pretty good over to Foundation/Inky because MJML seems to not have support for outlook.com which 25% of our 2-3M customers use...so it's sort of a big deal :)

One thing I'm finding though is that the documentation for Foundation is quite lacking (I suspect this is so that they can sell their courses). So it's slow-going as compared to using MJML.

To that end...what would you say to creating a user group in something like Slack or Hipchat? The developers and community for MJML have one such group (mjml.slack.com) and it's EXTREMELY helpful.

Corey Schaaf about 3 years ago

I would be open to it. Slack would be my preferred choice (it's what we use at work). We converted our templates to foundation about 2 months ago. The process was fairly straight forward, but not without it's quarks as I work with a team of three other designers besides myself. Everyone is pretty comfortable with the workflow so far, but we're finding things (like the above) and having to creatively design around them. Nothing that would be a show stopper. My team took the foundation class and it did help enormously. Well worth the money because you get to see actual examples how the people who designed the framework actually use the code to build an email. Once you get that "foundation" course - it really opens up some possibilities for you to create your own templates. 

Rafi does a really good job of explaining his code examples and it's nice to see use cases and how you would code for them first hand. 

zacbrown@me.com about 3 years ago

Set up! https://inky-users.slack.com

I'll look into the course for myself also.

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635