10 ms·
HTML Email Boilerplate
- benatkin 15y agoI'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.
- JoelSutherland 15y agoAgreed. Not to mention the very large percentage of people that open your emails in a web client on a 1024px wide screen.
- skrebbel 15y agoOr use an email client with a horizontally split screen.
- benatkin 15y agoIt 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.
- oddthink 15y agoLast 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."
- ianl 15y agoWouldn't a fluid approach be better? I haven't done much HTML/CSS in the last year.
- iambot 15y agoI wouldn't recommend fluid layouts with email, most email clients are stuck on HTML 3.2 and have limited CSS support.
- aw3c2 15y agoDefinitely not. Short lines are easier to read. There is a reason why 72 or 80 characters are normal.
- ugh 15y agoFluid might work, depending on whether mail clients support max-width. You can cap the maximum amount of character per line like that.
- JacobAldridge 15y agoMailChimp 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.
- eru 15y agoIsn't it the browsers responsibility to figure out how to layout your content?
- ssharp 15y agoIn 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.
- JacobAldridge 15y agoAnd 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.
- ugh 15y agoMy 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?
- esdott 15y agoThanks 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.
- benatkin 15y agoYou'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.
- joshuacc 15y agoLooks like that has been changed. https://github.com/seanpowell/Email-Boilerplate/commit/456632c18eda434c473202437eadcd5b6c3c09bb https://github.com/seanpowell/Email-Boilerplate/commit/45663...
- reemrevnivek 15y agoI'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...
- clobber 15y agoThis is correct. Emails should be no wider than 600px
- eli 15y agoRecent 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.
- SamColes 15y agothis is useless. Just for a start it's way too wide. e.g. Hotmail cuts off at 610px or so.
- riklomas 15y agoCampaign Monitor recommends having emails at a maximum of 600px (near bottom of link): http://www.campaignmonitor.com/design-guidelines/ http://www.campaignmonitor.com/design-guidelines/
- esdott 15y agoHey 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 15y ago600px 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 15y agohey 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.
- PetrolMan 15y agoInterestingly 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 15y agoHey PetrolMan - I am using Firefox 4 also and did not receive that message. I also updated "The Schwarz." Can't believe I missed that.
- davidcollantes 15y agoHTML and email are two things that do not go together well(IMHO). I prefer plain text.
- eneveu 15y agoTell 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 15y agoIt 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.
- JonLim 15y agoWhy not offer both? A well made HTML email will make it easier for your recipients to actually read your email.
- bxr 15y agoHTML 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.
- andrewcooke 15y agothis isn't guaranteed. for example, when i subscribed to groupon (in chile) there was no text alternative.
- 15y ago
- JonLim 15y agoI've taken a look at it and placed it into the PostageApp (http://postageapp.com 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 15y agoAlright, 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 15y agohey 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 15y agoAs 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 15y agoPlease 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.
- alain94040 15y agoThat 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.
- ItsTrueYouKnow 15y agoIf 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.
- iambot 15y agowhich 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)
- ItsTrueYouKnow 15y agoIf 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.
- 15y ago
- joshuacc 15y agoIt 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/ https://github.com/seanpowell/Email-Boilerplate/
- a3_nm 15y agoWhy the ridiculously elaborate design? It's probably pretty, but it wastes space...
- yock 15y agoPlease 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 15y agoCan I safely assume the downvotes are from those who think blocking the user's site interaction with a full screen lightbox is good UX?
- bryne 15y agoI 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.
- thaumaturgy 15y agoI 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 15y agoI'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.
- 15y ago
- donbronson 15y agothe templates that mailchimp put on github seem much more useful https://github.com/mailchimp/Email-Blueprints https://github.com/mailchimp/Email-Blueprints
- Kwpolska 15y agoHTML emails SUCKS. Use goddamn plaintext.
- zavulon 15y agoIn 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 15y agoXHTML sucks. Transitional does even more. So does HTML mail. Use plaintext for god's sake.
- hessenwolf 15y agoI'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 15y agoHTML 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 15y agoThey 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.
- SeanLuke 15y agoMIME handles inline attachments with aplomb. What does this have to do with HTML?
- hessenwolf 15y agoErm, 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.
- autarch 15y agoThis 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.
- rmk 15y agoHTML format email is an abomination.
- TerraHertz 15y agoHTML 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.
- Wickk 15y agoReally 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 15y agoGroupon 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.
- NHQ 15y agoI am surprised that gmail is such a small player.
- st0p 15y agoI'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 15y agoOnce upon a time HTML email was used exclusively for spam. The hate for it never subsided.
- barrkel 15y agoI'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 15y agoBoilerplate 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 15y agoBoilerplate 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 15y agoThanks for explaining that; I was genuinely missing the point, and frankly am still surprised that so many people are impressed with it.
- deepandmeaning 15y agoI 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.