why, it’s my Amazon Affiliates widget!

Introduction

There are two companies online that I like a lot (love?) and will always patronize (as long as they stick to their formula); Amazon.com and Newegg.com. Put simply, the prices are great, I’ve never had an issue, what I order shows up fast, and, when I need it, the customer service is great (Newegg’s service is off-the-charts great). As such, I also give them respect on here and by word-of-mouth.

Someone clued me into the whole Amazon Affiliates program where you advertise books you like from Amazon on your site. Since I wanted SOME kind of monetization and I like to show my support for things I really like, it seemed like the perfect combination. I think, however, it requires a bit of explanation so you don’t think that those are just random books. I actually picked them out and read them myself and now I think you should do the same.

I’m a newbie so what’s in it for me?

So, let’s say you’re a bit web savvy and let’s say you’ve got a lot to say so let’s say you start yourself a little blog. You start off slowly, write a few posts, get some momentum and now you want to see what you can do about raking in the dough.You get to researching blog advertisements and, BAM, too much information.

I don’t think you can go wrong with the Amazon widget, to be honest. Pick books that match your content, pick books you support and why wouldn’t people click on the links? I think it’s honest, it’s up-front, you can support something you agree with, and their widgets look great.

I’ll report back when I’ve retired off of the revenue and tell you how to do the same.

So what’s so great about those books?

In the spirit of being honest, I thought I might put a little review on here of each to prove that I ACTUALLY own these books and ACTUALLY read them (well, you don’t so much read a CSS guide or an Illustrator book.. I did read the XHTML one though). Here’s why I like them (I’m posting these on Amazon as well)…

The Elements of Style (Illustrated) by Strunk, White, and Kalman

I wish I could remember who originally recommended the original Strunk & White Elements of Style to me. If I could remember, I would find them and hug them unabashedly.

If you’re writing ANYTHING and care AT ALL about how it turns out then do yourself a favor and pick this one up. The organization is very strange (there isn’t any to speak of) and the writing style is very direct. The result is a no-nonsense book that teaches you to cut the crap out of your writing.

There are many, many valuable lessons contained in Strunk’s short and useful guide but the best ones, for me, are the ones regarding comma usage and his favorite command, “Omit needless words.” During everything I’ve ever written since reading this book I’ve heard a disembodied voice telling me to remove words. I’ve noticed while editing other people’s work that the piece can be improved dramatically by deleting all the words that say nothing.

It’s a quick read but a necessary one for anyone doing any kind of writing.

Bird by Bird by Anne Lamott

As with “Elements…,” I’m not sure how I heard about this book. It was one of those odd series of events that ends with something in your mailbox. I read a few quick things about it online and suddenly decided that I must read the book. I’m glad I did because this was one of the most enjoyable books I’ve read in a long time.

Anne has a casual but polished writing style that you can’t help but to get lost in. She writes like a close friend speaks to you, eschewing ego and pretentiousness to deliver her simple, personal message. It started out a  bit slow but the stories she told were very entertaining. By the time I reached the middle of the book, I was totally hooked and found the last half hilarious and very informative.

This book is, in the end, a guide on how to be a writer, not a guide on how to write. What I mean by that is you won’t really develop your style or improve your sentence structure by reading this book. What you will do, however, is come to terms with a lot of the obstacles facing writers at every stage of their careers. Her humor and her honesty makes you feel really good about contributing, failing, hating yourself, and moving on.

Though I would definitely recommend this book to anyone writing their own book, I would recommend it even more to anyone living in this world and doing the best that they can. She talks a lot about failing and self-hatred and giving up and charging through. I found myself particularly centered after reading about her embarrassing reactions and consequent success over jealousy and writer’s block. I learned more about my life and myself than I did about writing. I don’t necessarily consider myself a writer but I explore my creativity in different ways and this book really speaks to all of them.

Pick this book up, read it, and feel better about just being yourself.

Positioning: The Battle for Your Mind by Al Ries and Jack Trout.

