HTML Email Boilerplate

[autarch]

This looks great, but the license includes the Creative Commons non-commercial clause, which basically makes it unusable, since it's not compatible with open or closed source usage!

I wrote the author a note via Github asking him to consider changing the license.

[hrabago]

There's a Feedback link right there on the page as well. I used that to echo this feedback.

[yock]

Please get rid of your browser evangelism, no matter how clever it might be. I know very well that I shouldn't be using Internet Explorer. If I had any choice in the matter, I wouldn't

[patrickaljord]

> If I had any choice in the matter, I wouldn't

I live in Peru, most people still use IE out of ignorance here, not because they can't. Browser evangelism is sure useless to an HN reader but it's very needed for common users and I encourage it very much.

[yock]

Can I safely assume the downvotes are from those who think blocking the user's site interaction with a full screen lightbox is good UX?

[antidaily]

IE8 screenshot. http://i.imgur.com/ZFDaO.png For the record, it works great in IE9.

[natural219]

Sorry if this is obvious, by why are you restricted to IE? I believe you, I just don't understand why.

[benatkin]

I'm not sure having an email be 900px wide (the table has 3 300px wide cells) is a good idea. Wouldn't that get a horizontal scrollbar on the iPad no matter the orientation? When it's horizontal there's a sidebar; when it's vertical it's only 768px wide.

[JacobAldridge]

MailChimp templates are all 600px wide, as a comparison, and that's what they recommend. It's annoying, since so many people have large monitors (notably me - so much white space around my drafts), BUT as you point out so many recipients are viewing emails on mobile devices (phone, tablet, even netbook-size laptops) as well as webmail clients and the Outlook preview pane.

[esdott]

Thanks for the input benatkin. The table was really just an example but I definitely agree that a more standard width table would be better. I updated it to 600px in width.

[joshuacc]

Looks like that has been changed.

https://github.com/seanpowell/Email-Boilerplate/commit/45663...

[JoelSutherland]

Agreed. Not to mention the very large percentage of people that open your emails in a web client on a 1024px wide screen.

[ianl]

Wouldn't a fluid approach be better? I haven't done much HTML/CSS in the last year.

[eli]

Recent versions of Outlook put the message to the right of the message list. I'm pretty sure you'll get terrible horizontal scrollbars on a 900px wide message.

[reemrevnivek]

I'm not sure having a web page be 1300px wide is a good idea either.

Seems like the designers of both must be using widescreens...

[JonLim]

I've taken a look at it and placed it into the PostageApp (http://postageapp.com) template system and it immediately spat out four issues:

- width CSS property is not supported by Outlook 07, Notes 6 and 7

- height CSS property is not supported by Outlook 07, Notes 6 and 7, Blackberry

- line-height CSS property is not supported by Notes 6 and 7, Palm Treo (Palm Garnet OS), Blackberry

- display CSS property is not supported by Outlook 07, Palm Treo (Palm Garnet OS), Blackberry

Let me fiddle with the code, and try to fix this up. And like the others, the three tables with 300px cells are not the best of ideas.

[JonLim]

Alright, took a second look, I guess the issues with those browsers aren't so mission critical, but probably still best not to use a 900px width.

[ItsTrueYouKnow]

Please don't send HTML email, there is almost never a scenario when it is necessary. All it does is create larger emails, have redundant information (most HTML emails also send a plain text counterpart), make reading email more difficult (especially if you are using a terminal mail client or are visually impaired), and allow for obnoxious email styling.

HTML Email, just say NO.

[davidcollantes]

HTML and email are two things that do not go together well(IMHO). I prefer plain text.

[eneveu]

Tell that to the business executives and the marketing departments :)

I also prefer plain text, but I'd rather have useful tools to deal with the needs of the business, while offering plain-text as an option for people who prefer it.

[systemtrigger]

You and I are in the minority. Imagine if Groupon sent their daily flyer in plain text: Click-through would plummet.

[pbhjpbhj]

Out of interest - do you paint/decorate the walls in your home. Do you wear coloured (ie dyed) clothing? Do you have a business card that has more than plain-text on it? When you return from a holiday and are telling friends about it, do you hand them a type written note that describes what other people would normally put in a photo?

Do you eschew the use of typographical techniques that aid reading, both speed and comprehension, such as emboldening, headings, breaks, italics, font and colour changes?

I never understood this "email should be only plaintext" argument. Getting information across is easier with options for images and textual enhancements. Do you use lynx for web browsing?

When the KMail people were refusing to allow people to use HTML to reply to HTML emails properly one guy argued with me that to send photos to family members I should use FTP, send an address so they could log on and dl the photos to view - that this was somehow better than having the images there ready to view in the MUA.

[mise]

I agree - but only for homemade email campaigns.

