{"id":2342,"date":"2015-09-25T14:21:40","date_gmt":"2015-09-25T14:21:40","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=2342"},"modified":"2024-11-11T19:06:29","modified_gmt":"2024-11-11T13:36:29","slug":"defeating-gmail-with-responsive-code-hybrid-spongy-comes-as-a-savior","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/defeating-gmail-with-responsive-code-hybrid-spongy-comes-as-a-savior\/","title":{"rendered":"Defeating Gmail with Responsive Code – Hybrid & Spongy comes as a savior!"},"content":{"rendered":"

Responsive is quite in the vogue. With most subscribers<\/a> reading emails on the go, it is quintessential to send out emails using media queries that render well across the devices irrespective of the screen sizes.<\/p>\n

For most marketers that has a user base viewing emails in native apps on Android and iOS, responsive fetches amazing results. However, media queries are a problem when your user base is viewing emails using third party applications. As they have no or minimal support, these emails don\u2019t render well on these email clients or third party app.<\/span><\/span><\/p>\n

\"\"<\/a><\/div><\/div>\n

If your user base is relying more on the third party apps, there is a workaround to using media queries which is now known as hybrid coding technique or spongy technique of coding. With this approach, the email renders just like the responsive version in the third-party apps as well however, this method does have some limitations and it would not be as good a responsive email<\/a> as developed using media queries.<\/p>\n

So, what is the great fix?<\/strong><\/p>\n

The logical solution to fix the rendering issue is to use min-width and max-width to enable movement. However, this workaround will not work in Outlook, but luckily there are few solutions that can help you in fixing this problem as well.<\/p>\n

You need to create a table that is 100% wide with a max-width of your desired size on Desktop.<\/p>\n

\"Coding<\/a><\/p>\n

@media screen and (min-width: 601px) {<\/strong><\/p>\n

.container {<\/strong><\/p>\n

width: 600px!important;<\/strong><\/p>\n

}<\/strong><\/p>\n

}<\/strong><\/p>\n

Apple Mail, which doesn\u2019t respect max-width, create a media query to limit that table\u2019s size on desktop<\/p>\n

<!–[if (gtemso 9)|(IE)]><![endif]–><\/strong><\/p>\n

This is used for conditional CSS for Outlook to force it to collapse borders on all tables and prevent unwanted gaps<\/p>\n

In Body Margin: 0; padding: 0;min-width: 100%;<\/strong><\/p>\n

We also have Margin: 0 auto;set here to center our table in Yahoo in Chrome. Though this use of margin is for Yahoo typically, we always capitalize Margin so that Outlook.com won’t strip it out.<\/p>\n

Under the body, first we have a <table>tag, to center its contents.<\/p>\n

<!–[if (gtemso 9)|(IE)]><\/strong><\/p>\n

<table width=”600″ align=”center” cellpadding=”0″ cellspacing=”0″ <\/strong><\/p>\n

border=”0″ ><\/strong><\/p>\n

<tr><\/strong><\/p>\n

<td><\/strong><\/p>\n

<![endif]–><\/strong><\/p>\n

<table class=”container” align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″ style=”border-spacing:0;Margin:0 auto;width:100%;max-width:600px;”><\/strong><\/p>\n

<tr><\/strong><\/p>\n

<td><\/strong><\/p>\n

[content goes here]<\/strong><\/p>\n

<\/td><\/strong><\/p>\n

<\/tr><\/strong><\/p>\n

<\/table><\/strong><\/p>\n

<!–[if (gtemso 9)|(IE)]><\/strong><\/p>\n

<\/td><\/strong><\/p>\n

<\/tr><\/strong><\/p>\n

<\/table><\/strong><\/p>\n

<![endif]–><\/strong><\/p>\n

A conditional table for Outlook that is hidden to all other clients. We need these because we\u2019re using the max-width property which Outlook doesn’t support. Therefore we need to create special Outlook-only tables with explicit pixel widths to contain everything in Outlook.<\/p>\n

\"The<\/a><\/div><\/div>\n

Single Column Layout:<\/strong><\/p>\n

For full-width banner you just need to give class in td of image & define class in style, Change the max-width according to your email size.<\/p>\n

\"Coding<\/a><\/p>\n

Two Column Layout:<\/strong><\/p>\n

\"Coding<\/a><tr><\/p>\n

<tdstyle=”text-align:center;font-size:0;”><\/p>\n

<!–[if (gtemso 9)|(IE)]><\/p>\n

<table width=”100%”><\/p>\n

<tr><\/p>\n

<td width=”50%” valign=”top”><\/p>\n

<![endif]–><\/p>\n

[column to go here]<\/p>\n

<!–[if (gtemso 9)|(IE)]><\/p>\n

<\/td><td width=”50%” valign=”top”><\/p>\n

<![endif]–><\/p>\n

[column to go here]<\/p>\n

<!–[if (gtemso 9)|(IE)]><\/p>\n

<\/td><\/p>\n

<\/tr><\/p>\n

<\/table><\/p>\n

<![endif]–><\/p>\n

<\/td><\/p>\n

<\/tr><\/p>\n

These conditional columns are important, because without them Outlook will not let our two floating tables sit neatly side-by-side. As Outlook doesn’t support max-width either, these columns help restrict each column to the correct size.<\/p>\n