The iPhone is extra fashionable at the moment than ever, which is why it’s essential to know learn how to correctly design and develop e-mail for iPhones. To make sure your prospects get flawless emails on their iOS units, we’ve compiled this listing of useful suggestions and methods that can assist you alongside the best way.
When you’ve designed your iPhone-friendly emails, don’t it’s additionally essential to check your design to verify it renders correctly in all iOS units. With Electronic mail on Acid, you may preview your e-mail throughout the most well-liked cellular, net and desktop e-mail purchasers – together with iOS.
Right here’s an inventory of suggestions that can assist you with iOS units:
1. You need to use media queries with iOS units
You need to use media queries in your embedded CSS:
@media solely display and (max-device-width: 480px) {
/* Right here you can embody guidelines for the Android and
iPhone native e-mail purchasers. ALWAYS USE IDs!!! The
Android does not help “class” declarations.
Right here’s extra information on that.
System dimensions are as follows:
- iPhone: 320px X 480px – portrait, 480px X 320px – panorama
- Android:350px X 480px – portrait, 480 X 350 – panorama
- (These are common dimensions, the Android OS runs on a number of completely different units)
@media solely display and (min-device-width: 768px) {
/* Right here you can embody guidelines for the iPad native
e-mail consumer.
System dimensions in pixels:
- 768 x 1024 – portrait, 1024 x 768 – panorama
Take a look at our responsive e-mail template, and what it appears to be like like with and with out media queries.
With media queries:
With out media queries:
Need to dive into extra responsive emails? Take a look at these responsive design sources right here:
2. The iPhone could resize your e-mail primarily based on the biggest component
Take a look at an instance of this drawback beneath. On this occasion, a desk construction forces all the weather to change into proportionally smaller. The picture on the high is 600px huge and has a smaller desk cell beneath it. Within the picture on the suitable, the iPhone reduces the dimensions of all the things within the e-mail by about 50% to make it match the display, thus making the textual content tiny. The picture on the left is an instance the place a media question was used to dimension the picture appropriately, permitting the textual content to take the correct width.
With media queries:
With out media queries:
There are two choices to deal with this drawback:
- Re-size and re-use the identical picture (higher for total file dimension)
<fashion sort=“textual content/css”>
@media solely display and (max-device-width:480px; ) {
physique[yahoo] .header { width:300px}
}
</fashion><physique yahoo=“repair”>
<img src=“http://www.url.com/picture.jpg” class=“header” width=“600” top=“100” />
</physique>
2. Fully exchange the picture. To see how to do that in additional element, try our responsive picture swap.
3. Fonts on the iPhone are enlarged by default
The results of the elevated font sizes are normally minor, however they will nonetheless throw off an e-mail structure. Within the instance beneath, you may see that our responsive template’s navigation gadgets take up two traces as a substitute of 1 due to the iPhone’s font dimension improve.
With textual content dimension regulate:
With out textual content dimension regulate:
To regulate the font adjustment within the iPhone universally, strive including this to your embedded CSS:
<fashion>
* {-webkit-text-size-adjust: none}
</fashion>
Or, you can even management textual content on a case-by-case foundation by including the next inline CSS:
<font fashion=”-webkit-text-size-adjust: none”>
Instance
</font>
4. Phrases generally wrap awkwardly in iOS
In case your textual content is in a container with a width set to lower than that of your textual content, it’d wrap poorly on this system.
To repair this, add word-wrap:regular to your containing component:
<td fashion=“word-wrap:regular”>textual content</td>
5. Keep away from 1px traces in desk layouts
In case you run into a difficulty with hairline borders showing in HTML e-mail designs with desk layouts, the professionals at Marketing campaign Monitor have a useful repair.
6. Stop iOS from “clipping” messages which are over 102k
Typically the iOS reader solely shows a small section of the unique e-mail. When this occurs, it renders the loaded portion with a button on the backside that reads: “Obtain remaining XX bytes.” It appears to be like one thing like this:
To repair this, ensure you have a minimal of 1,019 characters earlier than your closing <head> tag, together with areas and carriage returns.
In case you don’t have the necessity for extra types, or a mode block, strive inserting a number of traces of empty areas.
Another choice is to take away your <head> tags completely. Watch out with this answer, although, as some e-mail service suppliers would possibly place head tags inside your e-mail dynamically.
7. Cease iOS from changing your cellphone numbers to hyperlinks
By default, Safari on iOS detects any textual content string that’s formatted like a cellphone quantity and converts it to a hyperlink which permits customers to immediately name the quantity by touching it.
To take away this auto formatting, merely add the next meta-tag:
<meta title=“format-detection” content material=“phone=no”>
Have one other iOS tip?
We’d love to listen to your e-mail suggestions and methods for iOS units. Be at liberty to share within the feedback part beneath, or hit us up on Fb or Twitter!
Preview your e-mail on iPhone 5S, 6, 6+, 7, 7+, 8, 8+, SE and X!
Electronic mail on Acid provides you limitless e-mail previews on greater than 70 e-mail purchasers and apps, together with iOS units. Plus, now we have drag and throw performance in addition to the flexibility to view your e-mail with horizontal or vertical view ports. Strive our platform free for seven days and see for your self!
Editor’s Be aware: This weblog publish was up to date on August 10, 2018. It was initially printed in August 2013.
