EMAIL

EMAIL

TIM HOLMAN

THINGS THAT MAKE SENSE

THINGS THAT MAKE SENSE

WILL TO LIVE

UNDERSTANDING OF LIFE

things that don't exist

a/b@domain.com

{}@domain.com

m*'!%@something.sa

tu!!7n7.ad##0!!!@company.ca

someone@somewhere.com.

%@com.com

!#$%&'*+/=?^_`{|}~.-@com.com
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])
body {
 color: red; /* all browsers */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
 _color : orange; /* IE6 */
}

SENDER

SENDER

SUBJECT (META)

SENDER

SUBJECT (META)

DESCRIPTION

things that don't exist

Meta descriptions in emails

    <table>
    </table>
<table border="0"
       cellPadding="0"
       cellSpacing="0">
</table>
export default function Table(props) {
  const { children, ...restProps } = props
  return (
    <table border="0"
           cellPadding="0"
           cellSpacing="0" {...restProps} >
      {children}
    </table>
  )
}
<Table class="hidden">
  <tr>
    <td></td>
  </tr>
</Table>
.hidden {
  display: none;
  max-height: 0;
  overflow: hidden;
}
<Table class="hidden">
  <tr>
    <td>
      This is a cool email summary!
    </td>
  </tr>
</Table>

&nbsp;

&zwnj;

deaf‌ly deafly

WE'RE SIDETRACKED WHO CARES

&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;

<Table class="hidden">
  <tr>
    <td>
      This is a cool email summary! &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
    </td>
  </tr>
</Table>

DESCRIPTION

<table border="0"
       cellPadding="0"
       cellSpacing="0"
       style="display: none;
              max-height: 0;
              overflow:hidden">
  <tr>
    <td>
      This is a cool email summary!  &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;  &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;  &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; 
    </td>
  </tr>
</table>

email

<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
  <tbody>
    <tr>
      <td width="100%" align="center">
        <table border="0" cellpadding="0" cellspacing="0" align="center">
          <tbody>
            <tr>
              <td align="center">
                START BUILDING THE EMAIL HERE
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
</table>

margin: auto

<img src="file.src"
     alt="humble image"
     width="500"
     height="500" />
text-decoration: none;
border: 0;
outline: 0;
padding: 0;
display: block;
width: 100%;

image

<a href="link"
   class="button">
  {children}
</a>
.button {
  font-size: 0.9rem;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  padding: 8px 16px;
  display: inline-block;
  background: black;
}

If the element' of thy block,

thy padding with be true,

if thoust is not a block

ack

the margin is for you

border: 1px solid black;
<table border="0" cellpadding="0" cellspacing="0" align="center">
  <tbody>
    <tr>
      <td align="center" class="buttonWrapper">
        <a rel="noopener noreferrer"
           target="_blank" class="button" href="http://tholman.com">
          Awesome Button
        </a>
      </td>
   </tr>
  </tbody>
</table>
p {
  Margin: 10px;
}

BUTTON

123 fake street, floor 1, apt 3

123 fake street, floor 1, apt 3

a {
  color: red;
}

123 fake street, floor 1, apt 3

EVERY LINK

EVERY LINK

EVERY LINK

.ii a[href] {
  color: #15c;
}
export default function Anchor(props) {
  const { children,
          class: classFromProps,
          ...restProps } = props
  return (
    <a rel="noopener noreferrer"
       target="_blank"
       class={classFromProps}
       {...restProps}
       style={{ color: 'inherit' }}>
      {children}
    </a>
  )
}
#000
#000000
black
white
#000001
#fffffe

CSS

INLINE!

.ExternalClass {
  width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}
body {
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
table td {
  border-collapse: collapse;
  border-spacing: 0px;
  border: 0px none;
  vertical-align: top;
}

Can i use `display`