The state of modular email design systems
State of modular email design systems 2026 How industries are adopting, which platforms lead, and is it right for you.
Get report
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