https://github.com/m-j-robbins/get-off-the-table

Experimenting with building HTML emails without <tables>
https://github.com/m-j-robbins/get-off-the-table

email-geeks

Last synced: 3 months ago
JSON representation

Experimenting with building HTML emails without <tables>

• Host: GitHub
• URL: https://github.com/m-j-robbins/get-off-the-table
• Owner: M-J-Robbins
• License: mit
• Created: 2017-08-30T15:25:50.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-03T12:40:01.000Z (over 5 years ago)
• Last Synced: 2025-01-14T17:15:26.737Z (5 months ago)
• Topics: email-geeks
• Language: HTML
• Homepage:
• Size: 8.79 KB
• Stars: 56
• Watchers: 24
• Forks: 13
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Get Off The Table

![cat sleeping on a table](http://blog.gorebel.com/content/images/2017/08/GetOffTheTable-1.jpg)

Building HTML emails without <tables>

I'm trying to create an email template using a number of common style components, but without the use of any layout tables.

* 600px centered container

* Heading tags

* Paragraph tags

* Images

* Nested section with different width and background

* Multi column layout

* Ordered and Unordered lists

* Divider line

* CTA button

* Additional container outside of the main container

The main issue here is that Outlook doesn't render HTML or CSS correctly as they user Microsoft Word as a rendering engine.  However I believe we can manipulate Outlook into working with a `
` based layout using `mos-` code.


**Realy example** Litmus sent out [their monthly newsletter](http://pages.litmus.com/webmail/31032/472083994/fce3a6f35bd9f5aaff3745a3cb048216) using this technique.