
HTML Email Boilerplate - joshuacc
http://htmlemailboilerplate.com/
======
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.

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

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

~~~
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?

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

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

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

~~~
ugh
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?

~~~
eli
_Are mail apps so backwards that fluid layouts are not possible?_

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

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

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

~~~
JonLim
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!

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

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

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

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

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

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

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

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

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

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

~~~
joshuacc
Much better. Thanks!

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

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

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

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

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

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

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

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

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

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

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

