Tips Archive - Email on Acid

iPad and iPhone

Ryan Phelan — Wed, 11 Apr 2018 15:08:31 +0000

Tips for coding email for iPad and iPhone devices, including iPad, iPhone, iPhone 5S, iPhone 6, iPhone 6+, iPhone 7 and iPhone 7+.

1. Why are my phone numbers converted to links?

By default, Safari on the iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.

To remove this type of auto formatting simply add the following meta-tag:

2. How do I prevent my fonts from being enlarged on this device?

To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:

                            

                                * {-webkit-text-size-adjust: none}

Or you can also control text on a case by case basis by adding the following inline CSS:

3. Why are the letters of my words breaking down to the next line?

If your text is in a container with a width set to less than that of your text, it might wrap on this device. To fix this add word-wrap:normal to your containing element:

                            

                                text

4. How can I force the iPhone not to compress the view of my email?

The iPhone shrinks and scales each of the elements within your email until the entire width of your design fits within its “viewport”. Most of the time this does not cause any visual problems, however sometimes HTML elements are not scaled at the same ratio.

There is a very simple fix – add an iOS specific meta-tag.

WARNING: This tag will cause your email to display as a blank white page in BlackBerry. More on that here.

With this tag you can set the width of your email, the initial scale and whether you want users to be able to zoom in on the content. In the example above the total width of your design will be no less than 600 pixels but the iPhone will still scale it to fit within its viewport. The initial scale will be 2.3 and users cannot zoom.

If you notice any scaling problems on the iPhone set the width to the widest element in your email and you should be good to go.

For more information on the uses of this meta-tag visit the following link

5. Why am I seeing 1px line between my TDs?

If you run into an issue with hairline borders appearing in HTML email designs with table layouts, make sure to wrap that table in another table with the desired background color. This problem usually occurs when a parent table has a different background color from a child table.

6. Why is my text wrapping funny?

The iPhone tries to rescale your email according to the widest element in your layout. So let’s assume you are using stacked tables, one on top of the other. It will take the widest table and scale all the others by the same ratio in order to fit it inside the viewport. To correct this, try wrapping your entire email in a table of its own. This will ensure that your entire email is scaled at the same aspect ratio.

Learn more about this from our blog post.

7. Why are my phone numbers converted to links?

By default, Safari on the iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.

To remove this type of auto formatting simply add the following meta-tag:

8. Can I write CSS that can only render on mobile devices?

Yes. You can use media queries in your embedded CSS:

                            

                                @media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and 
iPhone native email clients. ALWAYS USE IDs!!!  The 
Android does not support "class" declarations.  
Here's more info on that: https://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/ 
                           
Device viewport dimensions are as follows:
                           
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}        
                        
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native 
email client. 
                           
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/
}

Media queries will not work for mobile versions of Gmail.

9. I am seeing a 1px line through my email on the iPhone.

10. Why do I see a button that says: Download remaining XX bytes?

Sometimes the iOS reader only displays a small segment of the original email. When this happens, it renders the loaded portion with a button at the bottom which reads: “Download remaining XX bytes.”

To fix this in iOS 6 or lower, make sure that you have a minimum of 1,019 characters before your closing head tag (

) including spaces and carriage returns.

If you don’t have any need for more styles or a style block, try inserting several lines of empty spaces.

This fix doesn’t work for iOS7 or newer.

Here is a complete article with samples: Two ways to ensure that your entire email is rendered by default in the iPhone & iPad

11. Sign up for more email tips!

The post iPad and iPhone appeared first on Email on Acid.

Yahoo!

Ryan Phelan — Wed, 04 Apr 2018 18:22:56 +0000

Tips for coding emails for Yahoo! Mail.

1. Can I get rid of the margins around the body of my email?

The quick answer to this question is no.

Many web based email clients use embedded CSS which may impact your email layout. Yahoo inserts your HTML within a few divs. For example:

Will get converted to this:

To check out the css for those styles, visit this blog post.

There is no way to overwrite the styles for the divs that it inserts but you can overwrite the type selector classes within them.

To do so, use embedded CSS:

Or, do everything inline:

2. Why aren’t my body attributes working?

