Posts filed under 'HTML'
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
We get this a lot when talking to customers, namely they bring up an example of a web hosting outfit who is offering a cheaper rate or more bandwidth for a lower price.
Example. We have a client who pushes about 620 gigs of data a month on one of our dedicated servers. They stream a large amount of videos (no, it is not what you think).
Now the way we work, being a specialty web host and all - is we do not employ limiting software for our clients as far as how much of the “pipe” they can use. So, that means their customers get to access that data up to 100 MBPS if they can download that fast. The bottom line is that if you suddenly get national attention and a rush of traffic because you were mentioned on Oprah - we want you to be able to withstand that and not have your website go down. We’d rather come back and talk if it continues rather than have some cost-saving software on our end cut you off at the knees.
It is all about the server’s connection to the Internet (the “pipe” if you will), so to put it into perspective – here’s what you get with different hosts.
——————————————————-
Typical Shared Hosting Account = as low as 256k/sec
Typical VPS / Virtual Private Server = 1.5mps
Typical Basic Dedicated Server = 10mps
Typical High-end Dedicated Server (Like Us) = 100mps
——————————————————-
That’s why the question “How much Bandwidth do I get?” is such a loaded one. It’s quality –vs- quantity.
Your shared web hosting account may offer “unlimited” data transfer a month – but to move that 620 gigs of data would take exactly:
264 Days 2 Hours 3 Minutes 33.76 Seconds on a share hosted –vs- 19 hours on our servers.
If you run a Point of Sale System ( POS ) & or Store on the same server, then performance is impacted by everything going on on that server.
July 26th, 2007
Securing your servers & applications is always at the forefront of any “good” development group’s conscience.
If it is not, then heck, you are amateurs and your company deserves to whither and die because this is not a business where the”Fisher Price - My First Web Company” type of stuff cuts it.
This applies to the following people or companies:
- Web Freelancers who deploy open source or use community-grown contributions and freeware code for their clients.
- Companies & Developers who deploy or base customer-applications or tools off of open source or other frameworks.
- Companies and Freelancers who DO NOT watch to see if what they are deploying for their clients and customers later develops security flaws, exploits or other nasties.
- Web Hosts who run VPS or Dedicated Servers for their clients.
- Probably YOU - if you are still reading this.
Bottom line is that it is often a “company-ending” event when a server gets hacked and you are not prepared both legally (read that as you have strong contracts in place to protect you from these events) - and defensively to limit the damage.
IMPORTANT - If you are hosting web sites for your clients and letting them install any number of applications like Bulletin Boards (PHPBB), CMS’s (Mambo / Joomla), Shopping Carts (OSCommerce, Zen-Cart) or even Blogs like this one - AND - you do not understand any of what we are about to list off - then you should call us TODAY (877-239-3083) because you definitely need some quick and inexpensive help to secure your business.
For anyone who has even watched a company, client or server burn because a “guestbook” compromised their entire server - this is for you.
For anyone who lets their clients install applications via Fantastico or PLESK Application Vault - then this is for you.
For anyone who does not know what scripts & applications their clients are currently running on servers you are responsible for - then this is for you.
Kevin Huisman, our Development Manager and “server watchdog” recently posted the following:
For everyone interested in server security stuff, we thought we’d pass on a bit of info.
We had been using some home-grown rules to combat hack attempts, and decided to really do some research into finding a more comprehensive rule set. Sort-of a “why reinvent the wheel”…
There is a great site to become familiar with — http://www.gotroot.com that has a really comprehensive set of rules for multiple issues - IP and proxy black lists, known bad useragents, comment spam, etc.
Some of the rule sets make sense to use verbatim:
- Rule Exclusions
- Comment spam blacklist
- Compromised/Hacker boxes blacklist
- Anti-Proxy protection
- Bad UserAgents blocking
- Anti-Proxy protection
- “Google Hacks” signatures
- Known rootkits/worms
And so on…
There’s also a badips.conf file found in the “All in one” downloads that isn’t directly linked to from their list. It’s another set of IPs to ban, and it’s specifically for Apache 1.x / ModSecurity 1.9x, which usually fits the bill on most older versions. They retired it in Mod Security 2.x. rules, since there seems to be a better way of doing it in that version.
You should also look at what they call “Just in Time” protection, a set of rules that combat known vulnerabilities in specific open source web apps.
They have rules for squirrel mail, phpbb, formmail.cgi/pl, Coppermine, and a whole host of others.. You may not really need the bulk of the rules if you do not specifically run those web apps. You can just use those you need on each server.
It is recommended that rather than a wholesale deployment of all possible rules - you merely go through and whittle the list of rules down and remove those that do not apply to the web app versions you are using. Many times you simply find that even with these rulesets some of them maye .conf files are actually behind the versions of the web apps you’re using such as when specific files with specific known vulnerabilities that have been fixed since the rules were created. This is a bit of a lower priority at this time, since it probably doesn’t save much in the way of speed or processor.
As far as processing/speed goes, it’s a fairly big set of rules when you combine them all together, and we noticed that it takes a few beats longer to restart apache, but once it’s running, we haven’t seen any significant slowdowns.
Individual results may vary based on how many domains and traffic each of your servers or VPSs have.
July 13th, 2007
NEW from Google - Gmail Paper! (BETA) - Google will print your email on demand and send them to you.
Tagline: You Click. We Stack. You Get.
With advantages such as:
- No pop-ups or flashy animations.
- Print 1, 1,000 or 100,000 emails - WHATEVER seems reasonable to YOU!
- Made from 96% post-consumer organic soybean sputnum - the environment actually gets healthier.
Gmail paper has got to be the funniest thing I have ever experienced on the Internet.
More craziness - if you are a developer or a designer - click here.
PS - If you haven’t figure it out… this is not a new Web 2.0 thing…more of an April 1st thing.
April 2nd, 2007
This month’s technical question seems to revolve around the following questions.
1) How do I get a jump drive to boot?
2) How do I make a bootable usb drive or device?
3) I JUST WANT MY %#$%ing THUMB DRIVE TO BOOT!!!!!
Yeah, we feel your pain, so brace yourself for the harsh reality. Whether you want to get a jump drive to autorun or autoplay - here’s the straight scoop.
Getting a jump drive, thumb drive or any nearly any other usb hard drive device to autorun is almost impossible to accomplish.
I hate to be the bearer of bad news - but with today’s security settings and restrictions - even if you do get it to work - it is only under the most controlled of circumstances.
Now, this does not stop customers and marketing firms from calling us every week asking for how to do an autorunning USB Jump Drive for some marketing project they have (and usually frantic because they have already promised someone they can) - so obviously there is great need for this.
That being said, we’ve been actively studying how this is accomplished and under what circumstances. Gleen what you want from this - as we are merely reporting what we’ve found along the way.
1) Pre-conception #1 - All I need is an autorun.ini right?
Wrong. That might work for your typical CD-ROM or DVD project, however a jump drive is not treated the same as a CD-ROM or DVD. It is a device, not media. Granted, on some older Win 98 machines - we actually got the following to work by including both an autorun.ini & a seperate autorun.inf (as if it was a CD-ROM ISO).
If your file was presentation.exe, then your files would look like:
[autorun]
open=presentation.exe
or
[autorun]
shellexecute=presentation.exe
To see a list of all the various autorun commands you can use, visit this link.
Another resource is: http://www.phdcc.com/shellrun/autorun.htm
If you want Windows-based resources for booting from a USB Drive - here is the official Microsoft spiel: Recommendations for Booting Windows from USB Storage Devices: http://www.microsoft.com/whdc/device/storage/usb-boot.mspx
To sum the above article up - if you find that type of reading boring - Windows can easily make a USB Drive boot - if
1) You’re the manufacturer of Jump Drives, and
2) You can change your USB Device’s hardware BIOS to allow for Boot instructions.
If you cannot do either - then you cannot make a USB Drive bootable and anyone who says they can is a big, fat liar.
If you want to see some very cool multimedia presentations we can build for you - then give us a call about that. THAT - we can get to autorun for you!
UPDATED - We found this great little post on Digg - Simon’s Blog - how to autorun a USB Device.
March 16th, 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
Flash Email: Dateline: 2 years ago: Everybody wanted to do it, no one seemed able to pull it off correctly.
Flash Email: Dateline: Now – See above.
It’s time for everybody’s favorite Flash Email update once again! It’s been a few years since we took a long, hard look at Flash Email, the promises of those pushing Rich Media technologies and those pesky little things like “Email Clients” or “Firewalls” that seem to get in the way.
The short of it.
Flash email is still very much an Enterprise-class solution at this point. There are a lot of marketers who say they can design it. There are many who say they can send it. But very few can guarantee that any large group can view or interact with it. Seriously, this author tested almost every demo, sample, preview or other “test” he could find and could not find a single instance where their Flash content showed up 100% correctly in my normal, everyday use, email client(s) (Outlook 2000 - 2007 and several web-based email clients as well).
Nada. Zero. Zilch. Nothing. I received garbled content or “alternate” content such as links, static images or .gifs.
So, as you can plainly see… most of the providers who claim to be able to specialize in Flash Email, are really just specializing in delivering alternate content. Anyone can set up a “best case” scenario as a demo.
Know you Recipient.
Now, I am not saying that these providers are not returning value for their customers. However, for the average developer, designer or businessperson who wants to utilize Flash Email in some capacity, it really is not all that simple. It’s just that some of these businesses are touting their Flash Email solution as foolproof and throwing around the phrase “99% of all recipients have Flash” as meaning that 99% can receive your Flash Email message correctly in their email client.
The following is a quick run-down of a Flash Email test we did, with an enabler that delivers alternate content (GIF Image) if the user could not display Flash. We sent it to 26 Different Email clients that we have here in our “lab”, and here are a few of the major email client results:
All email clients were set to receive HTML Email, Windows XP Professional SP2. Latest version of Flash installed.
| Outlook 2003: |
Blank Email + Warnings |
Outlook 2003:
( No Firewall or Anti-virus) |
Alternate content |
| Outlook 2002: |
Blank Email + Warnings |
Outlook 2002:
( No Firewall or Anti-virus) |
Alternate content |
| Outlook 2000: |
Raw HTML Code + Warnings |
|
Netscape Communicator 6.2 - 7.0x
( No Firewall or Anti-virus) : |
Alternate content |
Netscape Messenger 4.72:
( No Firewall or Anti-virus)
|
Raw HTML Code + Warnings |
| Yahoo Webmail: |
What email? Network must have killed it. |
| Hotmail Webmail: |
Nope, nada, zip, zilch. Completely Blank Email Received. |
| Horde Webmail**: |
See above. |
| Squirrel Mail Webmail***: |
See above. |
| AOL 6.0: |
Encoded as MIME. Attached at bottom. Does not open. |
| AOL 7.0: |
Never received. |
| AOL 8.0 - 10.0: |
Sorry. |
| Eudora 5.0 & 6.0****, Thunderbird (Mac & PC) |
Nothing. Just a bunch of warnings. |
And this is just one person’s test on the subject. There are a ridiculous amount of variables that can come between you and having the flash email work out. Some of these issues include: Security settings, restrictions in your browser, anti-virus, firewall, ISP’s firewall, email client, operating system or any number of third party software you may have installed along the way (Email forwarding, SPAM blockers, Dynamic DNS, etc.) The point is that even under very controlled circumstances, it doesn’t work out very well.
Doing it Right.
That doesn’t mean you should do a wholesale abandonment of Rich Media email, campaigns or other marketing ideas. What more and more companies seem to be doing is a bit of a hybrid approach to their Rich Media email and this is where designers and developers can help their clients by thinking more about the message rather than the medium.
Many of the best practices that we put forward in our first column, Flashing your Email (2001) – seem to have been copied and adopted extensively by Email & Flash Email marketers, kudos to you! Just go a google search on “flash email” – and see how may lists of 10 seem to crop up with the same practices. If you are designing for Flash email, consider the following:
Use an action to start the Flash Email
Preview panes, Outlook alerts or any other little email client quirks will either
1) Start playing the email immediately
2) Not only start playing it in preview mode, but play a simultaneous copy when you open the email (Becomes a wall of noise., that’s a bad marketing message)
3) Start playing, only to have the recipient notice it and then miss ½ the message to begin with.
A simple “Click here to play this message” can go a long way to preserving your messages intended delivery.
Animated Gif + Click through to Flash = Effective.
Nothing can replace the value of a well though out and effectively designed dual HTML Email & Text Campaign that combines Flash elements. Why not try an eye catching animated .gif file that has a “Call to Action” to let your recipient click through to your website? That should be the whole intention correct?
Track it. Study it. Improve it.
You should not limit yourself to just tracking the opening of the email or the click on an HTML Link. Flash MX 2004 allows for easy tracking of interactions within your flash files, or grab a copy of something like APT Launcher which aggregates data for you for larger projects. If all of your clicks are coming from the HTML, that is one thing, but some data points I would insert for tracking or more “blunt” metrics I would look for would be:
1) When did they get bored enough to stop the flash. (“Hmm… I don’t want to refinance)
2) When did they get interested enough to click through (“You had me at hello…”)
3) Did the Flash file start correctly? (Place a data point that starts when the flash successfully plays.
4) How far did the Flash file play before it stopped/quit/crashed/etc? (Put lot’s of data points)
Stop trying to close the deal in the email.
No one completes a sale within the email; no one fills out a mortgage/insurance/request for heartburn medicine or whatever the new “thing” is, so quit trying to design your emails to do so. You WANT them to click through to the website where all of your normal & “stable” actions and events “should” be. Certainly if you’re even thinking of investing in Flash or HTML Email – it is because you’ve already turned your website into a lean, mean revenue or lead generating machine.*
You do this because:
- The Flash movie will play perfectly.
- The contact and order forms are all set up.
- The data collection devices are in order.
- Nothing is left up to chance or a recipient’s email client.
- Nothing will “trash” the recipient’s computer or garble the message and associate you or your client’s brand with doing so.
[Editor’s Note: Why is it that the only thing that does seem to get through unscathed IS the logo or corporate url – like a giant “beacon of blame”. ]
It’s the offer silly.
Yes, “duh”, you know this I’m sure. Quit annoying your recipients with silly, boring, inane stuff. You can only make the word “Mortgage” stand out so much against the backdrop of everyday life.
Our most successful Flash email campaign was an animated .gif driven push to our site using a viral game as the “offer”. “It’s not in the Contract” – which was presented as follows:
- A Dual Text/HTML Email sent from Constant Contact, so that the recipients either got the animated .gif email I described above, or a simple text email to tell them about the game.
- We designed the game so that it was NOT intended to be played in the body of the email. You cannot control the recipient’s email client, nor should you try to.
- Constant Contact recorded the number of opens, clickthroughs, etc all of the normal metrics you would expect from an email campaign.
- The game was played on our website with a forward to a friend feature on the webpage located just under the game.
- The Flash file was encoded with our Flash-tracking software to record some internal metrics, as in the number of unique plays, repeat plays, clickthroughs to website, etc.
- The coupon code was tied into the order system to flag a discount and further track the sale.
- The game itself contained a coupon for a 10% discount and was designed to present our message to the user as they played (Presents branding and the idea that working without a contract loses you time, money profit, etc.
- Our normal affiliate system was in place to record cookies and server-side tracking for visits and sales.
Results:
- The game was emailed to 12,890 recipients.
- 6,879 opened the email
- 4,990 clickthrough to the game.
- The email was forwarded 512 times.
- The game was forwarded from the webpage 217 times to 534 people (multi-email fields)
- Importantly, the game was played 187,900 times.
- More importantly… the game generated 512 sales, 40 new affiliates, a number of new newsletter signups, multiple business partnerships, new clients for services and an all around general feeling of quantifiable success*****.
- Even more importantly… the game generated brand awareness and sales that we could not even track 100%. Phone sales, delayed sales, sales through our affiliates and so on.
This is where you need to be if you do not have the resources to employ an Enterprise application for your Flash and Rich Media email needs. Nothing can replace a well thought out campaign, offer or creative piece of marketing. There is no reason why you cannot concentrate more on your time, money and effort on improving your message and offer, rather than taking a more “flashy” approach.
HTML Email Design:
An Introduction to HTML Email
Unnece ssary Elements in HTML Email
For more information on troubleshooting HTML Email, visit our article archive here:
Additional links to Flash Email case studies, news, benchmarks or campaigns
Case Study Follow-Up: Flash and E-Mail
Fun @work: Viral Marketing for the Office
| * |
Seriously, if you could hear the sarcasm dripping from my internal monologue. |
| ** |
This is a common “skinned” web-based email client that is common with a lot of hosting packages. |
| *** |
This is another web-based email client you will find with web hosts. |
| **** |
This particular client was running “ChoiceMail” spam filtering. |
| ***** |
It’s that warm fuzzy feeling you get when you absolutely know something you did worked out successfully, and you didn’t “guess” that it made the phone ring or sales increase. |
November 8th, 2006
