Hacker News new | past | comments | ask | show | jobs | submit login
HTML Email Boilerplate (htmlemailboilerplate.com)
387 points by joshuacc on June 7, 2011 | hide | past | web | favorite | 110 comments



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.


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


I just updated the license to the MIT license (should have just used that from the start).


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


> 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.


Telling people they're using a crappy browser is a service. Preventing them from using your site is a disservice.


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?


I don't think I'd even mind so much if it weren't transparent, but it's pretty repulsive.

As some other commenters noted, the site tries really hard as well but 1300-px-wide content is awful in any light. It's just form, not function, but the irony from a site that pushes the uniform display of email and uses (web and email) resolutions that most users can't see without scrollbars isn't helping the message any.


I sympathize with you -- and agree that there are better ways to communicate this to the user -- but there's good reason for some kind of "browser evangelism".

I used to spend half of my time when building a new site on its structure, content, layout, etc., and then the other half on trying to get it to work with the various Explorers. IE 8 did not improve that situation, and neither has IE 9. Unlike this website developer, I just gave up on website development for people altogether -- it just wasn't worth it anymore.

I know a lot of people are restricted to IE for one reason or another, but at this point, the only way the situation will improve is if developers start doing some effective "evangelism".


I've found the easiest solution to this is to pay about $150 and let the folks at psd2html -- or similar -- handle all of that for me.


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


I posted the link into Yammer, which tries to find the most significant image for the thumbnail. I couldn't figure out where that image came from.


Tineye suggests that it comes from Spaceballs - or at least, of the other similar images it finds, most have Spaceballs in the filename.


It's from the movie Spaceballs.


Thanks, I knew what the image was, just not why it appeared as the thumbnail.



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


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.


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.


My Mail window is at most 700px wide. That’s about 400px to 500px for the content. Most of the text-only mails I receive fit comfortable in that space without any scrolling and the line length is just perfect (60 to 80 characters per line).

Why would I want my Mail window to be any bigger? I have all the space I need for comfortable reading and filing and more than half a screen to do something useful with. I don’t really see how the size and resolution of the monitor figures into the size of the window of your mail app at all.

Yes, displaying a list with as many messages as possible and as many mailboxes as possible for comfortable filing might require additional space (beyond the 700px I like) but that seems to be inconsequential for the size with which you display the actual email message (my 400px to 500px), i.e. you don’t have to maximize the window of your mail app to achieve that.

Anyway, why use fixed width layouts at all? Are mail apps so backwards that fluid layouts are not possible?


Are mail apps so backwards that fluid layouts are not possible?

Outlook uses Microsoft Word's HTML rendering engine. So, in short, yes.


Isn't it the browsers responsibility to figure out how to layout your content?


In a perfect world, yes.

In reality, you can't trust all browsers to behave the way standards dictate. If you're doing business online, through email, etc. you need to be able to reach as many people as possible and that may mean sending 600px wide emails instead of 900px.


And in case my original point lacked context, I was talking about marketing for a business to customers - even B2B has to assume a variety of customers that have little to no technical skills and aren't opening emails on their 19" laptop.


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.


You're welcome. It's just an example but it should be ready for people to send to themselves, look at on their devices, and see if they like it. That's how HTML 5 Boilerplate works. The first thing I did after I browsed to HTML 5 Boilerplate on my laptop was open it up on my phone.



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


Or use an email client with a horizontally split screen.


It seems you mixed up horizontal and vertical splitting. It happens a lot, I'm afraid. I wish it didn't happen so often. It's tedious to clear up such basic confusion when there are so many important user interface challenges to discuss.

Also 900px wouldn't be a problem if not for a vertical split. 900px < 1024px. JoelSutherland is assuming that the window is divided, with some kind of a navigation pane taking up part of the width. This is the case in most email clients.


Last I checked, horizontal and vertical splitting was ambiguous, but you sound very sure your way is right. Do you have a reference to support your confidence?

For example, both emacs and the Java JSplitPane call a "horizontal split" a split of the horizonal axis, resulting in two left/right panes. Meanwhile, vim calls the same operation a "vertical split."


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


I wouldn't recommend fluid layouts with email, most email clients are stuck on HTML 3.2 and have limited CSS support.


Definitely not. Short lines are easier to read. There is a reason why 72 or 80 characters are normal.


Fluid might work, depending on whether mail clients support max-width. You can cap the maximum amount of character per line like that.


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.


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...


This is correct. Emails should be no wider than 600px


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.


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.


hey JonLim - I am definitely open to any input. For email I see people take a two pronged width approach a lot. Setting the width like "width=XXX" and style="width:XXXpx." Thanks for checking it out.


As the others have been saying, you probably want to limit the width to 600px, just because many email clients will have trouble with larger than that.

