- Development
Mobile VS Desktop Email Client Statistics
According to a recent report generated by Litmus, as of 2015, 27% of emails are being read on an Apple iPhone, 17% on Gmail and 12% on an Apple iPad. Nearly half of all emails are being opened on smartphones and tablets.
Based on these statistics it is now crucial to design EDM's to be responsive, rather than a static 600px fixed width like in the past. Generally, a responsive email should have two breakpoints:
Desktop Version: 600px
Mobile Version: 480px (A width of 480px accounts for an iPhone 4 being used in landscape orientation.)
MOBILE MEDIA QUERIES
Responsive email development relies on media queries in the same way as web development, only in email development these media queries need to be applied individually to <table> elements, <td> elements and images.
See below as an example of a breakpoint in a mobile media query. The HTML is first with the corresponding CSS styles below.
HTML
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="col-320-mb" bgcolor="#ffffff">
<tr>
<td align="center" width="145" class="col-5-mb" bgcolor="#ffffff">
<img width="145" height="97" src="http://mudbath.com.au/edm/images/cleardot.gif" style="display:block" class="col-5-mb" />
</td>
</tr>
</table>
MEDIA QUERY (in the <head> of the HTML document)
<style>
@media screen and (max-width: 480px) {
table[class="col-320-mb"]{
width:320px !important
}
td[class="col-5-mb"]{
width:5px !important
}
img[class="col-5-mb"]{
width:5px !important
}
}
</style>
Notice that there is only one class applied to each element. This is because many email clients will not correctly recognise the second class on an element so you may need to create unique classes if the required styles aren't identical.
In the example above of a spacer row, the wrapper <table> has a desktop width of 600px which is being overridden at 480px by the class "col-320-mb", making it 320px wide for mobile.
Likewise the <td> and <img> have the class "col-5-mb" to reduce them from a desktop width of 145px down to 5px for mobile.
USING INLINE STYLES and !important:
In Email development, we only use inline styles as opposed to in web development where styles are all kept in a css stylesheet. This means that any styles that you have in your media query in the <head> of your document will need to have !important applied to them to ensure that they override the inline style.
Recommended reading:
***
Our team of highly experienced User Experience Designers and Developers can help you research, design and build your next digital project. Got an idea in the works? Get in touch.