Finally, a book with a history I can share.

This book was given to me by my dad, the king of business books and the fastest, most prolific reader I know. This guy blows through almost 1,000 pages a month on top of all the magazines, newspapers, and online sources he devours. Though our reading tastes aren’t completely aligned, when he recommends a book, I typically read it (or at least add it to The List in earnest).

This is the kind of book I don’t read. Though I find the advertising industry slightly interesting, I mostly hate it and wish it would go away (despite having a hand in it). This book, however, really cuts through the crap and explains positioning and branding in a way I’ve never heard before. In terms of marketing and branding, I pretty much live by the concepts in this book. Oh, and it’s about 30 years old. That’s how good this book is.

The  book shows you what successful companies have done to become that way and what other successful companies have done to screw it all up. With tons of examples and a very straight-forward writing style, this book will explain why certain products win and why others fail.

I read this book quickly and moved onto others by the same authors. They really know their stuff.

The Noonday Demon by Andrew Solomon

This is the best book I’ve ever read and likely will ever read. Period.

I have suffered off and on from depression throughout my life and this book, the first and only book I’ve ever read on the subject, did so much for my understanding about the condition. I’ve really never read a book that explained what I think and feel better than this.

First off, Andrew Solomon is an excellent writer. He gets a bit verbose at times but I found each sentence, regardless of it’s complexity, an adventure in and of itself. He paints such an incredible picture of the feelings and thoughts that accompany depression. Like anyone able to describe depression, Andrew has been through it and reading what he’s suffered from made me realize how lucky I have been with my own depression. Andrew has seen hell, been through hell, and came out enlightened.

Strangely, I always find this book difficult to describe adequately. His words were just so well chosen and the research so personal and interesting, I feel like it’s a book that needs to be experienced to be understood fully.

If you suffer from depression, clinical or occasional or undiagnosed or anything, I completely recommend reading this book from cover to cover. If you know someone who suffers from this condition and are struggling to understand what they’re going through, this book will go a long way towards helping you see what they see. I’ve really never had a book that explained something as well as this.

The Non-Designers Design & Type Books by Robin Williams

I wanted to write a quick blurb about this little book that has gone a long way towards teaching me proper design.

I’ve been dabbling seriously in graphic design for about a year now and find it one of the most frustrating things I’ve ever done and also one of the most satisfying. It’s very subjective, hard to describe, very time consuming, very sensitive, and totally maddening. When it works, it really works but when it doesn’t work, it shows you the highest level of frustration possible.

Robin explains all the basics very well which puts you in a position to begin to experiment. If you just stick yourself in front of Photoshop and try to bang out a business card or a menu or a technical document (which you really wouldn’t do in Photoshop), it’s probably not going to work out well unless you’ve had some experience. If, however, you read this little guide and try it, you’re going to have a few more ideas and at least understand the contrainst you’re working with in terms of color, alignment, etc.

This book is great for people without any experience in design who want to improve the way their documents, webpages, application screens, and printed material looks. You’re not going to win any contests with this knowledge (and neither are her examples) but what you produce will immediately look better. The writing style is a bit goofy but I use what I learned every day in everything I produce from graffiti to webpages to technical documents to resumes.

CSS: The Definitive Guide by Eric Meyer

A solid plot, well-formed characters, and an intriguing writing style make this… wait, what?

This is a boring, very useful book. I’ve read a lot about CSS on the web and nothing came close to the  explanation in this book. Instead of saying things like “we won’t bother you with the complex way this is calculated,” Meyer bothers you with the complexity. Each property I read made me really understand how it works and how it should be used.

I’ve been reading this bad-boy from cover to cover and I think I’m doing myself a bit of a disservice. I think I’m going to skip to the positioning section (everyone could use a better understanding of this mysterious and magical world), read that, maybe read a few other things I’m interested in mastering and then leave it as a reference. It makes a lot more sense to read the properties you don’t understand than trying to get through it all.

