Email Blast Created in Dreamweaver Table/code issues - Help!

Report · Dec 28, 2017

I created this bad boy in Dreamweaver. If you can tell me what to do to simplify/make it look better and more usable without losing the info, I'd GREATLY appreciate it. I realize it's a mess. I hear tables are the way to go, then I hear my code is awful. Please help! Thanks! Here's the code...

<!DOCTYPE html>

<head>

<title>Top Industry Players Commit to InterFace Seniors Housing West</title>

<!--[if mso]>

.fallback-font {

font-family: Arial, sans-serif;

}

</style>

<![endif]-->

<style>

/* What it does: Stops email clients resizing small text. */

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

/* What it does: Centers email on Android 4.4 */

div[style*="margin: 16px 0"] {

margin:0 !important;

}

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,

td {

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,

td {

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}

/* What it does: Uses a better rendering method when resizing images in IE. */

img {

-ms-interpolation-mode:bicubic;

}

/* What it does: A work-around for email clients meddling in triggered links. */

*[x-apple-data-detectors], /* iOS */

.x-gmail-data-detectors, /* Gmail */

.x-gmail-data-detectors *,

.aBn {

border-bottom: 0 !important;

cursor: default !important;

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */

.a6S {

display: none !important;

opacity: 0.01 !important;

}

/* If the above doesn't work, add a .g-img class to any image in question. */

img.g-img + div {

display:none !important;

}

/* What it does: Prevents underlining the button text in Windows 10 */

.button-link {

text-decoration: none !important;

}

</style>

<style>

/* What it does: Hover styles for buttons */

.button-td,

.button-a {

transition: all 100ms ease-in;

}

.button-td:hover,

.button-a:hover {

background: #555555 !important;

border-color: #555555 !important;

}

/* Media Queries */

@media screen and (max-width: 480px) {

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */

.fluid {

width: 100% !important;

max-width: 100% !important;

height: auto !important;

margin-left: auto !important;

margin-right: auto !important;

}

/* What it does: Forces table cells into full-width rows. */

.stack-column,

.stack-column-center {

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}

/* And center justify these ones. */

.stack-column-center {

text-align: center !important;

}

/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */

.center-on-narrow {

text-align: center !important;

display: block !important;

margin-left: auto !important;

margin-right: auto !important;

float: none !important;

}

table.center-on-narrow {

display: inline-block !important;

}

/* What it does: Adjust typography on small screens to improve readability */

.email-container p {

font-size: 17px !important;

line-height: 22px !important;

}

</style>

<!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]-->

body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}

img{-ms-interpolation-mode: bicubic;}

img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}

table{border-collapse: collapse !important;}

body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}

div[style*="margin: 16px 0;"] { margin: 0 !important; }

.padding { padding: 10px 5% 15px 5% !important;

}

</style>

</head>

<tr>

</tr>

</table>

<tr>

<tr>

</td>

</tr>

<tr>

<tr>

<span style="color:#ffffff;" class="button-link">AGENDA</span></a>

</td>

<span style="color:#ffffff;" class="button-link">SPEAKERS</span></a>

</td>

<span style="color:#ffffff;" class="button-link">REGISTER</span></a>

</td>

<span style="color:#ffffff;" class="button-link">SPONSORS</span></a>

</td>

<span style="color:#ffffff;" class="button-link">VENUE</span></a>

</td>

</tr>

</table>

</center>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 24px; line-height: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 10px;">TOP INDUSTRY PLAYERS COMMIT TO INTERFACE SENIORS HOUSING WEST ON MARCH 1</td>

</tr>

<tr>

<td align="center" style="padding: 0 15px 10px 15px; font-size: 19px; font-family: Helvetica, Arial, sans-serif; font-weight: 600; color: #a70e12;"><i>Early Bird Rate of $359 Available Until January 19</i></td>

</tr>

<tr>

<td align="left" style="padding: 0 15px 0 15px; font-size: 15px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; color: #666666;"><p><b>Andrew Kohlberg of Kisco Senior Living, Tana Gall of Blue Harbor, Richard Ackerman of Big Rock Partners and Jessica Andrews of Merrill Gardens</b> are some of the top industry players who have committed to speak at the 4th annual InterFace Seniors Housing West, taking place March 1 in Los Angeles.</p>

<p>This event will bring together leading <b>owners, operators, investors, developers and capital sources from across the Western U.S.</b> for high-level information and five+ hours of networking and dealmaking. Leading players will be in attendance from <b>California, Washington, Oregon, Arizona, Nevada, Colorado, Utah and New Mexico</b> as well as national players who are active in the region.</p>

<p><b>Don't miss the event that's grown into the largest regional seniors housing conference on the West Coast.</b></p>

<p>Save $100 by signing up for the conference at the Early Bird rate of $359, which is good until January 19.</p>

</td>

</tr>

<tr>

<tr>

<span style="color:#ffffff;" class="button-link"> REGISTER NOW </span></a>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 24px; font-family: Helvetica, Arial; font-weight: 700; color: #333333; padding-bottom: 20px;">CONFIRMED SPEAKERS <span style="font-size: 14px; font-weight: 500;"> (As of December 21)</span></td>

</tr>

</table>

<tr>

</tr>

<tr>

<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Tana Gall</b><br /><span style=" font-size: 12px; line-height: 15px;">CEO<br />Blue Harbor Senior Living</span></td>

<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Andrew Kohlberg</b><br /><span style=" font-size: 12px; line-height: 15px;">President & CEO<br />Kisco Senior Living</span></td>

<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Richard Ackerman</b><br /><span style=" font-size: 12px; line-height: 15px;">Chairman, Managing Partner<br />Big Rock Partners</span></td>

