Inspiring

Answered

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

Forum|Forum|8 years ago
December 28, 2017
3 replies
2720 views

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>

This topic has been closed for replies.

Correct answer Ben M

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

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.

p0wer_v1olenceAuthor

Inspiring

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!

Nancy OShea

Community Expert

Happy 2018!

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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

WolfShade

Legend

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,

^ _ ^

WolfShade

Legend

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,

^ _ ^

p0wer_v1olenceAuthor

Inspiring

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

p0wer_v1olenceAuthor

Inspiring

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,

^ _ ^

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded