Categories:

How to woo Apple subscribers with email campaigns?

According to Litmus analysis on Email Client Market Share, 50% of emails are viewed on Apple devices. So, as a marketer, what measures have you taken while designing and coding your emails in order to make them render well on Apple devices?

Monks with their sacred study, bring to you some heavenly designing and coding tips to flatter your Apple subscribers.

IPad

• Images will be displayed by default. This means graphically-rich email designs will look fantastic on the iPad’s bright screen.
• iPad has built-in HTML5 support (IOS7 & below), thus videos can be played right inside your email
• Extend hover to support tap-and-hold interactions and mouse hover
• Consider making the design flexible to cover the full range of tablet screen sizes instead of fixing page widths in stone. So, try using full width background colors
• Remove the flash elements from the design as iPad has the major share in the tablet market
• Elements using the declaration (real or simulated) “position:fixed” slows down the page scrolling on tablets as compared to desktop, avoid using them

IPhone 5 & 5s

• IPhone 5 consists 176 more pixels than its predecessors, which allows the marketers to add more content “above the fold”. A compelling copy “above the fold” can do wonders
• iPhone 5 screen has a device pixel ratio of 2, which bluntly means that every 2 physical pixels on the display equals 1 device-independent pixel Thus, to target iPhone 5’s specifically, the declaration would look like this:
@media only screen and (min-device-width: 320px) and (max-device-width: 599px) {/* iPhone 5 CSS styles */}
• Table structure forces all the elements to render traditionally or naturally, allowing elements on the right to push down to left. Use double coding structure for mobile and desktop for different elements to render well on mobile phones
• If your text is in a container with a width set to less than that of your text, it might wrap poorly on this device. To fix this, add “word-wrap: normal” to your containing element
• Messages that are over 102k are clipped. Make sure that you have a minimum of 1,019 characters before you are closing head tag including spaces and carriage returns
• iPhone 5 resizes the text in an email that’s smaller than 13px. Using CSS property “-webkit-text-size-adjust:none” disables this behavior

IPhone 6 & 6 plus

• You have little over 13 characters to be viewable in the pre-header text before the email is opened. So, use your pre-header text as second subject line and craft it creatively.
• Using background colors on individual table row and cells will create 1px lines in your email. This can be fixed by nesting the table in a new table and giving background colors to that. Or provide background image on that new table
• Video in email is not supported in iphone 6 and 6plus, Use a still image with a play button and linking out to the hosted video is a great option
• IPhone 6 and 6 Plus displays white borders on the left and right of your email. This space is fairly noticeable on the larger 6 Plus and makes the screen look a bit narrow. So add margin padding 0 in body inline for your email to render well
• Iphone6 plus has a bigger screen size, which means more content is viewable above the fold. Consider including compelling content above the fold
• Up until now, many email designers have been using 320px as their main breakpoint for mobile. With the new screen sizes of iphone 6 and iphone 6 plus, there is no longer one media query to rule them all, your new media queries need to start at 414 pixels. Alternatively, you can keep email fluid based, allowing it to cover the edge of phones till your desktop layout (600px)

IPhone 6s

The major change in iPhone 6s from iPhone 6 and iPhone 6 plus is the addition of 3D touch. Let’s dive deep into it and understand its affects.

• ‘Peek ’&’Pop’ feature backed with 3D touch in iPhone 6s has given a special provision to email readers to take a glance of the email before opening it. So, consider creating a compelling content at the top in order to influence the readers to open an email
• Subject lines will play a larger role, they will have obvious relevance to the messaging shown in what a user can preview
• Animated gif images and CSS animations also play within the Peek window. Use animations based on your target audience as an attention grabbing teaser and entice the recipient to completely open an email
• In the preview window, less vertical content is being displayed. So, fold is higher up in responsive emails
• A responsive email design when previewed in iphone6s displays the content with 9:10 aspect ratio, making the user experience fantastic. On the other hand, email with fixed ratio might render more vertical content but will force the users to pinch and zoom

Apple Mail/MacBook

• Apple Mail has excellent support for HTML and CSS, using advanced techniques like HTML5 video backgrounds in the campaigns can reap benefits
• Avoid using Calibri font as they are not supported in Apple mail

Common best practices

• Apple devices are backed with retina images having 2x pixel density. A natively 300px wide image that is being displayed via CSS at 300px on the iPhone will appear a bit more. Consider displaying a natively 600px wide image at 300px width via CSS for images to look crisp and clear
• iOS devices resize all fonts smaller than 12 pixels up to 12 pixels, which can break your layout. A good rule of thumb is to keep your headlines around 22 pixels and body text around 12-14 pixels
• If you’re planning to add any animation effect, look at using CSS transitions rather than Javascript animation
• Consider using beautiful GIF animation
• If you have a vast number of apple subscribers, consider using Interactive email advancements/CSS3 animation effect, as these effects are rendered well in native app of apple devices
• Interactive email advancements/CSS3 animation effect can be viewed properly in native app of apple devices. So, consider using these if you have high apple based subscribers.
• Since all Apple devices have elegant and larger preview pane of inbox, using smart pre-header text can get you maximum open rates

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, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.