Order Now
34 Email Client Hacks: Email Development Tricks and Tips Infographic

GMAIL FOR mobile

Gmail Email Hacks

Problem

  • Responsive emails not rendered on third party app

  • Gmail App bumps up the font size as much as 50%

  • Fluid email doesn’t look great in the Gmail app

  • White line appears between two sliced images

  • Gmail for Android doesn’t support CSS

  • For responsive emails with media queries,
    the view appears distorted

  • Gmail app on iPhone turns Phone numbers and date automatically to blue

Mobile Optimized Email in Gmail

Solution

  • Use hybrid coding to deliver near to
    responsive experience for third party app users

  • Use white-space: nowrap
    Use a spacer image
    Declare! Important
    Use div with nbsp to allow override the increase of font size

  • Use “display: inline-block” in combination with “text-align: center” to get your elements to behave as if they are floating but centered

  • Use “display: block” in image tag to avoid it

  • Use a fluid layout to adjust to any viewport size
    Stick to one-column layout

  • Try forcing Gmail to render the desktop view using spacer by giving width equal to the width of your email

  • Use “text-decoration:”
    Use zero-width non-joiner
    Use span with “text-decoration: none” surrounding
    Provide class in media queries with important defined to override the inline style and avoid blue line

GMAIL FOR desktop

Gmail Desktop Email Tips

Problem

  • Gmail doesn’t support <style> or <link> in the <head>

  • Gmail falls short in support for CSS media queries

  • Float, margin, paragraph, and padding are not supported
    in Gmail

  • Gmail clips the message

Gmail Desktop Email Tips

Solution

  • Overwrite the default link color by adding a color style to
    each and every <a> within email code

  • Use Single column layout (no pinching or zooming required)
    Use larger images and text
    Use more concise menus
    Use mobile specific content

  • Stick to the basics, let there be table based layout with
    provision of TD for margin and padding

  • Try reducing your code length,
    and try keeping your HTML weight below 102kb

Outlook

Outlook Email Tips

Problem

  • Both Outlook and Hotmail strip out paragraph and
    margin spacing from code. This means neatly-spaced
    text will bunch together

  • CSS written in the head section of an
    HTML document will get removed from
    Outlook/Gmail/Yahoo/AOL/Outlook.com

  • Applying padding or width in CSS to a div or
    p tag will not work with Outlook

  • Margins are not supported in Outlook

  • Outlook 2007-2013 do not support the
    background-image property

  • Outlook doesn’t support max-width and min-width

  • 100% wide table with a max-width
    may not render well in Outlook

  • GIF emails do not work with Outlook

  • Google Fonts are not supported

  • Buttons are quite difficult to support in Outlook

  • Internal links provided in email does not work

Solution

  • Code emails in tables and use td/tr to add the extra space

  • Inline your CSS with HTML

  • Try using tables

  • Consider Using td to provide margin

  • Try using fallback color for background images for the colors to render well. However, the Ideal solution is to use VML code to force Outlook support background images

  • Fluid layouts with a fixed (instead of max) width within a media query can be useful. Alternatively, define tables with fixed width & provide fluid tables giving 100% width to tables in media queries

  • Wrap the whole table in some conditional code to appease Outlook

  • Try creating a GIF such that the first frame runs for
    mili-seconds (not visible with naked eyes) but conveys
    the full message with supporting slides having GIF frames for
    other email clients

  • Use appropriate fallback with conditional Outlook comments, else it would use Times by default

  • Link provides a way to create buttons that are visible across all email clients and are responsive too

  • Apply internal links to text or images instead of tables or tr

Outlook.com

Outlook Email Compatibility Problem

Problem

  • Outlook.com adds a few pixels of additional padding below images,
    equivalent to the descender height of surrounding text

  • RGB borders aren't supported in Outlook.com

Outlook Email Solution

Solution

  • A workaround is to set the display property as “img {display:block;}”. This removes the padding in Outlook.com and still gives you the predicable result in other email clients

  • Use HTML background color trying HEX code

Apple iPhone

iphone email issue

Problem

  • HTML5 video is not supported any more with
    launch of iOS 8, iOS 9

  • iPhone automatically resizes tiny text

  • Emails might not render well with the updates in
    new iPhone models

  • In iOS 9, when inline-block level elements are next to
    each other in the code, but have a space between the end of
    one element and the start of another, the wrapping issue occurs

  • The general sibling selector ~ is not supported on
    iOS 9 when used with the: hover or:
    checked pseudo class selectors.

  • iOS 9 mail app now adds padding to both the left and
    right side of email campaigns. For emails using full-width
    background colors, you will now see white spaces on
    either side of the campaign

Apple Iphone Email Solutions

Solution

  • Try using image or video pointing to the actual video link

  • A minimum font size of 14 pixels for body text and
    22 pixels for headers is a good rule of thumb

  • Update media queries relying on a 320px breakpoint to 414px for iPhone 6 Plus. Alternatively, you can keep it fluid instead of fixing it to breakpoints at the exact device width. This would render the emails well across all devices

  • Removing that space appears to fix the issue

  • Designers can instead rely on the adjacent sibling selector +. Although, it is not as flexible as the more less-specific general sibling selector, it will allow designers to achieve the same results

  • Add margin padding “0” in body inline

Apple mail

Apple Email Compatibility Problem

Problem

  • Calibri fonts are not supported when you want compatibility across all email clients along with Apple Mail

Apple Email Font Support

Solution

  • Avoid using Calibri fonts

yahoo mail

Yahoo Email Problems

Problem

  • Yahoo no longer supports the center align HTML attribute

  • Yahoo cannot support float tags

Yahoo Email Solutions

Solution

  • Use align=“center” to center tables in their campaigns. Try using align center in td having table of fixed width

  • Try align="top" to the image in question

Got an Email

Project?

Click here