<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Jessica Andrews</b><br /><span style=" font-size: 12px; line-height: 15px;">Senior Vice President<br />Merrill Gardens</span></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 23px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 20px;">CONFERENCE SPONSORS</td>

</tr>

</table>

<tr>

<td align="center" bgcolor="#0763a0" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">GOLD SPONSORS</td>

</tr>

<tr>

</tr>

</table><br /><br />

<tr>

<td align="center" bgcolor="#0763a0" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">SILVER SPONSORS</td>

</tr>

<tr>

</tr>

</table><br /><br />

<tr>

<td align="center" bgcolor="#0763a0" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">MEDIA & PROMOTIONAL SPONSORS</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 24px; line-height: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 5px;">TWO OTHER INTERFACE EVENTS<br>BEING HELD THE SAME WEEK</td>

</tr>

<tr>

<p>InterFace will also be hosting the <b>7th annual InterFace Net Lease West</b> conference on February 27th and the <b>9th annual InterFace Healthcare Real Estate West</b> conference on February 28th, also at the Omni Los Angeles. For more information on those events, <a href="http://interfaceconferencegroup.com" target="_blank">click here.</a></p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 5px;">HOTEL ROOM BLOCK AVAILABLE</td>

</tr>

<tr>

<p>A block of sleeping rooms is available at the Los Angeles Omni to guests of InterFace Seniors Housing West for $265. <b>This rate is available until Monday, February 5th, and is subject to availability.</b> To reserve a room at this group rate and for more information on the hotel, please <a href="https://www.omnihotels.com/hotels/los-angeles-california-plaza/meetings/interface-conference-group" target="_blank">click here</a>.</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

<tr>

<span style="color:#ffffff;" class="button-link"> CONFERENCE WEBSITE </span></a>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td colspan="2" bgcolor="#2d63af" align="center" style="font-size: 17px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 7px 0 7px 0;">For speaking and sponsorship information, please contact:

</td>

</tr>

<tr>

<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Richard Kelley<br />914.468.0818<br /><a href="mailto:rkelley@francemediainc.com" target="_blank">rkelley@francemediainc.com</a>

</td>

<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Eric Goldberg<br />404.832.8262<br /><a href="mailto:egoldberg@francemediainc.com" target="_blank">egoldberg@francemediainc.com</a>

</td>

</tr>

</table><br />

<tr>

<td colspan="2" bgcolor="#2d63af" align="center" style="font-size: 17px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 7px 0 7px 0;">For registration and overall conference information, please contact:

</td>

</tr>

<tr>

<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Heather James-Wyrick<br />404.832.8262<br /><a href="mailto:hwyrick@francemediainc.com" target="_blank">hwyrick@francemediainc.com</a>

</td>

<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Alicia Turlington<br />404.832.8262<br /><a href="mailto:aturlington@francemediainc.com" target="_blank">aturlington@francemediainc.com</a>

</td>

</tr>

</table><br />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td align="center" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; color: #333333;">InterFace Conference Group is a division of France Media, Inc.

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</tr>

</table>

</body>

</html>

Report · Dec 28, 2017

I'm no expert when it comes to front end stuff (I'm primarily a ColdFusion / SQL developer), but the CSS guy that I used to work with told me that tables are NOT the way to go, because the browser parses that code twice - once for structure/format, then again for data. Table-less design (using divs, etc.) is more efficient.

One thing I can say, also, is that the doctype declaration (for today's browsers) is simply <!DOCTYPE html>. This indicates HTML5.

HTH,

^ _ ^

Report · Dec 28, 2017

Thanks. I'm not very good with div tags yet. I'm not sure how to convert these tables into div tags.

Report · Dec 28, 2017

You have to learn a lot of CSS to use table-less designs. IMHO. If you have the time.

If you don't have the time, then stick with what you know. But it would still be a good idea to learn CSS. As much as you can.

V/r,

^ _ ^

Report · Dec 28, 2017

I agree that CSS is the way to go, but I read that CSS is not the best route for email blasts.

Report · Dec 28, 2017

There's way too much going on in that email that may give you rendering issues. And I see some office notes in the code there too which isn't good at all. If I were you I would look to a framework like Foundation for Emails and learn that to build modern, responsive emails. There's definitely a learning curve, but it is well worth it in the end.

https://foundation.zurb.com/emails.html

Otherwise, I would just find a good email provider with good templates out of the box and stick to that.

Report · Dec 28, 2017

Thanks. I agree. I will look at the link. Thanks!

Report · Dec 28, 2017

There is that. Some people have had bad experiences with CSS and email; others have not.

Keep the tables. Just to be on the safe side. But for anything that will be viewed in a browser, I definitely recommend CSS and table-less design, and using the HTML5 doctype declaration.

V/r,

^ _ ^

Report · Dec 28, 2017

Ok, thanks!

Report · Dec 28, 2017

I do not recommend using external Web fonts in emails. Email clients will most likely reject them for security reasons because web fonts depend on scripts. Stick with the websafe font-familes from CSS Font Stack. You'll safely cover more devices that way.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

An example:

body {

font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Droid, Tahoma,sans-serif;

font-size: 16px;

font-weight: 500;

line-height: 23px;

}

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 28, 2017

Nancy, I'm facepalming myself, right now. As someone who is very security-conscious, that is the first thing I should have thought of. Glad you caught it.

V/r,

^ _ ^

Report · Jan 01, 2018

Thanks everyone. You have all been very helpful and I really appreciate it. I hope you all had a happy new year! Thanks again!!!

Adobe is the best!

Report · Jan 01, 2018

Happy 2018!

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Email Blast Created in Dreamweaver Table/code issues - Help!

1 Correct answer