Learn (x)HTML and CSS online, then buy this book is you’re serious about getting into web page design.

Visual Quickstart Guide to HTML, XHTML, & CSS by Elizabeth Castro

I think I bought this book a bit late in my web design learning process but I still find a lot of use out of it. I use it as my general reference book and I’m constantly in the appendix and the chapter about forms.

Though I would recommend this book to people because I found it useful, I think there might be better books on the subject. I say this because it does not go into the level of detail you really need to master HTML. It does a great job explaining what it does but there are quite a few things left out or breezed over to keep the book and appropriate size. Also, combining HTML and CSS in the same book is probably a bad idea. The CSS book I reviewed above is bigger than this book and, ostensibly, covers 1/3 of the material.

If you want to learn enough about HTML to get by creating simple web pages or fixing your own, this is a great book for you. If, however, you want to really understand HTML and get into web development, I would suggest finding a book with a bit more content (probably something from O’Reilly [publishers of the CSS book above]).

Introduction

My first post about HTML emails was a bit premature. This list should have come first, then that post, then this one about sending HTML via Thunderbird. I realize my mistake and I apologize. I think that’s a good firt step towards regaining your trust. I hope we can move on from this, I really do.

I also realize that I might be missing my audience by posting this potentially overly-technical information. I am, however, consciously taking the risk for a very important reason: I hope, like me, that you always want to learn more. Maybe you have no interest in putting an HTML email together from scratch, that’s just fine. This blog is about figuring things out, doing the best with what you have, and understanding the stuff that you might, in the end, contract out to another individual (hopefully me).

I bring to you the W3C (via JCH) Beginner’s Course in HTML for Emails. This list below are links to classes on the W3C site along with instructions for how to use it. Because you use a limited subset of HTML and CSS to put together emails, it’s probably a good idea to just concentrate on this subset. Go ahead, learn everything, but if the point of learning HTML is strictly for emails, you might end up confusing what is allowed with what is not.

If you already know HTML and CSS, it might be a good idea to walk through these anyways. You might regain a long-lost HTML tag or element you never thought about anymore. It’s also a good idea to get am HTML table refresher (because you don’t use them hardly at all, right?).

I’m new to all of this… how will this post help?

One of the easiest ways to keep in touch with current/potential clients is through a regular email to a subscribed list. This is probably the easiest thing you can do as a boot-strapping business owner. Bulk-email services are very affordable and putting together an email is not difficult. Likely all of the HTML services out there offer you a few (or a lot of) different stock templates to send your email out on. Simply drop in your pictures and text, upload your list of emails, and blast away… but is it that simple?

Not in the slightest. The trick to HTML emails is getting them consistent across email clients and avoiding the ol’ spam filter (which can catch you even if you have your recipients’ permission). The best way to do this is to use valid, well-formed HTML markup and CSS styling.

OK, so it’s not too likely that you’re going to write one of these from scratch. In that case, use these tutorials to understand the stock templates that your using so you can modify them to your liking. If there are a limited number of stock templates to use, it’s a good idea to know how to at least change the font, color, header, and images to personalize the email to your business. You can also make the email look like your homepage to get that visual connection. Last but not least, you’ll want to make sure that the template is up to snuff before firing off all those mails. Remember, once you send, you can’t go back.

Walk through the classes below and try out a few of the techniques in the W3C Try-It editor (found on each page). It’ll take very little time and, in the end, you’ll have a better idea of what is actually going on instead of just praying and hitting send.

W3C (via JCH) Beginner’s Course in HTML for Emails

Basic HTML training

Introduction to HTML

Elements of HTML
For HTML emails, don’t worry about the “head” or “html” elements.

Basic HTML tags
Minimal elements are used in emails; headings are not used because of inconsistent handling across email clients.

HTML attributes
This is good information but we will be using styles (CSS) more than attributes.

Links to new documents and pages

HTML tables
This section is very important for HTML emails; all layout is completed using tables.