Yahoo strips your entire body tag along with each of its attributes.

For example, this:

...

Will get converted to this:

...

To get around this, you can add styles in your embedded CSS. Yahoo will convert your embedded body styles to inline and place them inside the div it creates around your email content.

For example, this:

...

Will get converted to this:

...

Special Note: Gmail does not support embedded css. This client also converts your body to a div, however, it still retains its attributes as long as they are supported within a div. So it’s a good habit to place your styles in both locations.

3. Why is there a small space under each of my images?

This space is actually caused by the Yahoo! DOCTYPE. Here are a few workarounds (these work in Gmail and Outlook.com as well):

1.) Add style display:block to the image element

2.) Add align=absbottom in the image element

3.) Add align=texttop to the image element

4.) Add line-height:10px or lower to the containing TD

5.) Add font-size:6px or lower to the containing TD

For more workarounds check out this blog article: 12 Fixes for Image Spacing

4. Why aren’t my embedded styles working in IE7 & 8?

Yahoo! Mail in IE7 & IE8 does not support embedded styles in the head tags. Try moving your style block to just before the closing body tag.

For example, change this:

                            

                                
    
        
    
    
        This is the first paragraph
        This is the second paragraph

To this:

                            

                                
    
        ...
    
    
        This is the first paragraph
        This is the second paragraph

5. Why aren’t my fonts working?

Yahoo! Mail converts single quotes inside tags to double quotes. If you are using quotes in your inline font CSS declaration, it might not render properly.

For example:
Test
Is converted to:
Test
(The above example renders a serif font in all browsers as opposed to what was intended)

Note: Single quotes within your content are not affected.

6. Why is there repetitive content at the bottom of my email?

If you use a simple street address in your email, particularly with a city and state, there’s a chance that Yahoo might duplicate some of your content at the bottom of your email.

This is caused by pesky remnants of the Yahoo! Shortcuts plugin.

If this happens to you, the easiest fix is to spoof Yahoo into thinking that your city and state are just another text string. To do this, you can add an HTML entity like “” in your address that Yahoo does not recognize it:

Austin, TX 78713-7458 Phone: 512-555-1212

Here’s more information: Stop Yahoo! Mail from Displaying your Email Twice

In the above example, we also inserted the same special character in the phone number to avoid issues in Gmail.

7. Why are my links getting reformatted? (Yahoo Shortcuts)

Yes, it’s true, Yahoo Shortcuts still exist! Sometimes, if you are using link names to popular items like “Washer & Dryer” Yahoo! inserts a span inside your anchor with a class of “yshortcuts”. Here’s your quick fix.

Insert the following into your embedded CSS:

This is just an example, you will need to update the styling to match your design.

8. Why aren’t my paragraphs properly spaced?

Yahoo doesn’t give paragraphs any padding by default. You’ll need to add an inline style or embedded style if you want to have space after each paragraph.

Inline example:

Embedded example:

                            

                                p {padding-bottom:1em;}

9. Why does my email seem to be overlapping the right column?

On wide emails, you may occasionally see an email that looks like it is hanging off the right side of the frame. In our web client previews (Yahoo! Mail, Outlook.com, AOL Mail, Gmail, etc), we intentionally modify the client’s styles to allow your entire email to be visible even if it is wider than the viewing pane. We do this because we can’t account for all of the possible email widths that may come through our system. No, this is not exactly what it would look like in the live client, but it enables you to see the whole email, as well as how much of the email would require horizontal scrolling to view. The part of your email that overlaps the right column would not normally be visible in a browser window of that width.

10. Why is my element left aligned instead of center?

Yahoo! Mail ignores align=”center” in most browsers. We recommend that you instead use:

                            

                                style="margin:0 auto;"

This should be placed on a table (or div) inside of a width=”100%” wrapper.

11. Does Yahoo support media queries?

Yes, it does! This change was made in 2015, and Yahoo! now has full support for media queries. Attribute selectors are no longer needed to “fool” Yahoo! mail.

12. Sign up for more email tips!

The post Yahoo! appeared first on Email on Acid.

Outlook.com

Ryan Phelan — Wed, 04 Apr 2018 18:16:31 +0000

