Here we are, in our HTML Email Laboratory again with another Gmail-specific problem.
Symptom:
Gmail does not display images in an HTML Email.
Culprit: Border Styles.
Example: style= “border:none;
Because Gmail and other web-based email systems tend to strip out styles - it looks like using a style reference in your IMG tag will cause Gmail not to render the entire image.
What you should just do is use border=”0″ to accomplish the same thing, namely you want to avoid that little blue border that surrounds an image when an anchor link is placed around it. Our tests rendered just fine in Hotmail, Horde, Yahoo and a few other web-based clients.
December 3rd, 2007
Search Engine friendly template you can use to start off your next project half finished. This template uses the XHTML Strict 1.0 DTD and pure CSS with no inline styles to convey your information with the minimum amount of code and markup. Tested in IE 6 & 7, Opera 8.0+, Netscape 7+, and Firefox 1.5 and up, all with consistent results.
I made this template as an exercise in SEO techniques, wondering if I could meet commonly held best practices for the CSS and still have it be search engine friendly, AND be XHTML Strict 1.0 compliant. It worked after a little tweaking and I invite you to have a look and learn from my example.
Zip file includes the photoshop PSD for the header for customization.
Download Zip file here.
View all Free Web & Flash Templates here!
November 20th, 2007
America Online™ is a source of frustration to a great number of Developers and Web Marketers around the world. When you consider AOL you have to remember that you are not just dealing with a custom web browser, but you are also dealing with the manner in which AOL runs their Network.
AOL’s browser is basically just a custom “skin” or “branded” version of Internet Explorer. It is the AOL proxy server that makes the web browser behave differently than through a normal dial-up or LAN connection. Two primary reasons for these differences involve how AOL processes graphics and handles caching.
One of These Things is not Like the “Others”
Another common complaint is that images can often look blurry on AOL’s Browser and in many cases have black bars, distortion, or lines running through your graphics.
America Online utilizes a compression software on any graphics which run on their network in order to speed up the delivery of web pages & HTML to it’s members. It accomplished this by compressing images and various multimedia applications which run across it’s network. AOL uses the proprietary Johnson-Grace image format .ART. All images that are BMP, GIF or JPG are automatically converted into the ART format by default. An AOL member must deselct the “Use Compressed Graphics” option under their Web Preferences in order to avoid this.
Cache Me if you Can!
One you’ve selected not to use AOL’s compressed graphics option, then you still must clear out your cahe in order to see any sort of difference. In your WWW preferences you can set your history to “0″ pages and then clear the History. After you do this, then you must also delete the files in your Temporary Internet Files folder. AOL offers the follwing instruction on how to accomplish this:
“By holding down the “Control” key on your keyboard and simultaneously mouse-clicking on the Browser Reload icon while the browser window is active will also clear your proxy cache and display the latest data from the website.”
Some Background Information!
Often, backgrounds used in designing both HTML Email & Webpages will display as “tiled” when viewed in the AOL environment. This is due to the compression algorithim which is used by the the Johnson-Grace compression software. A JPG which is wider than 640 pixels will be scaled down by AOL. You may use a GIF as a replacement for large background JPG’s, or try to save your JPG as “Progressive 3-pass” which the current version of the Johnson-Grace software does not recognize.
AOL Has It’s Own Format
Character formatting is only mildly supported by AOL. In order to format your email for AOL and get an idea of how your email will look to AOL recipients, you should start by eliminating all of the hard returns at the end of each line.
Justify my Paragraph
All paragraphs are left justified and have no indentation. There should be 2 spaces between each sentence as it provides white space. Every place you want to indicate a hard return, place
at the beginning of the next line. For paragraphs, use
, notat the beginning of the line. There should be no space between the
and the first character of the line.
Tabs
Do not use
, the tab key, , or other tab formatting methods. You will not like what you see, or what your recipient will see for that matter. It is far better to just use spaces whenever you wish to create an indentation or tab.
Character Emphasis
You may use your normal character emphasis tags as you think are neccessary for your mailing & message.(, , etc..)
Bulleted, Ordered and Unordered Lists
Unfortuanately, you cannot create lists using the traditional
or
, Unordered & Unordered List tags. The common workaround seems to be to simply put your number, followed by several spaces.
1) Whatever
2) Whenever
For bulleted lists, you merely need to replace the above numbers with an asterisk or other ASCII character.
* So on..
‘ And so forth..
“Don’t Quote me on this…”
Quotes and Apostrophes do not translate well into AOL Email. When entering these types of characters into AOL Email, be sure to usee ASCII Low characters. Furthermore, if you are using a program like Microsoft Word or other Office product to prepare your text/HTML before entering it into your mailing, you should be aware of Office’s Autoformatting feature.
If you cut and paste from Microsoft Word, there is always a chance that some formatting will not carry over into HTML very well. This is most often seen in the case of Auto formatting, when MS Word converts common keystrokes into symbols. -, “”, © and a host of others. These are called Windows Characters, and are not interpreted by your browser.
Word represents these ASCI characters as numeric values which a browser cannot understand.
This is why it is best to always work in text mode, or save your document as a dos text document and lose all formatting before transferring it to your HTML email.
Strange characters may inadvertenly wind up being inserted into your Email if you do not use a text-only editor such as Notepad or TextPad.
For more information see: HTML Email: An Introduction
Isn’t That Special
You will need to treat all special characters, those which are generated through an escpae sequence (™ ) as plain text. There is not currently a known workaround for getting special characters into your AOL Emails effectively.
Additional Resources
For more information on AOL issues visit: http://webmaster.info.aol.com/
November 8th, 2006
