This weblog publish was up to date on July 12, 2018. It was final up to date in February 2017 and initially printed in 2013.
With the recognition of cellular electronic mail and so lots of our customers asking about finest practices for responsive emails, we’d like to assist with a free responsive electronic mail template to get you up and working as quick as potential.
This template gives three completely different “layouts” that set off based mostly on the width of the display screen. By default, it helps 1-3 columns and as you set off every media question conditional assertion, it converts to a one-column structure for straightforward studying on cellular units.
When you’ve got an E mail on Acid subscription, you have already got entry to this template in our Sources part! Merely log in and navigate to the useful resource middle within the left navigation bar.
In case you don’t have a subscription, you could find the template right here. Merely enter your electronic mail and the obtain is free.
When you obtain the template and end customizing it along with your content material, don’t neglect to check the e-mail. Though we’ve examined this design, the smallest code change may break the e-mail. Fortunately, our platform exhibits you what your electronic mail appears like in additional than 70 purchasers and units. Join our free trial and provides it a take a look at right now!
Template Particulars
When growing this template, we researched the most typical gadget dimensions and ran a media question take a look at to establish the gadget widths to focus on.
The breakpoints we’ve chosen for this template are:
- A width lower than 480pxfor the iPhone and smaller smartphones.
- A width between 481px and 640pxfor medium-sized Android units
- A default dimension of 580pxfor tablets, internet, and desktop electronic mail purchasers
What’s attention-grabbing about these dimensions is that the breakpoint for medium-sized handheld units is larger than the true property your electronic mail will get in most internet and desktop electronic mail purchasers. For that cause, the default width for our template is about to 580px. This dimension is lower than the media question dimensions that we used for medium-sized cellular units.
You possibly can mix-and-match every part of this structure. Plus, we tried to make the template generic, as your electronic mail wants will seemingly change over time.
This template has been examined throughout most main electronic mail purchasers. However don’t take our phrase for it: Take a look at it your self right now with our free, seven-day trial.
How Did We Construct the Responsive Template?
1. Media Queries
Right here’s all the type block:
<type sort="textual content/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
physique {width: 100%; background-color: #ffffff; margin:0; padding:0;}
desk {border-collapse: collapse;}
@media solely display screen and (max-width: 640px) {
physique[yahoo] .deviceWidth {width:440px!vital; padding:0 4px;}
physique[yahoo] .middle {text-align: middle!vital;}
}
@media solely display screen and (max-width: 479px) {
physique[yahoo] .deviceWidth {width:280px!vital; padding:0 4px;}
physique[yahoo] .middle {text-align: middle!vital;}
}
</type>We then used the ‘deviceWidth’ class on all tables and pictures all through. This resets the width for every ingredient based mostly on the width of the cellular gadget. You could possibly add extra media queries if you’d like – be happy take a look at this weblog publish for extra breakpoint concepts.
2. Floating Parts
The subsequent problem was creating floating components that naturally stack when there’s not sufficient room for them to drift. Floating components for electronic mail is somewhat difficult as a result of a number of electronic mail purchasers don’t help the ‘float’ property. As an alternative, we used the ‘align’ attribute inside desk components.
For instance:
<desk align=”left”>
Easy sufficient, proper? Sure and no. Utilizing ‘left’ or ‘proper’ align tables in Outlook 2007, 2010, and 2013, ends in additional desk padding. So, we suggest testing this Outlook padding workaround for getting aligned tables to match up completely. Within the case of this template, we used percentage-based widths for every floating desk and in some situations, we needed to depend on the ‘<p type=”mso-table-lspace:0;mso-table-rspace:0; margin:0″>’ repair.
Customise Away!
Be happy to customise this template to suit your wants. You possibly can hold the e-mail quick and candy to your cellular readers by hiding some components inside your structure utilizing media queries. Each the Android and the iOS help the show:none property.
Hopefully, this can prevent a while and stress when creating your subsequent responsive electronic mail!
Don’t Neglect to Take a look at!
We’ve examined this template completely and we belief it, however whenever you replace it along with your content material, you’ll want to check it once more. The smallest code change can have huge penalties on the earth of electronic mail. That’s why E mail on Acid gives limitless testing on greater than 70 electronic mail purchasers and units. Try our free, seven-day trial and begin testing your new template right now.
Word: This weblog publish is meant for instructional functions. The supplies used, together with however not restricted to, paintings, analysis, coding methods, and the general structure are to be thought of ‘spinoff’ and on no account will we intend to infringe on any unknown copyrights. We give our utmost respect to the tens of millions of designers and builders who repeatedly encourage us to be taught and create.
In case you’d wish to acquire rights to make use of any of the fonts that have been included within the paintings of our template, they’re accessible for buy on-line: Hand Gothic, Thirsty Tough, Thirsty Script, Veneer.