Coding tips for the numerous problems in Outlook.com webmail.

1. Why is my line height all screwed up?

Outlook.com includes the following in their linked style sheet:

                            

                                * {line-height: 131%}

To overwrite it, use the following in your embedded CSS:

                            

                                .ExternalClass * {line-height: 100%}

“.ExternalClass” is required and it is specific for Outlook.com only. They wrap your layout inside a div with a class= “ExternalClass” so there is no need to include a reference to it other than in your embedded CSS.

Here is more on that topic: https://www.emailonacid.com/forum/viewthread/43/

2. Why is there a small space under each one of my images?

This space is actually caused by this client’s DOCTYPE. Here are a few workarounds (these work in Gmail and Outlook.com as well):

1.) Add style display:block to the image element

2.) Add align=absbottom in the image element

3.) Add align=texttop to the image element

4.) Add line-height:10px or lower to the containing TD

5.) Add font-size:6px or lower to the containing TD

For more workarounds check out this blog article: 12 Fixes for Image Spacing

3. What is up with Outlook.com margins?

Outlook.com does not support “margin” in CSS, but it DOES support “Margin” instead. That’s right, you need to use a capital M to make margin function in Outlook.com.

Also, Outlook.com has the following code in their embedded CSS:

                            

                                p {Margin:0 0 1.35em;}

You will need to overwrite this in your embedded CSS in order to start with a clean slate for paragraphs.

For example:

                            

                                p {Margin-bottom:0}

4. Why are my headers green?

Outlook.com has added this to their default CSS:

                            

                                h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

To overwrite it, use the same code in your embedded CSS and change the color:

                            

                                h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}

5. Why is embedded CSS recommended for Outlook.com?

                            

                                /**This is to overwrite Outlook.com's Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Outlook.com************/
.ExternalClass {width: 100%;}

6. Why isn’t my email centered?

Outlook.com places your email inside a div with a class named “ExternalClass”. Here are the properties they have set on that class:

                            

                                .ExternalClass{display:inline-block; line-height: 131%};

This has no effect on your email when using IE but in every other browser the email will not be centered.

To overwrite this simply include this in your embedded CSS:

                            

                                .ExternalClass {width: 100%;}

7. Why aren’t my borders working?

Outlook.com does not support border color in RGB format, for example rgb(167, 194, 117). It seems that the entire “border” declaration, along with other properties, are ignored if you use this method for border color. The same applies for border-bottom, right, left, top.

8. Why aren’t my image maps working?

Unfortunately Outlook.com has discontinued support for image maps.

If you want individual sections of your image to be clickable, you are going to have to slice it into multiple images and use a table to align the pieces. Don’t forget about our image spacing workarounds to ensure they line up evenly in all clients.

9. Why is my email getting cut off on the right?

To avoid this, it’s best to keep your email under 630px wide.

If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and you’ll see a yellow box will appear saying, “This message is too wide to fit your screen. Show full message…”

10. Why is my email blank?

If you include any HTML code in your style block, even inside comment tags, Outlook.com will display a blank white email. This is because the display breaks in the style block, before any of the HTML in the body of your email is read. To avoid this, do not include HTML in your style block.

11. Why does my email seem to be overlapping the right column?

12. Why is my email getting cut off at the bottom?

This is a known error in our system and we’re working on fixing it right now. For some reason the system sometimes doesn’t measure the height of the email properly before taking the screen capture.

13. Why isn’t the image full width?

Outlook.com seems to ignore 100% width in some cases. To fix this, add “min-width:100%;” to the styles on that element.

14. Sign up for more email tips!

The post Outlook.com appeared first on Email on Acid.

Office 365

Ryan Phelan — Wed, 04 Apr 2018 18:10:41 +0000

Coding tips and workarounds for Office 365 webmail.

1. Why does my link address appear in brackets before the text of the link?

Outlook 365 will do this if you don’t properly format your links. Be sure to include “https://” before the address and this problem should go away.

2. Why isn’t my link styling working properly?

One cause we have found for this issue is lack of a URL. If you don’t include a url, for instance href=”#”, Outlook 365 will ignore the link and any styling on it. You should insert a dummy URL for testing purposes, like this: href=”https://www.example.com”.

3. Sign up for more email tips

The post Office 365 appeared first on Email on Acid.

GMX and Libero

Ryan Phelan — Wed, 04 Apr 2018 18:08:36 +0000

Tips for coding emails for Libero and GMX webmail.

1. Why does my email seem to be overlapping the right column?

2. Sign up for more email tips!

The post GMX and Libero appeared first on Email on Acid.

Gmail and Google Apps

Ryan Phelan — Wed, 04 Apr 2018 18:07:19 +0000

Coding tips and workarounds for the Gmail and Google Apps webmail.

1. How do I get around the fact that Gmail doesn’t support embedded CSS?

The easiest way to get around this issue is to convert your embedded CSS to inline CSS using our “Inline CSS” conversion tool on the summary screen of each test result.

2. Why is my line spacing all messed up?

This is because of the Gmail DOCTYPE, and usually happens at smaller font sizes. Try putting your font inside a paragraph tag instead of using a font or span. Another way to get around this is to define a line-height and/or font-size in the containing .

3. Why is there a small space under each of my images?

This space is actually caused by this client’s DOCTYPE. Here are a few workarounds (these work in Gmail and Outlook.com as well):

1.) Add style display:block to the image element

2.) Add align=absbottom in the image element

3.) Add align=texttop to the image element

4.) Add line-height:10px or lower to the containing TD

5.) Add font-size:6px or lower to the containing TD

For more workarounds check out this blog article: 12 Fixes for Image Spacing

4. Why aren’t my backgrounds working?

If your background style includes any reference to a URL, your entire declaration will be ignored in Gmail.

For example:

                            

                                background: #000;  /*This will be accepted */ 
background: #000 url(https://www.example.com/test.jpg); /* This entire line will be ignored */

If you want to back up your background image with a color, be sure to do it within a different inline CSS declaration.

For example:

Another option is to use the “background” attribute within a .

5. Why aren’t negative values on my margins and padding working?

Gmail ignores the entire margin or padding declaration if there is a negative value.

                            

                                margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px

Gmail does support negative values in the generic padding property. This is not recommended, however, because Yahoo does not support negative values at all.

6. How can I stop Gmail from converting my email addresses and URLs to links?

Yes, if you have a URL or email address listed without a link, Gmail will add it for you. For example name@test.com within this paragraph will get converted to:

                            

                                 name@test.com

Here are two possible fixes:

1.) Insert an HTML entity that Gmail does not recognize, like:

So change name@test.com to:
name@test.com

Change www.mydomain.com to:
www.mydomain.com

2.) Insert an anchor around the URL or email address and format it like the rest of your text. For example:
test@test.com

7. Why isn’t my vertical spacing showing up?

Gmail converts this:

To this:

The min-height property does not have the same effect as the “height” property in s. By adding a space or a
inside the empty cell, it resolves the problem.

8. Does Gmail support the “display” property?

Gmail does not support the inline display property if the value is set to “none.”

style="display:none"

Each of the other values for the display property are supported.

It’s important to note that Gmail does support the inline display property if the value is set to “none !important;” as below.

style="display:none !important;"

9. Why is my email getting clipped in Gmail?

If your email exceeds 102K, Gmail will display the first 102K along with a message that reads:

[Message clipped] View entire message

When the user clicks to view the entire message, your email will be displayed in a new window.

If you are close to 102K, you might save a few bytes by removing any unnecessary spaces, carriage returns or comments.

We recommend that you avoid embed images or documents when sending HTML emails.

10. Why aren’t my images showing up?

Gmail does not support spaces within image paths. Always use underscores or dashes.

If that doesn’t fix it, check to make sure you are using absolute image references.

If that still doesn’t fix it, Gmail might be having a problem with your Hypertext Transfer Protocol Secure references (https://). If so, try switching to HTTP.

11. Why doesn’t my positioning work?

Gmail strips “position:relative” and “position:absolute” from inline CSS, as well as “left:”, “top:” and other positioning code. This is because positioning could move elements of the email outside of the viewing window.

12. Why does my email seem to be overlapping the right column?

13. Why is my background getting cut off?

Gmail converts your body to a DIV. This is extremely important because if there is no width set in your body, Android sets the width of your converted body tag to that of your viewport (horizontal or vertical). So if you have a background color or image in the body of your email, you have a few options:

1.) Wrap the contents of your email in a table or div with the width set to the widest element in your layout.

2.) Add an inline CSS width style to your body:

The problem with this solution is that your email will now be left aligned in the web based Gmail client and the background color won’t extend to the left/right.

IMPORTANT NOTE: *You must use ‘px’, ’em’, or ‘pt’ in either of these options – percentages will not work.

14. Why are my links blue and underlined?

#1155CC is the default color for Gmail links. You can overwrite this color using inline CSS. However, Gmail ignores #000, #000000, and “black” values. For example:

This will render as red:

                            

                                test

This will be rendered as the default (#1155CC) color:

                            

                                test

To fix this use a different hex value that is close to black:

                            

                                test

Underline
Links in Gmail are underlined by default. You can overwrite this style using inline CSS.

For example:
This will render with an underline:

                            

                                test

This will render without an underline:

                            

                                test

15. Sign up for more email tips!

The post Gmail and Google Apps appeared first on Email on Acid.

Comcast

Ryan Phelan — Wed, 04 Apr 2018 18:00:23 +0000

Tips for coding emails for Comcast webmail.

1. What happened to my doctype?

Comcast strips your doctype. There is no known workaround for this.

2. Why does my email seem to be overlapping the right column?

3. Sign up for more email tips!

The post Comcast appeared first on Email on Acid.

AOL

Ryan Phelan — Wed, 04 Apr 2018 17:55:33 +0000

Coding tips and workarounds for AOL’s webmail client.

1. Why aren’t my fonts displaying correctly?

AOL uses the following default CSS:

                            

                                body {font-family:Arial,sans-serif;font-size:10pt;}
th {font-size:13pt;}
td {color: black;}

You just need to overwrite this in your embedded CSS.

To achieve the same effect in Gmail, you can set the font in your body tag (you need to use inline CSS for the TH and TD, sorry!). Here is an example:

2. Why isn’t my embedded CSS working?

If you are using any relative URL paths in your embedded CSS, AOL will strip out the entire style block. You must use absolute references.

Other browser extensions like “-moz-binding” have also been known to cause this issue.

3. What happened to my doctype?

AOL strips the doctype from your email. There is no known workaround for this.

4. Why does my email seem to be overlapping the right column?

The post AOL appeared first on Email on Acid.

iOS

Ryan Phelan — Wed, 04 Apr 2018 17:50:11 +0000

Coding tips for the numerous iOS email clients, including iOS, iOS X, iOS 5S, iOS 7, iOs 7+, iOS 8, and iOS 8+.

1. Why are my phone numbers being converted to links?

By default, Safari on the iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.

To remove this type of auto formatting simply add the following meta-tag:

2. How do I prevent the fonts from being enlarged on this device?

To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:

Or you can also control text on a case by case basis by adding the following inline CSS:

3. Why are the letter of my words breaking down to the next line?

If your text is in a container with a width set to less than that of your text, it might wrap on this device. To fix this add word-wrap:normal to your containing element:

                            

                                text

4. How can I force the iPhone to to compress the view of my email?

There is a very simple fix – add an iOS specific meta-tag.

WARNING: This tag will cause your email to display as a blank white page in BlackBerry. More on that here.

If you notice any scaling problems on the iPhone set the width to the widest element in your email and you should be good to go.

For more information on the uses of this meta-tag visit the following link

5. Why am I seeing a 1px line between my TDs?

6. Why is my text wrapping funny?

Learn more about this from our blog post.

The post iOS appeared first on Email on Acid.

Gmail App

Ryan Phelan — Wed, 04 Apr 2018 17:43:51 +0000

Tips for coding email for Gmail App 6 and 6+.

1. Does Gmail support the “display” property?

Gmail does not support the inline display property if the value is set to “none.”

style="display:none"

Each of the other values for the display property are supported.

It’s important to note that Gmail does support the inline display property if the value is set to “none !important;” as below.

style="display:none !important;"

2. How do I get around the fact that Gmail doesn’t support embedded CSS?

One way to get around this issue is to convert your embedded CSS into inline using our CSS conversion tool in the “Developer Tools” dropdown in each test result.

There is another way of getting around the issue for things like font, font color and font size: Gmail converts your Body tag to a DIV. That can actually work to your advantage because you can use any inline CSS properties within your BODY that would otherwise be supported by a DIV. It is important to know, however, that some clients do not support the BODY tag so you should also include the same declarations within your embedded CSS. Also, keep in mind, you can’t rely on BODY attributes like “bgcolor” because it is not supported within a DIV.

3. My vertical spacing is not showing up.

Gmail converts this:

To this:

The min-height property does not have the same effect as the “height” property in TDs. This seems to have a universal effect in all browsers. By adding a space or a
inside the empty cell, it resolves the problem.

4. The negative value on my margins and padding are not working.

Gmail ignores the entire margin or padding declaration if there is a negative value.

                            

                                margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px

Gmail does support negative values in the generic padding property – this is not recommended however because Yahoo New and Classic do not support negative values at all.

5. Why aren’t my backgrounds working?

If you include any reference to a URL, your entire declaration will be ignored.

For example:

                            

                                background: #000;  /*This will be accepted */ 
background: #000 url(https://www.test.com/test.jpg); /* This entire line will be ignored */

With that said, if you ever want to back up your background image with a color, be sure to do it within a different inline CSS declaration.

For example:

Another option is to use the “background” attribute within your TDs.

6. Why doesn’t my positioning work?

7. I am using a small font and my line spacing is all messed up.

This is because of the Gmail DOCTYPE, try putting your font inside a paragraph tag instead of using a font or span. Another way to get around this is to define a line-height and/or font-size in the containing TD.

8. Gmail inserts a link around my phone numbers. How can I block this?

Both the desktop and mobile version(s) of Gmail now insert an anchor link around phone numbers. In the desktop version, the link opens Google’s new voice/chat console which is displayed along the right column of the Gmail interface.

To block this, use an HTML entity in your phone number that Gmail does not recognize such as “”

Â212-389-3934

In the above example we inserted this entity before each dash.

Click here for more examples and fixes.

9. Gmail is converting my email addresses and URLs to links.

Yes, if you have a URL or email address listed without a link, Gmail will add it for you. For example name@test.com within this paragraph will get converted to:

                            

                                 name@test.com

Here are two possible fixes:

1.) Insert an HTML entity that Gmail does not recognize, like:
Â