Lists and list items
The necessary elements are ul, ol, and li

Working with images
Pay close attention to floating images and “alt” text

HTML colors
Important but there is more flexibility available (see next link)

HTML colors (advanced)

HTML reference
Not everything on this list is used for emails but it still makes for a good reference.

Basic CSS training

Introduction to CSS

CSS syntax
This section is very important; many errors that occur are syntax errors.

CSS styles how-to
The only styles that are used in emails are in-line styles

Text formatting
Most of these work but some don’t; ignore letter-spacing, text-indent, word-spacing, white-space

Working with fonts
Note that “font-size-adjust” does not work in some email clients.

Borders in CSS
This works fine; can also be done in pixels (see link below)

CSS padding
Padding can also be done in pixels (se link below)

List formatting
Some markers work, some don’t (ignore everything but list-style-type and stick to the simple ones)

Pixel values

Additional resources

MailChimp - HTML Email Guide

MailChimp - HTML Email Tips for Web Designers

Sitepoint.com - coding HTML emails

Introduction

Here is everything I know about creating HTML emails. This is the most boring and most useful post I’ve ever created by far. This is the aggregate of a lot of research and my own coding and testing. The title is bold, I know, but the information is solid.

I’m new to all of this… how can this article help me?

That depends. If you’re not going to be doing any coding then this post will help you understand what kind of work has to go into HTML emails to make them consistent and, hopefully, effective. If you’re designing the emails but not creating them then you’ll have an idea of what you’re working with and what you’re allowed to do.

Why HTML emails?

HTML emails are preferred so they are more likely to be read. This is a bit subjective but the concensus on-line is that, as long as they are designed properly and sent responsibly, HTML emails are a great marketing tool.

HTML emails are, however, still hated by some so this is a case of “less is more.”

Emails from you are easily identified and can look similar to your home page. This allows for consistent branding across all mediums, if done correctly. More about this in the “style” section.

HTML emails connect users to the home page, literally through through links and visually through the layout and colors.

HTML emails are “cutting edge,” pardon the expression. They are impressive and colorful and are a major part of marketing campaigns in all industries. Sending out a properly-coded and carefully designed HTML email says that you’re current

HTML Emails Are Different than brochures

• Inconsistent across email clients instead of exactly the same
• Much less expensive to produce and create
• More difficult to get it “just right” (design limitations)
• Completely different medium and delivery
• Less mobile than email for most people
• Different timing (in the moment rather than later)

HTML Emails Are Different than Web Sites

• More email clients to consider than browsers
• Much less CSS support (mostly just text formatting)
• Also more difficult to get it “just right” (design limitations)
• Tables are recommended above CSS layout for emails
• Explicit code is the name of the game
• Less time and audience attention to get your message across

HTML Emails Are Different than text emails

• “Pops” better out of an email box
• More to consider than just the content (in addition to the content)
• Plain text doesn’t break down (plain text is as consistent as it gets)
• Accessibility concerns with HTML emails that don’t exist with plain text

The basics of HTML email design

• Different email clients do different things and it’s hard to predict and test for everything.
• Concentrate on the lowest common denominator and make sure the content layout makes sense.
• Assume that images will be blocked and layout will break.
• Make sure the emails degrade gracefully. This means that alt tags need to be used, images should be used sparingly and table layouts should be as simple as possible.
• More time and effort should go into the motivation and the message rather than the visual design.
• Design is not a substitute for a relevant message.

Understanding email campaigns

Permission is king. If you didn’t get someone’s permission before you sent the email then it is probably considered spam. There are a lot of companies out there just yelling their name and products and, at best, they’re getting lost in the chaos. At worst, they’re generating negative attention for themselves. When it comes to marketing, bad attention isn’t just attention, it’s a brand killer.

