How To Write An From An Ipad To An Address In India

Transcription

1 A Designer's Guide to HTML s There are a whole host of ingredients that contribute to a good marketing campaign. Permission, relevance, timeliness and engaging content are all important. Even so, the biggest challenge for designers still remains building an that renders well across all the popular clients. As we all know the reality is that most of the mail clients block images to new s from unknown senders and for good reason. This means you simply have to assume that your first and arguably most important HTML will arrive without any supporting imagery. If your branding and identification is tied to images, your arrives nude and punched full of holes not a good first impression. We needed something that at least looked vaguely legible and professional if the recipient nixed the pics. The Strange World of Mail Clients From our initial testing, we found we could split most mail clients into one of three main groups: 1. The Angel s Choir: This group of mail clients have strong and generally reliable HTML rendering capabilities, and includes Thunderbird, Apple Mail, and Opera Mail. Hand them your song sheet and they ll mostly sing it back to you note-perfect. You can essentially treat these mail clients as if they are normal, modern browsers. 2. The Muddlers: This group includes the majority of the remaining mail clients and includes Outlook 2003, Outlook Express, and Yahoo Mail. While you ll probably encounter some variability in their renderings often in text size and margins/padding the Muddlers will generally honor your page layout. Any issue that can t be easily fixed is most often trivial enough to accept. These clients are like IE6 irritating in a vaguely predictable way.

2 3. The Legion of Doom: This is an insidious crew of desperadoes led by the Evil Outlook 2007 and also including Gmail, Hotmail, and Lotus Notes. Each uses their own unique but evil super-powers to subvert and destroy your HTML rendering. As this is the problem group, I ll expand a little more on them. Outlook 2007: No background-image support whosoever. Almost no CSS positioning support. Patchy general CSS support. Gmail: Actively strips all background images and will remove backgroundcolor information too if you re not careful in how you declare it. Rewrites your with a tangled web of random CSS classes that make it almost impossible to track which rule is doing what. Lotus Notes: Crazy like a fox. Again, removes all backgrounds and has scant regard for padding and margins. Getting Started on the Right Foot Make no mistake, HTML is a complete and utter minefield. There are very few rules that you can rely upon across all mail clients, so unless you have extensive personal experience to draw on, you re most likely going to want start with a template that gets most of the fundamentals right. ( icubes Platform provide an excellent range of templates that will get you off on the right foot.) As we all know, especially in the Indian Context, there is a greater tendency for users to read their HTML in a webmail environment (i.e. Gmail, Yahoo Mail, etc). A quick glance at any of these clients will show they all devote extra horizontal space to advertising and tertiary navigation, leaving less width for your content. While this

3 isn t ideal for presenting your content, the alternative is worse some of the mainstream webmail clients feature cropped or horizontally scrolling content. For many campaigns (especially newsletters), the header banner is a major consideration for many designers. The simplest approach is always to put your title and branding into one large banner image and embed the whole thing. Of course on the down side, this leaves your faceless and unbranded if images are blocked (often the default situation now). For the example illustrated here, we decided to have an each way bet with our banners. The SitePoint Design View text is actually real text, colored and positioned with inline CSS; this means the newsletter will at least clearly identify itself, even if images are blocked. Likewise, the default positioning doesn t look so terrible if CSS positioning isn t supported. We ve included the graphical part of the logo (the brackety part) in the background image of the banner, working on the assumption that if background images are supported, then so should the CSS positioning required to align it with the text. Some might say this is a risky assumption, but so far it s yet to prove wildly incorrect. Of course, there s always next week. We don t claim this blending of real text and background images is the only way to tackle the issue or even the best way for that matter but we re sticking with it for now.

4 Part II The Initial Testing Phase So, let s assume you ve started with a template and come up with a HTML design you re happy with. You re going to need to start preliminary testing. Although there are plenty of alternatives for sending your test s, Thunderbird could be the easiest. Once you have Thunderbird set up: 1. Select and copy your HTML template to your clipboard. 2. Create a new in Thunderbird, then select and delete any signatures automatically included. 3. Click inside the text area and go to Insert > HTML a text box will pop up, allowing you to paste your HTML in. 4. Hit Insert and you ll be ready to send. However you may not currently use Thunderbird as your default mail client, and indeed, may not wish to. If this is the case, consider creating a new Gmail account and using Gmail s SMTP/POP server settings to send your test mail from Thunderbird. This will keep your everyday clean and separate from your testing mail.

5 You can also set up groups in Thunderbird (referred to as Mailing Lists ) that enable you to send to a number of different addresses (and clients) from one address. For our own early testing stage, the group included: The default Thunderbird account a Gmail account a Yahoo mail account an MS Outlook 2007 account These certainly aren t the only clients you might consider for early testing, but they gave us a reasonable snapshot of where we were at throughout the process. The one really useful thing we (well, Brothercake) did discover during this phase is that, like IE, Outlook DOES support conditional comments. While in many ways this is cold comfort, it at least allows you to remove items that have no chance of working in Outlook 2007 (such as forms and complex positioning CSS). However, beware. This is dark magic, so use it with care and not at all if you can help it.

6 Part III The Final Testing Phase Okay, so you have a template that appears to be behaving itself in your smaller test group. It s probably time to bite the bullet and go to an testing service. Better to do testing across major Web-based clients & Desktop clients Web-based clients Gmail Rediffmail.com MSN Hotmail Windows Live Hotmail Yahoo! Classic Yahoo! Mail Desktop clients Lotus Notes Outlook 2003 Outlook 2007 Outlook Express 6 Outlook XP Thunderbird While this certainly seems like a pretty comprehensive test list (especially compared to the five or six browsers you might typically test a web design on), it s still not quite enough for you to let your guard down as we found out the hard way.

7 As we were preparing to send the first edition of the new mailer, our testing team still reported seeing serious layout issues in Gmail. Yet I d put quite a lot of time into smoothing over the Gmail issues and could see none of the problems he was reporting. After arguing over IM for about 30 minutes, we realized that I was viewing the template in Gmail in Firefox, and he was viewing the same template in Gmail in Internet Explorer 7! Cue sound of small denomination coin falling. Of course, this is common sense when you think about it, but it effectively means you really need to see four versions of each of the nine web-based clients tested each webmail client in Firefox, IE7, Safari, and Opera..