As per a recent survey, the typical digital consumer on an average now owns 3.64 of connected devices. This sums up to approximately 30.4 Billion devices globally. Moreover as per the latest Litmus survey of Emails opened in different email environments, Mobiles stands tall at 54% followed by 26% opens in webmail and 20% in desktop email clients. Following this trend, responsive emails came into picture.
Fig: Since webmail is emails opened in browser that includes both mobile and desktop, it is safe to say that nowadays more and more emails are opened in a mobile device.
Fig: A survey by Litmus states that most people love to read emails the most on mobile devices.
Why responsive emails became necessary?
Normally emails are coded for 600px width for easy renderability across all devices. Fixed-width emails are typically scaled down on mobile devices, leading to small, unreadable text. Responsive emails have the flexibility to render perfectly as per the device resolution using media queries. The design elements get arranged such that it doesn’t break the design when shifting from device to device. In order to achieve a seamless transition, breakpoints are defined as per which the layout gets rearranged according to the device.
Fig: This responsive email template displays desktop and mobile layout per breakpoint specified.
It’s every email marketer’s dream to ensure that their responsive email gets rendered across various devices properly. However, sometimes they may not come true since every email client has a different way to fetch various email designs and compatibility issues – resulting in designs that is rendered broken. This can nonetheless turn into an email marketers’ worst nightmare, even faster than the time taken for the email to land in the subscribers’ inbox.
Challenges faced in different Email Clients:
- Apple iPad/Tablets: First Generation of iPad had a display resolution of ‘1024 by 768 pixel’ and, with advancements in technology, the latest iPad Pro has a display resolution of ‘2048×1536’. The point of concern comes when the email is coded for width larger than 600px. In such scenario, a separate iPad layout will be necessary. Otherwise even a desktop layout works best to render on iPad.
However, following the iPad, there are some tablets who resolution or screen width is similar to the wider mobile phones of these days. A break point of 480px to 600px is needed there, that needs to be checked and corrected for better alignment. Images also need to be high resolution to render crisp and clear on those view.
- Native Mobile Apps: Android native email client support media queries out of box (except Samsung’s native email client). Unfortunately post Android 4.4 (KitKat) the native email client was replaced by Gmail. Earlier most of the third party email clients (Yahoo, Outlook exchange) didn’t support media queries, which is now been overcome with recent updates. Unfortunately Gmail hasn’t followed suit and still doesn’t support media queries.
Workarounds to overcome above challenges
1. Apple iPad/Tablets: As said earlier, in case your subscribers’ device list includes iPad, and you have a width of email that exceeds the 768px then you got use separate media queries for iPad. This can be achieved by including a media query as shown below.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
img[class=”hide”]
{
Display: none!important;
}
}
The above media query is for iPad 1st Gen and it supports both Landscape and Portrait.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
{
img[class=”hide”]
{
Display: none!important;
}
}
For iPad with retina display, you need to add another Expression.
As mentioned above, you will also have to include media queries for 480px to 600px width or of the email width of desktop if you wish to cater wide screen phones or tablets.
@media only screen and (min-width:481px) and (max-width:649px)
{
table[class=em_wrapper]
{
width: 100% !important;
}
}
2. 3rd Party Gmail App: Gmail app and Samsung native emails don’t support media queries. At such moment we need to adopt a practice called Hybrid or Fluid Layout, which doesn’t require media queries.
Designing responsive emails without media queries poses some roadblocks.
Most prevalent method is to convert your two and three columns layouts into one column layout.
<tr>
<td class=”two-column”>
<!–[if (gtemso 9)|(IE)]>
<table width=”100%”>
<tr>
<td width=”50%” valign=”top”>
<![endif]–>
<div class=”column”>
<table width=”100%”>
<tr>
<td class=”inner”>
<table class=”contents”>
<tr>
<td>
<imgsrc=”images/two-column-01.jpg” width=”280″ alt=”” />
</td>
</tr>
<tr>
<td class=”text”>
Lorem Ipsum
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!–[if (gtemso 9)|(IE)]>
</td><td width=”50%” valign=”top”>
<![endif]–>
[Insert your Content here]
<!–[if (gtemso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
Sample two column layout code (HTML)
The following CSS code provides some padding was well as make the tables behave as we want them to do. The code will also set up styles for the div columns, its contents, rendering of the image.
/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.two-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.two-column .contents {
font-size: 14px;
text-align: center;
}
.two-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
<tr>
<td class=”three-column”>
<!–[if (gtemso 9)|(IE)]>
<table width=”100%”>
<tr>
<td width=”200″ valign=”top”>
<![endif]–>
<div class=”column”>
<table width=”100%”>
<tr>
<td class=”inner contents”>
<p class=”h2″>Heading</p>
<p>Lorem Ipsum</p>
<p><a href=”#”>Read more</a></p>
</td>
</tr>
</table>
</div>
<!–[if (gtemso 9)|(IE)]>
</td><td width=”200″ valign=”top”>
<![endif]–>
[Insert your column here]
<!–[if (gtemso 9)|(IE)]>
</td><td width=”200″ valign=”top”>
<![endif]–>
[Insert your column here]
<!–[if (gtemso 9)|(IE)]>
</td>
</tr>
<tr>
<td width=”200″ valign=”top”>
<![endif]–>
[Insert your column here]
<!–[if (gtemso 9)|(IE)]>
</td><td width=”200″ valign=”top”>
<![endif]–>
[Insert your column here]
<!–[if (gtemso 9)|(IE)]>
</td><td width=”200″ valign=”top”>
<![endif]–>
[Insert your column here]
<!–[if (gtemso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
Sample three column layout code (HTML)
You need to add the CSS style as specified for the Two Column layout (Above) here also to adjust the styles of the columns and its content properties.
Once you are through developing an email code that works without media queries, it would start reacting responsive with limitation in Gmail app. But then you can enhance its appearance in native email application (especially for iPhone and other phones having native email app and supporting media queries). This enhancement can be done using media queries on top of this code making it Hybrid Code.
Takeaways:
- Adopt a mobile-first approach.
- A media query consists of 3 parts: the media type, an expression, and the style rules contained within the media query itself.
- A media query should atleast have
- max- and min-width
- max- and min-device-width
- device-pixel-ratio
- Hybrid design is a work around for the email clients which don’t support media queries.
- <!–[if (gtemso 9)|(IE)]><![endif]–> is used for conditional CSS for Outlook to force it to collapse borders on all tables and prevent unwanted gaps
Author Bio:
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing Email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage and share insights with fellow marketers. He enjoys sharing his insights on email marketing at Email Marketing Blog. Feel free to follow him on Twitter and LinkedIn.
The post Building Responsive Emails – The Challenges and Workarounds using Hybrid Coding appeared first on Line25.
Source: http://ift.tt/2bkdGAP
No comments:
Post a Comment