Make sure your emails look great on the iPhone with these 6 tips. Learn how to remove the blue underlined links, how to set a pre-header and more!
1. Remove the blue link for dates
IOS automatically creates a blue calendar link for any date in your email. To change the colour of the link follow these simple steps:
-
Add a span with a class around the date
1<span class="apple-link">October 15th</span> -
Add this to your CSS section and set the colour to the font colour you want.
123<style type="text/css">.apple-link a { color:#000000 !important; text-decoration:none !important; }</style>
2. Stop IOS from resizing text
By defualt, some font sizes may be increased to 14px on IOS. This can cause some of your text to wrap incorrectly or your layout to break. Disable IPS from resizing the text in your email by inserting this CSS in the HEAD section of your email.
|
1 2 3 |
<style> * {-webkit-text-size-adjust: none} </style> |
3. Stop phone numbers from being converted into a link
IOS will see any phone numbers and automatically convert them to a link. To disable this, add the following into your meta tag.
|
1 |
<meta name=“format-detection” content=“telephone=no”> |
4. The standard iPhone media queries
iPhone 2G, 3G and 3GS Media Query
|
1 2 3 4 5 |
<style type="text/css"> @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { // CSS Here } </style> |
iPhone 4/4S/5/iPhone 6 (zoom view) Media Query
|
1 2 3 4 5 |
<style type="text/css"> @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { // CSS Here } </style> |
iPhone 6 Plus (standard view) Media Query
|
1 2 3 4 5 |
<style type="text/css"> @media screen and (max-device-width: 414px) and (max-device-height: 776px) { // CSS Here } </style> |
5. Don’t use background colours or images on individual table rows and cells
Using background colours or images on individual table row and cells will create 1px lines in your email. This can be fixed by removing the background colour or image from the individual table rows and cells. Instead, nest the table in a new table.
6. Set a pre-header
|
1 2 |
<p><span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;"> Your pre-header text here </span></p> |
Questions?
Email me, or send me a tweet @jennamolby, or leave a comment
Leave a Comment