Quality above quantity of recipients. If you have a list of 5,000 people that may not have heard of you before and might have interests that match your product, you have little more than a bullhorn and a crowd. If you have a list of 150 people that know what you’re offering and want to hear more, you have a captivated audience. It’s easy to assume that all people need to hear is what you’re offering and they’ll come running. The fact is, if there’s any sort of negative connotation to your brand (for example, showing up unnannounced in their email box), they’re not going to want what you’re selling. Strive for targeted lists of interested people instead of just bigger ones.

At the very least, your emails need to be relevant to your recipients. If someone signs up for a specific newsletter or a specific notification list, that does not mean they want everything that your institution can send out. Send less emails with better, more relevant content and you’ll see better conversion rates. In the same vein, if you can personalize emails, do it. Most HTML sending services allow you to input the names of your recipients (along with other variables) so take advantage.

Mass HTML email senders have been likened to a “loaded gun.” First, there’s nothing stopping you from spamming thousands of people, on purpose or accidentally. All it takes is one bad batch and your domain might get blacklisted from your recipients’ email cients. This is definitely a bad thing; getting blacklisted from Hotmail or Gmail means you’ve lost the ability to send to millions of people. The responsibility to send out relevant, targeted emails to the right people is yours.

A good thing to keep in mind, along with the other points so far, is that these bulk emails (or any emails) cannot be recalled once they are sent. It’s easy to shoot off an email to a co-worker or a friend and correct yourself later but it’s not possible with big email campaigns.

In the same vein, it’s important to test your emails in several different email clients. We test with Outlook 2007, Yahoo, Gmail, Hotmail, and the Windows Mobile 6 included email client. There’s no substitute for checking different email clients and your recipient list should give you a good idea of where to look. If you have home accounts with Cox or AOL, try these as well if you can. The best you can hope for is that all of the styles, images, and table layouts come through OK. The worst you should have is a broken design but text content that shows up legibly.

Last but not least, make sure you are up to date on the CAN-SPAM regulations. In a nutshell, here they are from the FTC website:

• It bans false or misleading header information. Your email’s “From,” “To,” and routing information – including the originating domain name and email address – must be accurate and identify the person who initiated the email.
• It prohibits deceptive subject lines. The subject line cannot mislead the recipient about the contents or subject matter of the message.
• It requires that your email give recipients an opt-out method. You must provide a return email address or another Internet-based response mechanism that allows a recipient to ask you not to send future email messages to that email address, and you must honor the requests.
• It requires that commercial email be identified as an advertisement and include the sender’s valid physical postal address. Your message must contain clear and conspicuous notice that the message is an advertisement or solicitation and that the recipient can opt out of receiving more commercial email from you. It also must include your valid physical postal address.

Basic HTML elements used

p
span
img
a
table
tr
td

Basic tags used

style=
width=
align=
colspan=
href=
cellpadding=
cellspacing=

Basic CSS properties used

background-color:
border:
color:
font-size:
font-style:
font-variant:
font-weight:
letter-spacing:
line-height:
list-style-type:
padding:
text-align:
text-decoration:
text-indent:
vertical-align:
white-space:
width:
*font-family: this doesn’t work in gmail but there’s nothing wrong with adding it for the other clients.

HTML Email Layout

Tables determine the layout. If you are not trained in table design, good for you, you’re on your way to being a great web designer. You do, however, need to have a solid understanding of them to build HTML emails.

No head, html or style tags are used as these are often stripped out by the email client before viewing. HTML editors might add this and, while it won’t cause any problems, it should be removed. Keep in mind, the big client that strips these is Gmail. If you’re not concerned about styles in Gmail, it is ok to use this element but make sure it appears WITHIN THE BODY TAGS, not before.

Be sure to close all HTML elements! Use an HTML checker like the one in PSPad to find errors easily.<br /> - Wrapper table should be used with a 98% width if a centered layout or background color is desired. Content section is a nested table inside the wrapper table. For full-width designs or left-justified designs without a background color, the wrapper is not needed.