However, we actually don't use tables when it comes to our templates; we apply styles to divs and ps when we flatten the HTML and CSS.

Happy to chat further if you're interested!


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.


Every one of your posts in this thread -- every single reply -- seems entirely shortsighted.

It's very obvious you've never used an opt-in email list to build and grow a commercial business.

You think Groupon (and the ilk), or Newegg, etc, would see the huge returns from email they do if they were sending out plaintext?

The only thing that really bothers me about your posts, though, is that you try to say things with such a tone of authority. But you just don't know what you're talking about.


Your argument is valid for standard correspondence. It is not valid for commercial marketing. A well-designed HTML email will look stunning in the vast majority of email clients. If marketing ROI is the goal, it is best to ignore the edge cases you mention.


I very frequently write and receive standard correspondence that benefit massively from employing appropriate use of bold, italics and bullet points.

I'm against over-using formatting, but just because some websites are ugly it doesn't mean that the web in general doesn't benefit from being marked up for presentation.

This plain-text only crusade is a sad remnant from a time when the individual bandwidth consumed by each message actually mattered and/or there was a real risk that some people for valid reasons had an e-mail client incapable of displaying HTML emails. Neither is valid any more, and what's more, there's a rich selection of quality e-mail clients available that will happily only show you the plain text version of the e-mail you're looking at: Be liberal in what you accept and conservative in what you send.


Is a scenario where you actually want your emails to convert to sales not necessary?


No. It's called spam and there is a special circle of hell reserved for people who send it. Keep that shit out of my inbox.


Do you have an issue with opt-in HTML emails?

I don't think this site is advocating spamming at all, nor do services designed to facilitate sending HTML emails (MailChimp, Campaign Monitor, etc.)


That boat sailed a long time ago.

I do like pleasant stuff. Please, if you want me to read your email, don't send me plain text emails.


If you care more about how the email looks than the content, then odds are that the people who you are sending the email to do not want to receive it.

It's only when I don't know you and you're trying to sell me something that you need to make the email visually appealing.


That's a false dichotomy. In no way does the appearance of an email impact the quality of its content or vice versa. You obviously do not care about the appearance of emails (or rather, you prefer the appearance of plaintext emails), but others, like myself, do. Fortunately, any decent email system will provide the content to suit both of our preferences.


which while i understand and concur with your hatred of unsolicited sales emails, is the point of them :) much the same as ads on TV, i don't want to see then but if im going to be forced to, at least don't make them offend my eyes,

(not much can be said for badly designed marketing messages though)


If communication that you actually wanted to receive was sent in plain text then you could easily filter HTML email and be rid of it. Spammers aren't going to stop sending HTML mail because it is so useful for what they do, but no one else needs it.


This is incorrect. Just because spammers use HTML email doesn't mean HTML email is evil.

To give a very practical example, I sign up for newsletters from FontShop so I can be updated about new fonts. The email includes images to show how the fonts look. The utility of these emails would be drastically reduced if they were to use plain text.

Reference: http://www.fontshop.com/blog/newsletters/june2011a/


I prefer HTML emails as they take me seconds to visually scan to see if anything is of interest. If the emails were a big wall of text, I would have to spend several minutes reading everything which is a huge waste of my time.

There's a reason why in the real world, brochures and flyers aren't done up on a typewriter. People are visual creatures and if you're running a startup and marketing products or services and you're not using HTML email, you're doing a disservice to your investors, shareholders, prospects, and customers because the vast majority of people would rather opt-in to receive emails that look good.


Anything other than HTML email is rude if you're sending people your latest pictures.


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


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.


It is precisely because I'd rather never read anything from 'business executives and marketing depts' that I use a text-only email client. Email is for concise communication of ideas via text. If you need pictures and pretty layouts to sell your ideas, email me a link to a web page. (Which I probably won't visit.)

There's ONE THING ONLY that html email is good for. And that's alerting me to a sender's failure to understand the fundamental natures of the different coding schemes for the written word.


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


I used to get Slashdot sent to me as plain text. It was a sheer delight to read and I really miss having it formatted that way. I would pay a premium for it.

Maybe it is just that most people have never been exposed to properly formatted text emails?

I'm sure people find most of the websites they visit and the emails they read, filled with columns of extra garbage, to be cumbersome and difficult to read. Executives think that's what people want, but I doubt there has ever been an thorough examination of all the formats and their effects on people.


The reason those companies send HTML emails is because they convert better. It has nothing to do with "executives" liking them more. The deal and advertising businesses are very metrics driven and if text performed, they would use it. It doesn't do nearly as well, especially for products.


>I used to get Slashdot sent to me as plain text.

Comment nesting must have been awful. Or did you cheat and use pseudo-graphical characters to overcome the obvious limitation of plain-text for such a purpose?


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.


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?

