Bringing Email Development from 1996 to 2016
0 likes195 views
The document outlines the evolution of email development from 1996 to 2016, highlighting key technologies and tools like CSS, media queries, and task runners that have shaped the industry. It discusses the use of components, templating languages, and various coding practices, including CSS preprocessors and package managers. The content emphasizes the advancements made in email design and development workflows, showcasing how they have improved efficiency and functionality over two decades.
Bringing Email Development from 1996 to 2016
- 1. Bringing Email Development from 1996 to 2016
- 3. Let’s talk about emails
- 4. 1996 A.D.
- 5. Tables.
- 7. Ink
- 8. CSS!
- 11. Still caused some headaches
- 12. 2016 A.D.
- 13. Task Runners CSS Preprocessors BrowserSync Static Site Generators
- 14. Foundation for Emails 2 (yay!)
- 17. <table align="center" class="container"> <tbody> <tr> <td> <table class="button"> <tr> <td> <table> <tr> <td><a href=“#">Click Me</a></td> </tr> </table> </td> </tr> </table> </td> </tr> </tbody> </table>
- 18. Components.
- 22. <container class="lessons"> {{> logo-university}} {{> header}} <spacer size="16"></spacer> {{> body}} {{> footer-zurb}} </container>
- 24. <row class="collapse"> <columns> <p class=“lead”>...</p> <a target="_blank" href=""><img width="580" style="width: 580px;" src="" alt="Brandon explaining how designers can faith in aesthetics."></a> <spacer size="30"></spacer> <wrapper class="author-callout">
- 26. <button href=“...”> Check out the course </button>
- 27. <table class="button float-center”> <tr> <td> <table> <tr> <td> <a href=“...”>Check out the course</a> </td> </tr> </table> </td> </tr> </table>
- 28. <table class="button float-center" style="Margin:0 0 16px 0;border-collapse:collapse;border- spacing:0;float:none;margin:0 0 16px 0;padding:0;text-align:center;vertical- align:top;width:auto"><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz- hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#ff6908;border-collapse:collapse! important;border-color:#ff6908;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size: 16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text- align:left;transition:.25s ease-in;vertical-align:top;word-wrap:break-word"><table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical- align:top;width:100%"><tr style="padding:0;text-align:left;vertical-align:top"><td style="-moz- hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#ff6908;border:2px solid #2199e8;border- collapse:collapse!important;border-color:#ff6908;color:#fefefe;font-family:Helvetica,Arial,sans- serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text- align:left;transition:.25s ease-in;vertical-align:top;word-wrap:break-word"><a href="http:// zurb.us/1XhYHw3" style="Margin:0;border:0 solid #2199e8;border-radius: 3px;color:#fefefe;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size: 16px;font-weight:lighter;line-height:1.3;margin:0;padding:8px 32px 8px 32px;text- align:left;text-decoration:none">Check out the course</a></td></tr></table></td></tr></table></ center></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans- serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0!important;text- align:left;visibility:hidden;width:0"></th></tr></table></th></tr></tbody></table></td></tr></ table><table class="spacer" style="border-collapse:collapse;border-spacing:0;padding:0;text- align:left;vertical-align:top;width:100%"><tbody><tr style="padding:0;text-align:left;vertical- align:top"><td height="20px" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border- collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size: 20px;font-weight:400;hyphens:auto;line-height:20px;margin:0;mso-line-height- rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> </td></ tr></tbody></table>
- 29. Client Support
- 30. How do I get started?
- 31. Task Runners
- 32. gulpfile.js import gulp from 'gulp'; import plugins from 'gulp-load-plugins'; import browser from 'browser-sync'; import rimraf from 'rimraf'; import panini from 'panini'; import yargs from 'yargs'; import lazypipe from 'lazypipe'; import inky from 'inky'; import fs from 'fs'; import siphon from 'siphon-media-query';
- 34. Variables $grid-column-count: 12; $global-padding: 1rem; $column-padding-bottom: $global-padding;
- 35. Programatic @for $i from 1 through $grid-column-count { td.large-#{$i} center, th.large-#{$i} center { … } }
- 36. Package Managers
- 37. Package.json
- 38. Package.json "foundation-emails": “^2.2.1” "browser-sync": “^2.11.0”, "gulp-inline-css": "^3.0.0", "gulp-litmus": “0.0.7", "gulp-sass": “^2.1.0", "inky": “^1.3.6", "panini": "^1.3.0",
- 41. Sass.
- 43. Partial
- 45. Variables
- 46. Functions!
- 48. The Flat File Generator
- 51. Partials
- 52. Partials
- 53. Pages
- 54. Page
- 55. Custom Data
- 57. Layout
- 58. Prototyping hasn’t been faster
- 61. npm start
- 62. Runs Ink Runs Panini Compiles into dist folder Listens for changes
- 63. npm run build
- 65. npm run zip
- 66. Zips it all up.
- 67. npm run litmus
- 68. Sends it off to Litmus
- 69. config.json
- 70. Sends it off to Litmus
- 71. So where does this bring us?
- 72. 2016 A.D.
- 73. Thanks!