Menu icon Foundation
Please Review My First Email Attempt

Hi there, I'm giving Emails a shot and wanted to run my basic layout by you guys for a review, looking to see if I'm headed in the right direction. Please let me know if you have any general comments, efficiencies, or suggestions. TYIA!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <link rel="stylesheet" href="css/foundation-emails.css" />
    <style>
        .header {
            background: #b30917;
        }
        .preheader {
            background: #59040b;
        }
        .header .columns {
            padding-bottom: 0;
        }
        .header p {
            margin-bottom: 0;
        }
        .header p,
        .header p small {
            color: #fefefe;
        }
        .header .wrapper-inner {
            padding: 24px;
        }
        .preheader .wrapper-inner {
            padding: 8px;
        }
        .links .wrapper-inner {
            padding: 0 0 16px 0;
        }
        .header .container {
            background: #b30917;
        }
        .preheader .container {
            background: #59040b;
        }
        table.menu th.menu-item {
            padding-top: 0;
        }
        table.menu th.menu-item a {
            color: #fefefe;
        }
    </style>
</head>

<body>
    <table class="body" data-made-with-foundation>
        <tr>
            <td class="float-center" align="center" valign="top">
                <center>
                    <!-- start content -->

                    <!-- start preheader -->
                    <table bgcolor="#59040b" class="wrapper header preheader" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-12 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <p class="text-center"><small>This is the preheader message.</small></p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end preheader -->

                    <!-- start header -->
                    <table bgcolor="#b30917" class="wrapper header" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-6 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <img src="http://placehold.it/350x100">
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end header -->

                    <!-- start menu -->
                    <table bgcolor="#b30917" class="wrapper header links" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-12 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <table class="menu float-center">
                                                                                <tr>
                                                                                    <td>
                                                                                        <table>
                                                                                            <tr>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 1</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 2</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 3</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 4</a></th>
                                                                                            </tr>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end menu -->

                    <!-- start body -->
                    <table align="center" class="container">
                        <tbody>
                            <tr>
                                <td>
                                    <table class="row">
                                        <tbody>
                                            <tr>
                                                <th class="small-12 large-12 columns first last">
                                                    <table>
                                                        <tr>
                                                            <th>
                                                                <table class="spacer">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td height="16px" style="font-size: 16px; line-height: 16px;">&#xA0;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <p>This is the content.</p>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </table>
                                                </th>
                                                <th class="expander"></th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- end body -->

                    <!-- start footer -->
                    <table bgcolor="#b30917" class="wrapper header" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row">
                                                    <tbody>
                                                        <tr>
                                                            <th class="large-offset-3 small-12 large-6 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <p class="text-center">Thanks for reading!</p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end footer -->

                    <!-- end content -->
                </center>
            </td>
        </tr>
    </table>
</body>
</html>

emailtestlayout

Hi there, I'm giving Emails a shot and wanted to run my basic layout by you guys for a review, looking to see if I'm headed in the right direction. Please let me know if you have any general comments, efficiencies, or suggestions. TYIA!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <link rel="stylesheet" href="css/foundation-emails.css" />
    <style>
        .header {
            background: #b30917;
        }
        .preheader {
            background: #59040b;
        }
        .header .columns {
            padding-bottom: 0;
        }
        .header p {
            margin-bottom: 0;
        }
        .header p,
        .header p small {
            color: #fefefe;
        }
        .header .wrapper-inner {
            padding: 24px;
        }
        .preheader .wrapper-inner {
            padding: 8px;
        }
        .links .wrapper-inner {
            padding: 0 0 16px 0;
        }
        .header .container {
            background: #b30917;
        }
        .preheader .container {
            background: #59040b;
        }
        table.menu th.menu-item {
            padding-top: 0;
        }
        table.menu th.menu-item a {
            color: #fefefe;
        }
    </style>
</head>

<body>
    <table class="body" data-made-with-foundation>
        <tr>
            <td class="float-center" align="center" valign="top">
                <center>
                    <!-- start content -->

                    <!-- start preheader -->
                    <table bgcolor="#59040b" class="wrapper header preheader" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-12 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <p class="text-center"><small>This is the preheader message.</small></p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end preheader -->

                    <!-- start header -->
                    <table bgcolor="#b30917" class="wrapper header" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-6 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <img src="http://placehold.it/350x100">
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end header -->

                    <!-- start menu -->
                    <table bgcolor="#b30917" class="wrapper header links" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row collapse">
                                                    <tbody>
                                                        <tr>
                                                            <th class="small-12 large-12 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <table class="menu float-center">
                                                                                <tr>
                                                                                    <td>
                                                                                        <table>
                                                                                            <tr>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 1</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 2</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 3</a></th>
                                                                                                <th class="menu-item float-center"><a href="http://zurb.com">Item 4</a></th>
                                                                                            </tr>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end menu -->

                    <!-- start body -->
                    <table align="center" class="container">
                        <tbody>
                            <tr>
                                <td>
                                    <table class="row">
                                        <tbody>
                                            <tr>
                                                <th class="small-12 large-12 columns first last">
                                                    <table>
                                                        <tr>
                                                            <th>
                                                                <table class="spacer">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td height="16px" style="font-size: 16px; line-height: 16px;">&#xA0;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <p>This is the content.</p>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </table>
                                                </th>
                                                <th class="expander"></th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- end body -->

                    <!-- start footer -->
                    <table bgcolor="#b30917" class="wrapper header" align="center">
                        <tr>
                            <td class="wrapper-inner">
                                <table align="center" class="container">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table class="row">
                                                    <tbody>
                                                        <tr>
                                                            <th class="large-offset-3 small-12 large-6 columns first last" valign="middle">
                                                                <table>
                                                                    <tr>
                                                                        <th>
                                                                            <p class="text-center">Thanks for reading!</p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="expander"></th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- end footer -->

                    <!-- end content -->
                </center>
            </td>
        </tr>
    </table>
</body>
</html>
Corey Schaaf over 3 years ago

Looks like you're using the css version and not the SASS version.  I took your code and dropped it into my project.  Normally I'm using the inky language to render my HTML structure, but from what I see, it appears everything you've done is correct. 

Below is a screenshot of how it rendered for me. (wide screen monitor)

 

small monitor