It is interesting to note that some of the most important works produced by mankind can be reproduced in essence without these aids [1]. Moreover, these well-meant aids are perceived as undue distractions and hence disabled by many [2], most of which are not die-hard plain-text users.

[1] http://www.gutenberg.org/

[2] https://www.readability.com/


Both your examples are self-defeating.

Gutenburgs top projects are Kama Sutra, Sherlock Holmes and Punch - whilst Burton's original translation was text only I think you'd be hard pressed to argue that the first of these has no need of illustration. The second is a [series of] novels, plaintext is fine there though often even novels have images ("plates") of some kind. The third, Punch is probably best known for it's illustrations and it's conveyance of political satire specifically through imagery (eg http://www.gutenberg.org/files/20759/20759-h/20759-h.htm).

Readbility uses background colour highlighting, keeps some formatting such as pulls and retains images.

You're welcome to prefer plaintext, some prefer black and white TV I'm sure, I just find it rather lacking in presenting the diverse types of information I wish to send and receive by email.


The moment the work in question has as many as one image (or video, for that matter), you obviously neeed to leave plain text. My humble and non-representative point is that text is generally best left plain. The written language is powerful enough to avoid all these devices, which soon enough can become distractions.


The question isn't whether important documents can be reasonably be represented as plain text. Clearly many can. The question is whether the typographical techniques listed are an aid in reading. And just as clearly, they are.

And just to note, Readability actually preserves bold, headings, breaks, and italics, while providing a different set of fonts and colors based on the user's preferences.


My bad on Readability, as I made an assumption without checking.

I see what you are saying, and I partly agree, but I am of the opinion that language is rich enough to emphasize relevant points without further aids. But it's becoming SO common to use _SO_ many aids that this is already standarized with two levels in HTML, namely the em and strong tags. How long until we need a third semantic level of emphasis? Of course, I enjoy freedom and choice, so assume people/the market must prefer your style by and large.

For the record, I know that italics typography has been used for centuries as an aid in emphasis. Still, I humbly feel this is an unnecessary artefact, which more often than not turns into a crutch.


I like how you went to ALL-CAPS because you lacked the ability to add proper textual emphasis and then that you felt the need for more emphasis still and again broke writing conventions to indicate you wished to add underlining. Made your case for plain text perfectly.

Buttons for clothing have been invented, pretending that my coat doesn't need buttons and then holding it together with my arms so I don't freeze doesn't make sense to me.


I tried to be ironic with my use of caps... I clearly failed.


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.


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


HTML emails already offer both, hidden in the mime message is a plain text version. Clients just usually don't show the plain text one when there is an html version.


this isn't guaranteed. for example, when i subscribed to groupon (in chile) there was no text alternative.


multipart/alternative isn't automatic. I create one for OurDoings email updates, but almost every mail service mangles it on forwarding.


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


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


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.


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.


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.


Thanks for explaining that; I was genuinely missing the point, and frankly am still surprised that so many people are impressed with it.


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/


Hey joshuacc - I changed the color so that it didn't blend in so much. hope that helps and thanks for the input.


Much better. Thanks!


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.


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.


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


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

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


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.


600px may be fine for Hotmail, but I think the bigger question is how to deal with people reading this HTML mail on mobile clients with smaller screens. People are reading alot of email on mobile devices and its increasing. A table 600 px wide is still to wide for most devices.


hey ryanwatkins - one great way is to @media queries to set specific design for mobile and tablets. it is something i am working on for next release.


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.


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"...


Hey PetrolMan - I am using Firefox 4 also and did not receive that message. I also updated "The Schwarz." Can't believe I missed that.


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?


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


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


I am surprised that gmail is such a small player.


HTML format email is an abomination.


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.


HTML emails SUCKS. Use goddamn plaintext.


In the immortal words of Marlo Stanfield: "You want it to be one way. But it's the other way."

Whether you like it or not, most business emails will be sent in HTML. People want it to look nice, people want to be able to put links in their emails so recipients can click through and they make money, they want to put tracking codes, etc.

Regardless of anyone's personal preference, emails will be in HTML for a long, long time.


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


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.


HTML email still handles that sort of thing poorly. I'd rather receive reports like that as PDF attachments. I can view those almost anywhere, and they're resizable.


They also have lots of tables, are easy to create, especially because of the stylesheets and support for html output in several different languages, and are easy to copy and paste from.

How would I make the pdfs? Please keep in mind that these are internal corporate emails, over several counries and firewalls, with a highly restrictive IT system.


MIME handles inline attachments with aplomb. What does this have to do with HTML?


Erm, the emails also have tables?

edit: I am admitting I don't know how to put tables in a mime email. I also didn't realise I could embed images.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: