August 11th, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The Official Design Newsletter of SitePoint
by Alex Walker (design@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=48
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
We hate to love it and we love to hate it, but HTML email is
here to stay. In issue #48 of the new and improved Design View,
I'm going to give you a down 'n' dirty view of our HTML
newsletter redesign process.
I also wanted to remind you that Web Directions South is fast
approaching [1] -- a little over five weeks away -- and will be
held in Sydney. Come along, drink cheaply, and meet lots of cool
and interesting people. Oh, and there's also a raft of brilliant
conference speakers to entertain and educate you during the day.
If you plan on coming, it's better to act sooner than later [2].
The "middle bird'' (as opposed to "early bird") discount is valid
until the end of August, and SitePoint readers are eligible for a
further $A55 discount by entering the code 'WDS-SP' during
purchase.
Hope to see you there.
Alex Walker
Editor
SitePoint Design View
[1] <http://www.webdirections.org/>
[2] <https://secure.webdirections.org/wds08/register/billing>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
** Upgrade Your Business Potential **
Take the next evolutionary step in web hosting and remove the
worry that your website is not constantly available. AIT's
Enterprise Class servers allow you to have room to grow at an
accelerated rate without a loss in the quality of service.
* Production Class Server
* 24x7x365 Heroic Support
* Maximum Uptime & Security
* Fully Managed or Self-Managed with Root Access
Learn more about Enterprise Hosting from AIT:
http://www.ait.com/enterprise/hosting.php?pdkw=sitepoint-august-14-2008
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Part I -- The Dark Heart of HTML Email
- Part II -- The Initial Testing Phase
- Part III -- The Final Testing Phase
- Latest Tutorials
- Hot Discussions
- New Blogs
PART I -- THE DARK HEART OF HTML EMAIL - - - -
Sometimes I feel sorry for poor ol' Internet Explorer 6. It
don't get too much love. You only have to wander the more
prominent web dev blogs and forums to realize that IE6 has been
the web's number one kicking boy for some time now -- and with
all those endearing little rendering bugs, perhaps deservedly
so.
However, if you ever harbored a secret desire to rebuild your
tattered relationship with IE6 -- to rekindle that flame -- it's
easily done. Simply spend a little quality time working with HTML
email and I guarantee you'll have the words "I HEART IE6"
tattooed on your left buttock by the second week.
Yes, my friends, you know not the meaning of rendering
inconsistencies till you've delved into the dark heart of HTML
mail client rendering.
At this stage I've managed to piece together some rough rules of
thumb to use when you're asked to work on HTML email.
Rule 1: Run. Immediately. Don't pack. Don't think. Just GO!
Rule 2: If you can't beat the guards, you'll need to surrender
yourself to one immutable core truth, Grasshopper. The true
skill in designing HTML email is not controlling if it breaks --
it's controlling how it breaks.
--- THE BRIEF
There were two major issues we had with our former newsletter
template:
Firstly, like almost all legacy HTML email, our old template
blew itself to tiny pieces in Outlook 2007. Any new template
design needed to account for Outlook 2007's 'pre-Pearl Jam' era
rendering abilities -- no background images and comedic CSS
support.
Secondly, the reality is that in 2008 most of us block images to
new emails from unknown senders -- and for good reason. This
means you simply have to assume that your first and arguably
most important HTML email will arrive without any supporting
imagery. If your branding and identification is tied to images,
your email 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:
The Angel's Choir: This group of mail clients have strong and
generally reliable HTML rendering capabilities, and includes
Thunderbird, AppleMail, 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.
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.
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
background-color information too if you're not careful in how
you declare it. Rewrites your email 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.
[http://www.sitepointstatic.com/images/dv/48/legion.jpg]
-- GETTING STARTED ON THE RIGHT FOOT
Make no mistake, HTML email 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.
Thankfully both Campaign Monitor and MailChimp provide an
excellent range of free, downloadable templates that will get
you off on the right foot.
Campaign Monitor HTML Email Templates
- http://www.campaignmonitor.com/resources/templates.aspx
MailChimp HTML Email Templates
- http://www.mailchimp.com/resources/templates/
Ultimately, we combined elements of several templates to give us
the solid foundation we needed.
One interesting consideration is the content width -- all the
templates provided above are considerably thinner than the
retired Design View template.
While this seems counter-intuitive -- after all, screens are
bigger than ever -- there is a greater tendency for users to
read their HTML email 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 isn't ideal for
presenting your content, the alternative is worse -- some of the
mainstream webmail clients feature cropped or horizontally
scrolling content.
The header banner was the major consideration for us. 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 email faceless and
unbranded if images are blocked (often the default situation
now).
[http://www.sitepointstatic.com/images/dv/48/banners.jpg]
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.
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
EXPAND YOUR BUSINESS WITH W3 MARKUP
Rely on us to get more projects completed each week! We provide:
* Pixel-precise hand-coded Valid CSS & (X)HTML for any project
* Theme or "skin" implementation into popular software like:
WordPress, Drupal, Joomla, MovableType, Blogger, Pligg,
Textpattern, Typo3, osCommerce, Shopify, X-Cart, SMC, even
HTML Email templates, Server Side Includes
* Same-day turnarounds and pricing discounts
* Search engine friendly semantic coding
* 100% cross-browser, cross-platform browser compatibility
* Money back guarantee and 100% non-disclosure
Get started here: http://w3-markup.com/p/sitepoint-newsletter-tech-times
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
emails, I found Thunderbird the easiest.
Once you have Thunderbird set up:
1. Select and copy your HTML template to your clipboard.
2. Create a new email 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.
[http://www.sitepoint.com/images/dv/48/inserthtml.jpg]
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 email clean and separate from your
testing mail.
[http://www.sitepoint.com/images/dv/48/template.jpg]
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 my own
early testing stage, my group included:
- my 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.
Getting the Outlook 2007 test bed running was the most
troublesome. I originally tried downloading the trial from
Microsoft. Unfortunately, the installer then informed me it was
happy to install Word, Access, PowerPoint, and every other app.
EXCEPT Outlook 2007 -- which for unknown reasons was grayed out.
Oh joy!
Eventually I tracked down and installed the full version. Again,
to keep things clean, I set up a brand-spanking new Gmail
account, solely dedicated to receiving mail for Outlook 2007.
While it might be tempting to consider using a service such as
Campaign Monitor to allow you to generate Outlook 2007
screenshots, the practicalities of tuning your HTML via an
online service are questionable -- you'll need to do lots of
tweaking and this will be slow and expensive.
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.
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 email testing service. We've used Campaign
Monitor but I know that MailChimp runs an excellent equivalent
service too.
After uploading and importing your HTML, the Campaign Monitor
service allows you to test your template in around 20 different
mail clients -- although at busy times some clients have been
known to time out.
However, keep in mind that a single set of tests costs around
$5.00 and can take up to an hour to generate, so you would want
to be fairly confident your template was close to finished
before starting this stage of testing. This is not a time for
incremental tweaking.
The Campaign Monitor test suite breaks down into three major
groups:
Web-based email clients
- AOL Web
- Comcast
- Earthlink
- Gmail
- Mail.com
- MSN Hotmail
- Windows Live Hotmail
- Yahoo! Classic
- Yahoo! Mail
Desktop email clients
- AOL 9
- Lotus Notes 6.5.4
- Outlook 2003
- Outlook 2007
- Outlook Express 6
- Outlook XP
- Thunderbird
- Windows Mail (actually, what is that?)
Mobile email clients
- Blackberry
- Windows Mobile 5
- Windows Mobile 6
[http://www.sitepoint.com/images/dv/48/cm.jpg]
We also had our own Apple Mail clients and iPhones available to
test the design.
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.
As we were preparing to send the first edition of the new Tech
Times template, Matt 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.
Starting to feel warm and fuzzy about IE6 yet?
I thought so.
SUMMARY
Despite its many detractors, HTML has its place in email. RSS
isn't going to kill it. Neither is spam fear.
At SitePoint, we still see thousands of new subscribers to our
newsletters every single month. And those subscribers still
always choose HTML over plain text at a rate of 15-20 to 1.
And there have been no signs of decay in those figures over
time.
In short, while we might not like it, your clients probably
prefer HTML email, and so does their audience.
So stick with the templates, keep it simple as possible, and
test early and often.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading. I'll see you in
a few weeks.
Alex Walker
design@sitepoint.com
Editor, SitePoint Design View
LATEST TUTORIALS - - - - - - - - - - - - - - - - - - - - - - - -
Build a Web 2.0 Voting Widget with Flex: Part II
by Jack Herrington
More Flex quizzes, and more book giveaways! In Part II of this
series, Jack expands on our voting widget in Flex 3, and once
again provides a quiz for you to test your knowledge at the
end - and receive a free book for your trouble!
http://www.sitepoint.com/article/1662
23 Beautiful Examples of Web Site Archives
by Jina Bolton
Does your design enthusiasm extend to the archives section of
your site, or do you tend to overlook its potential? In this
article, Jina takes us on a tour of appreciation though a
gallery of beautiful examples you'll never neglect this aspect
of a site again!
http://www.sitepoint.com/article/1661
Why You Should Fire Your Clients And Launch A Product
by Daniel Tenner
So, you want to start your own company -but should you follow a
product- or a service-based business model? In this article, the
first of two on web start-up companies, Daniel demonstrates why a
product-based business is the hands-down winner!
http://www.sitepoint.com/article/1660
The Ultimate Web Site Valuation Guide
by Clinton Lee
Do you have a web business sitting on the shelf? Would you like
to sell it, but feel unsure of its worth? In this article,
Clinton uncovers the mysteries of web site valuation, debunks
some myths, and provides insight (and a useful tool) to help you
succeed in the site flipping industry!
http://www.sitepoint.com/article/1659
HOT DISCUSSIONS - - - - - - - - - - - - - - - - - - - - - - - - -
Do All Email Clients Support HTML?
<http://www.sitepoint.com/forums/showthread.php?threadid=562714>
Call for Interview Question for Jeff Veen
<http://www.sitepoint.com/forums/showthread.php?threadid=564282>
Weekly Photo Challenge - Water
<http://www.sitepoint.com/forums/showthread.php?threadid=492490>
Your camera...
<http://www.sitepoint.com/forums/showthread.php?threadid=478229>
NEW BLOGS - - - - - - - - - - - - - - - - - - - - - - - - - - - -
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
15 Companies That Really Get Corporate Blogging (12 comments)
http://www.sitepoint.com/blogs/2008/08/08/15-companies-that-really-get-corporate-blogging/
Study: Kids No Longer Into Social Networking (12 comments)
http://www.sitepoint.com/blogs/2008/08/08/study-kids-no-longer-into-social-networking/
Are YouNoodle's Startup Valuations Worth Anything? (2 comments)
http://www.sitepoint.com/blogs/2008/08/08/are-younoodles-startup-valuations-worth-anything/
8tracks a?" The Legal Web Mixtape (3 comments)
http://www.sitepoint.com/blogs/2008/08/07/8tracks-the-legal-web-mixtape/
Adobe Wins Gold in Online Olympics (8 comments)
http://www.sitepoint.com/blogs/2008/08/06/adobe-wins-gold-in-online-olympics/
JavaScript & CSS Blog: STYLISH SCRIPTING
Mining the SitePoint CSS Reference (7 comments)
http://www.sitepoint.com/blogs/2008/08/05/mining-the-sitepoint-css-reference/
Web Design Blog: PIXEL PERFECT
Create Your Own Font Using FontStruct (3 comments)
http://www.sitepoint.com/blogs/2008/07/30/create-your-own-font-using-fontstruct/
Learn Design From The Mastersa?"First Up: Mark Boulton
http://www.sitepoint.com/blogs/2008/07/02/learn-design-from-the-masters-first-up-mark-boulton/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach thousands of opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's Design View.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
mailto:design@sitepoint.com
To subscribe, send a blank email to:
mailto:subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Design View is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Design View is (c) 1998-2008 SitePoint Pty.
Ltd. All Rights Reserved. No part of this Newsletter may be
reproduced in whole or in part without written permission. All
guest articles are copyright their respective owners and are
reproduced with permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list, send a blank email to:
mailto:leave-2384823-2266615.6a281def5c7ecb5efcb2dd35473f5a18@sitepoint.sparklist.com
<a href="mailto:leave-2384823-2266615.6a281def5c7ecb5efcb2dd35473f5a18@sitepoint.sparklist.com">AOL Users Click</a> to unsubscribe
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.