For 2 or more columns, the “colspan” and “width” tags must be used together. Remember the spreadsheet model and add as many columns as you need with the first row of cells. Again, make sure to add a wrapper table if you want a background color or you want the design to be centered in the window.

Design for the preview pane of email applications. That means you’ve got about 500, 600 pixels tops for your email designs. Most email windows do not take up the entire screen (do yours?) and some people intentionally make them smaller. Make sure your main content section is slim, under 600 pixels, and that your logo, tag line, or another “grabby” piece of content is near the top-left corner. Some email applications, like AOL, allow for about 150 to 200 pixels to make sure your content will appear.

Styling your email

Simple CSS is widely supported and can be used in all HTML elements with a style tag. This is called “inline” styling and is the best way to apply CSS to an HTML file being sent. This is what I mean by “explicit;” all styling cues are added to each element inidividually. To style two different paragraphs the same, the same style tag and CSS properties need to be added to both. Keep in mind, sometimes the body styles don’t carry over; stick to colors and minor “throw-away” styles in case this element is tossed out.

Some sources recommend CSS shorthand to cut down on file size while others say that it should be written explicitly. Declarations like “margin: 0″ are usually safe but it might be a good idea to spell out font declarations completely. This helps the design process down the line.

Use images carefully and correctly in your design. Pictures, icons, and headers are great but can easily become cluttered and bloat the size of the email. Turn down image quality and use images that enhance your design or draw attention where you need it. Also, never send an all-image email. Some email clients block images as a default so your message might be lost and/or might be marked as spam.

Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design. Also, store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them.

General notes

• link element not supported, style elements barely supported so use in-line styles to be safe.<br /> Since <style> elements are unstable, selectors are as well.
• 530px is a safe width for certain clients and certain preview panes (AOL in particular). Not including AOL, 600px is maximum.

Gmail notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• Removes any style element and its content, even if it’s within the body element.
• The font size is bigger in table elements, so you’ll probably have to force it with font-style
• Gmail removes CSS rules with the property height.
• Gmail removes CSS comments found inline.
• Gmail doesn’t allow the url() value and will completely remove a CSS rule that uses it.
• Gmail is one of the only email clients that does not use the font-family: property
• Images are blocked by default but alt= tags are displayed

Hotmail/Live notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• The style element and its content is preserved if it’s inside the body element.
• Hotmail will completely remove any CSS rule that uses a url() as its value.
• Hotmail removes CSS comments found inline.
• Hotmail does not block images by default but Live does

Yahoo notes

• Keeps almost intact the complete original HTML sent and puts it directly in a div. So if you had any of these in the HTML, they will be found in the middle of the Yahoo! Mail HTML: DTD declaration, comments, html, head, title, style and body elements, etc. But, the DTD declaration won’t be taken in consideration by the browser since it’s in the middle of the page, same thing for the title element;
• Will rename the body, meta and link tags xbody, xmeta and xlink, so they will be “disabled”. This means that no external stylesheet can be linked to the document through the link element.
• Be careful with style elements; when replying or forwading this message, Yahoo! Mail will convert your style definition as plain text and your declarations will appear in the message.
• Does not block images by default

Outlook notes

• Outlook support varies greatly across versions; older versions have better CSS and HTML support
  head, html, meta, style elements are removed.
• img alt= tags are removed so images that are not shown will not be replaced with text.
• 2003 and 2007 blocks images by default

AOL9 notes

• “preview pane” is extremely tiny. Make sure to design your emails to peek out enough from the preview pane.
• HTML code needs an extra line break or two after the final /HTML tag, or you’ll see weird “equals signs” in your email
• Blocks images by default, alt= tags are not displayed

HTML coding sources

MailChimp HTML email guide

How To Code HTML Email Newsletters

HTML Email Tips for Web Designers

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

CSS support in webmail clients/a

Optimising CSS usage for email

A guide to CSS support in Email

Email marketing sources

Email Marketing Strategies - Email Marketing “Must Dos”

How To Build a Basic Email Marketing Capability