Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alexander Sobieski
6,555 PointsProject and/or Deep Dive on HTML Emails?
I assume there has been discussion on this topic... but I'm curious to know if/when Treehouse may implement something like this.
Pro: It's a crucial skill to know for designer/developers.
Neutral: It's fast-changing (in terms of devices), and while some clients accept media queries and have upgraded support for more CSS3, other seem to regress. There are a lot of client-specific things to know (ex: yahoo restyling links, google stripping-out the head, making @media queries useless and breaking templates, etc.)
Con: One must (kinda) un-learn all the "don't use html for structure, keep things semantic, and use css for style" -- so it could confuse people who are still learning the basics.
In my experience, there is a lot more than "use nested tables, alt tags, bring css inline, avoid floats, avoid white space in table cells, and test test test" -- There's the whole Transactional email, versus Marketing Email, etc. -- and there's the whole UX aspect of using email client analytics and list segmentation to decide how an email should degrade, and if one should design for all clients (or most).
Your Thoughts? ... Discuss!
5 Answers
Chad Shores
Courses Plus Student 8,868 PointsI'd love to take this course. I'm especially curious about using high-dpi images in a 'retina-ready' email.
Alexander Sobieski
6,555 PointsGood call!
(one way is to use normal res images and have a duplicate image (hi res) with the CSS set to "display:none" -- you can then use CSS in the head with an @media query to target apple devices and have it change the "normal" to "display:none" and the hi-res to "display:table" (or display: block, depending on how you're nesting). -- if you open Gmail on an iOS device, you'll get the ugly image because gmail strips the head... but if you use Apple's mail client, it will keep the head and read the @media query... thus swapping the two images.)
...but the thing is, that this is a lot of work to do for like < 20% of your list (maybe), and it gets into the whole, "keep it simple" versus "keep the experience consistent" -- and so on.
Chad Shores
Courses Plus Student 8,868 PointsYou're right about that.
Cool blog, btw!
Casey Hodgson
2,092 PointsI'd certainly enjoy going through this type of course, and the Op is right, it is something we need to know nowadays and I know bugger all about it, except for the Google stripping the head.
Already, I'm intrigued by the client specifics!
This would be a great and worthy addition to the TT Library. :-)
Alexander Sobieski
6,555 PointsThanks @charles!
Agreed/thanks @Casey