So change name@test.com to:
name@testÂ.com

Change www.mydomain.com to:
www.mydomainÂ.com

Change https://www.mydomain.com to:
http:Â//www.mydomainÂ.com

2.) Insert an anchor around the URL or email address and format it like the rest of your text. For example:

                            

                                 test@test.com

10. My email is getting clipped in Gmail.

If your email exceeds 102K, Gmail will display the first 102K along with a message that reads:

[Message clipped] View entire message

When the user clicks to view the entire message, your email will be displayed in a new window.

If you are close to 102K, you might save a few bytes by removing any unnecessary spaces, carriage returns or comments.

We recommend that you avoid embed images or documents when sending HTML emails.

11. Why aren’t my images showing up?

Gmail does not support spaces within image paths. Always use underscores or dashes.

If that doesn’t fix it, check to make sure you are using absolute image references.

If that still doesn’t fix it, Gmail might be having a problem with your Hypertext Transfer Protocol Secure references (https://). If so, try switching to HTTP.

12. Why is there is a small space under each of my images?

This space is actually caused by the Hotmail DOCTYPE. Here are a few workarounds (these work in Hotmail and Yahoo Beta as well):

1.) Add style display:block to the image element

2.) Add align absbottom in the image element

3.) Add align texttop to the image element

4.) Add line-height 10px or lower in the containing TD

5.) Add font-size 6px or lower in the containing TD

For more workarounds check out this blog article: 12 Fixes for Image Spacing

13. Sign up for more email tips!

The post Gmail App appeared first on Email on Acid.