Aweber and Mailchimp, for example, provide the basics needed for sending HTML plus plain text emails.

Sorry, I haven't been able to load the site in this post as it's not loading, so I can't comment on any specifics.

[JonLim]

Why not offer both? A well made HTML email will make it easier for your recipients to actually read your email.

[lautis]

HTML email is like violence: if it isn't working, you're not using enough of it.

[donbronson]

the templates that mailchimp put on github seem much more useful https://github.com/mailchimp/Email-Blueprints

[barrkel]

I'm puzzled as to why this is upvoted so highly. It's just a very wide website with a picture and some code on it. "Boilerplate" to me means the legalese at the bottom mandated by corporate lawyers, but I don't see much in the way of boilerplate here.

Is it a template for emails that look like the website? I'd ignore any emails that look like this website, but then I'd never see them, as I don't have HTML email enabled by default, for lots of reasons.

[joshuacc]

Boilerplate according to Wikipedia is "any text that is or can be reused in new contexts or applications without being changed much from the original."

Coding HTML emails is a very painful task since CSS support is spotty and there are a wide variety of email clients with strange quirks in almost all of them. In order to get things to render reasonably consistently you have to use some really ugly code with tables for layout and inline styles all over the place.

This project collects all (or most) of these hacks into one template that is pretty easy to modify.

[biot]

Boilerplate may not be the best word... I would have called it "skeleton code" or something along those lines. And the answer to your question is right there in the big box on the site: "This website and its sample code creates a template of sorts, absent of design or layout ...". So, no, it doesn't look like the website or much of anything at all save for a sample line of text, a sample image, and a sample table... all of which you'd delete and replace with the style and content you wish your email to have.

[joshuacc]

It might be helpful to have a clearer link to the GitHub project on the site so people know that they can fork it easily.

https://github.com/seanpowell/Email-Boilerplate/

[Wickk]

Really we can stop saying HTML email sucks, we get it. I don't like it either but every other comment seems to be saying this.

That said, in this day and age is an HTML email even, neccessary? An incredibly large amount of users these days don't even bother checking their email unless it's something specific they're looking for. Social Networking has made a large footprint in that market and a status update as to new products/services gets just as much attention.

[petercooper]

Groupon might have a bone to pick with that. E-mail is still incredibly popular and people are still reading it. I've moved more of my attention to e-mail from blogging, even, because it gets far better engagement in my niche.

[SamColes]

this is useless. Just for a start it's way too wide. e.g. Hotmail cuts off at 610px or so.

[riklomas]

Campaign Monitor recommends having emails at a maximum of 600px (near bottom of link):

http://www.campaignmonitor.com/design-guidelines/

[esdott]

Hey SamColes - The table itself was just an example to show setting up a table properly (not necessarily a view on how wide it should be). The whole width question is a more of a design call than anything else. I am trying to keep it as design-free as possible.

There are however many interesting uses for wider than normal emails. In any case, I updated the example table to be 600px wide.

[deepandmeaning]

I found the hacks for display issues in various clients to be very helpful.

It's increasingly difficult to design HTML email templates which render well across all clients, this usually leads to design for the lowest common denominator. Usually Outlook and Gmail.

I'm sure there are loads of considerations for ISP's with regard to spam and other issues, but forcing design/rendering of HTML to 1990's type style and functionality is rather restrictive.

At some point I hope things will change, but with the popularity of mobile clients growing (and their small screen issues), I suspect if anything it will not.

[PetrolMan]

Interestingly the site won't render correctly for me in Firefox 4. I'm getting a nice error about lack of HTML5 and CSS3 support.

And, as a fan of Space Balls, the creator misspelled "The Schwartz"...

[st0p]

I'm really not understanding all the hate against HTML email. To me it seems like saying: "Ascii text is enough, who needs nicely designed word documents or websites"

Also, all our communications (website, snail-mail letters) use our corporate branding. So why not use it in our emails?

[brlewis]

Once upon a time HTML email was used exclusively for spam. The hate for it never subsided.

[a3_nm]

Why the ridiculously elaborate design? It's probably pretty, but it wastes space...

[NHQ]

I am surprised that gmail is such a small player.

[rmk]

HTML format email is an abomination.

[TerraHertz]

HTML email allows people who are incapable of expressing their ideas in readable plain text, to ALSO impose their barbaric stylistic tastelessness on you, the recipient.

[Kwpolska]

HTML emails SUCKS. Use goddamn plaintext.

[Kwpolska]

XHTML sucks. Transitional does even more. So does HTML mail. Use plaintext for god's sake.

[hessenwolf]

I'll just pop upstairs to tell my bosses and upper managers that their waterfall charts of PnL for the quarter will be arriving as ascii art.