Skip to main content
April 1, 2026Dan Rodney/12 min read

Simple Responsive Layout

Master responsive HTML email design fundamentals

Key Skills You'll Learn

Table-Based Layouts

Learn to structure HTML emails using tables for maximum compatibility across all email clients and devices.

Responsive Design

Implement media queries and flexible widths to create emails that adapt seamlessly to mobile and desktop screens.

Cross-Client Compatibility

Master techniques to ensure your emails render correctly in Outlook, Gmail, Apple Mail, and other popular email clients.

Topics Covered in This HTML Email Tutorial:

Coding the Table Structure, Fixing a Gap Below Images, Making the Email Responsive, Introduction to CSS Media Queries

Exercise Preview

date night desktop and mobile layouts

Exercise Overview

In this comprehensive exercise, you'll build a professional single-column responsive email that delivers consistent results across all platforms: desktop mail applications, webmail clients, and mobile devices. This foundational approach ensures maximum deliverability and readability while maintaining design integrity across diverse email environments.

Why Single Column Layouts Work Best

A simple 1-column email is the easiest layout that works well on any screen size. This approach ensures readability and functionality across desktop mail apps, webmail clients, and mobile devices.

Previewing the Finished Product

Before we dive into the coding process, let's examine what we're building to understand the end goal and responsive behavior.

  1. Navigate to Desktop > Class Files > yourname-Responsive Email Class > Simple Responsive Layout.

  2. CTRL–click (Mac) or Right–click (Windows) on date-night-finished.html, go to Open with and select your preferred browser.

  3. Resize the browser window progressively smaller to simulate mobile viewing. Notice how the email gracefully adapts to smaller widths—this fluid behavior is what makes single-column layouts so effective for modern email marketing. The content remains readable and well-proportioned at every breakpoint, eliminating the need for horizontal scrolling or zooming.

  4. Close the browser window when you've finished reviewing the responsive behavior.

Getting Started

Now that you've seen the final product, let's begin building our responsive email template from scratch.

  1. In your preferred code editor (Visual Studio Code, Sublime Text, or another modern editor) open the file date-night-feb-14.html from the Simple Responsive Layout folder.

    NOTE: If your code editor supports folder-based projects (like Visual Studio Code), consider opening the entire Simple Responsive Layout folder to access all related files efficiently.

  2. Add a descriptive title that will appear in the browser tab and improve accessibility by adding the text shown below in bold:

    <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Date Night Exclusive—February 14</title>
</head>

Setup Process

1

Open Your Code Editor

Launch Visual Studio Code, Sublime Text, or your preferred editor and open the date-night-feb-14.html file from the Simple Responsive Layout folder.

2

Add Meta Information

Include the viewport meta tag and descriptive title to ensure proper mobile rendering and email client recognition.

3

Structure the Foundation

Begin with the outer table structure that will contain your header image and inner content table.

Coding the Outer Table & Adding an Image

Despite building a responsive email, we must structure our content using HTML tables to ensure compatibility with legacy email clients, particularly older versions of Outlook. Our architecture will consist of an outer table containing the header image at full email width, with nested inner tables providing proper spacing and content structure for optimal readability across all email platforms.

  1. Create the foundational outer table structure by adding the following bold code inside the <body> tag.

    TIP: If your code editor includes Emmet support, you can use the shortcut table>tr>td and press Tab to generate the complete table structure quickly. Note that recent Emmet updates have affected some shortcuts, so manual coding remains the most reliable approach.

    <body>
   <table>
      <tr>
         <td>

         </td>
      </tr>
   </table>
</body>

  2. Configure the table for optimal email client compatibility by adding essential attributes that reset default spacing and ensure center alignment:

    <table align="center" cellpadding="0" cellspacing="0">

  3. Add a temporary border to visualize our table structure during development. This debugging technique helps identify layout issues early in the build process:

    <table align="center" cellpadding="0" cellspacing="0" border="1">

  4. Set the table width to 640 pixels, which represents the optimal width for desktop email viewing and serves as our maximum width constraint:

    <table align="center" cellpadding="0" cellspacing="0" border="1" width="640">

    This outer table is the only element in our responsive email that uses a fixed pixel width. All interior elements will use percentage-based widths for scalability. This approach allows us to modify the entire email's maximum width by changing just this single value.

  5. Configure the table cell for proper content alignment and full-width utilization:

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="640">
   <tr>
      <td align="center" width="100%">

      </td>
   </tr>
</table>

  6. Save the file to preserve your progress.

  7. To streamline development, we've prepared content snippets for you. In your code editor, open header-image.html from Simple Responsive Layout > snippets.

  8. Copy all the code from the snippet file.

  9. Close the snippet file and return to date-night-feb-14.html.

  10. Insert the header image code inside the <td> tag around line 11:

    <td align="center" width="100%">
   <img src="http://www.nobledesktop.com/nl-date-night/img/lights-on-street.jpg" width="640" ALT="Date Night Exclusives">
</td>

    NOTE: This image is hosted on our server for demonstration purposes. In production environments, always host images on your own server or your email marketing platform's CDN. Email clients cannot access local files, making absolute URLs essential for proper image display.

  11. Save the file to lock in your changes.

  12. Preview date-night-feb-14.html in your browser. If your editor lacks a built-in preview feature, navigate to Desktop > Class Files > yourname-Responsive Email Class > Simple Responsive Layout and CTRL–click (Mac) or Right–click (Windows) on date-night-feb-14.html, then select Open with and choose your preferred browser.

    Fixed Width Strategy

    The outer table is the only part of a responsive email that has a fixed width of 640 pixels. Use percentages for all other width attributes to maintain flexibility.

    Essential Table Attributes

    0/4

Browser Preview Shortcuts

If you're using Visual Studio Code with the open in browser extension installed, use Option–B (Mac) or ALT–B (Windows) to open the saved HTML document in your default browser. When prompted to choose a browser, select Google Chrome for the most accurate rendering preview, as it's the most widely adopted browser and closely matches modern email client behavior.

  • The image should display properly within the outer table structure. You may notice a small gap below the image—this is expected behavior that we'll address in the next section.

  • Keep the browser window open for easy page reloading as we continue development.

    • Visual Studio Code Shortcut

    With the open in browser extension installed, use Option-B (Mac) or ALT-B (Windows) to quickly preview your HTML in the default browser. Choose Google Chrome for best compatibility testing.

    Nesting the Inner Table

    With our header image in place, we'll now create the nested table structure for our text content. This inner table approach provides better control over spacing and ensures consistent rendering across email clients.

    1. Return to date-night-feb-14.html in your code editor.

    2. Copy the complete opening <table align="center" …> tag with all its attributes.

    3. Paste the table tag immediately below the image element:

      <tr>
   <td align="center" width="100%">
      <img src="http://www.nobledesktop.com/nl-date-night/img/lights-on-street.jpg" width="640" ALT="Date Night Exclusives">
      <table align="center" cellpadding="0" cellspacing="0" border="1" width="640">
   </td>
</tr>

    4. Convert the fixed width to a percentage-based width for responsive behavior:

      <table align="center" cellpadding="0" cellspacing="0" border="1" width="100%">

    5. Complete the inner table structure with the necessary row and cell elements:

      <td align="center" width="100%">
   <img src="http://www.nobledesktop.com/nl-date-night/img/lights-on-street.jpg" width="640" ALT="Date Night Exclusives">
   <table align="center" cellpadding="0" cellspacing="0" border="1" width="100%">
      <tr>
         <td>
         </td>
      </tr>
   </table>
</td>

    6. Configure the inner table cell for left-aligned text content, which provides better readability for paragraphs and lists:

      <tr>
   <td align="left" width="100%">
   </td>
</tr>

    7. Save the file to preserve the nested table structure.

    Outer vs Inner Table Configuration

    FeatureOuter TableInner Table
    Width Setting640px (fixed)100% (relative)
    Content PurposeHeader imageText content
    AlignmentCenterLeft
    ResponsivenessFixed containerFlexible content
    Recommended: This nested structure provides the foundation for responsive behavior while maintaining email client compatibility.

    Adding the Remaining Content

    Now we'll populate our inner table with the email's main content using another prepared snippet to accelerate the development process.

    1. In your code editor, open email-text.html from the snippets folder.

    2. Copy all the content from this snippet file.

    3. Close the snippet file and return to date-night-feb-14.html.

    4. Insert the content inside the inner table cell around line 16:

      <td align="left" width="100%">
   <h1>Take a Night Out This Weekend</h1>
   <p class="subhead">Our treat&mdash;when you become a premium member.</p>
   <ul>
      <li>Unique romantic experiences</li>

      Code Omitted To Save Space

      </ul>
   <p>Premium members receive one free date every month as well as access to the best value on exclusive dates. We know you're busy, so we do all the planning for the two of you. Make your weekends special with our creative and adventurous dates!</p>
</td>
    5. Save the file to lock in the content additions.
    6. Preview date-night-feb-14.html in your browser to see the complete content structure.

    7. Examine the nested table architecture and note the persistent gap below the header image.

      This gap occurs because images render as inline elements by default, following text baseline alignment rules. The space accommodates descenders in characters like 'g', 'j', or 'y'. We can eliminate this unwanted spacing by changing the image's display property to block, which removes baseline alignment behavior entirely.

    8. Return to your code editor to implement the image fix.

    9. Add a CSS style block in the document head, positioned after the title element:

      <title>Date Night Exclusive—February 14</title>
   <style>

   </style>
</head>

      NOTE: While inline styles provide the most reliable rendering across email clients, embedded styles like these can be automatically converted to inline styles by most modern email service providers during the send process. This approach offers better development efficiency while maintaining compatibility.

    10. Add the image display rule to eliminate the baseline gap:

      <style>
   img {
      display: block;
   }
</style>

    11. Save the file, return to your browser, and reload the page. The gap below the header image should now be completely eliminated.

    12. With our table structure functioning correctly, we can remove the debugging borders for a cleaner appearance.

    13. Remove the border attributes from both tables by setting their values to zero:

      <table align="center" cellpadding="0" cellspacing="0" border="0" width="640">
   <tr>
      <td align="center" width="100%">
         <img src="http://www.nobledesktop.com/nl-date-night/img/lights-on-street.jpg" width="640" ALT="Date Night Exclusives">
            <table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">

    14. Save the file and reload the browser to view the clean layout. The structure is solid, but the content needs professional styling to enhance readability and visual appeal.

    Image Gap Issue

    Images display inline by default and are aligned to the text baseline, creating unwanted space below. The gap exists for characters with descenders like 'g' and 'y'.

    Styling the Text

    Professional email design requires carefully crafted typography. Since our primary focus is responsive layout architecture, we've prepared comprehensive CSS styling rules for optimal text presentation.

    1. Return to your code editor and open text-styling.css from Simple Responsive Layout > snippets.
    2. Copy all the CSS rules from this file.
    3. Close the CSS file and return to date-night-feb-14.html.

    4. Add the text styling rules below the existing image rule:

      img {
      display: block;
   }
   h1 {
      font-family: sans-serif;

      Code Omitted To Save Space

      .subhead {
      font-size: 24px;
   }
</style>

      NOTE: In the p, ul rule, we use percentage values for line-height instead of unitless values. While unitless line-heights are generally preferred in web development, some email clients handle percentage values more consistently, ensuring predictable text spacing across platforms.

    5. Save the file and reload the browser. The typography should now appear polished and professional, with proper hierarchy and spacing.

    CSS Implementation Strategy

    Embedded Styles First

    Write CSS in style tags for easier development and testing. Most email services can convert these to inline styles automatically.

    Block Display for Images

    Setting images to display block eliminates baseline gaps and ensures consistent rendering across email clients.

    Adding a Splash of Color

    Visual elements like color can significantly enhance email engagement. Let's add a distinctive design element that reinforces the brand while improving the overall layout structure.

    1. Return to your code editor.

    2. Add a CSS class to the inner table cell to enable targeted styling:

      <tr>
   <td class="innerCell" align="left" width="100%">
      <h1>Take a Night Out This Weekend</h1>

    3. Create a CSS rule for the innerCell class that adds a striking bottom border:

      .subhead {
      font-size: 24px;
   }
   .innerCell {
      border-bottom: 10px solid #e54c3b;
   }
</style>

    4. Save the file and reload the browser. The red border adds visual impact, but the content needs more breathing room for optimal readability.

      While we could use the table's cellpadding attribute, this approach has limitations—some email clients, particularly desktop versions of Outlook, ignore cellpadding entirely. CSS padding on table cells provides more reliable cross-client consistency.

    5. Return to your code editor to add proper spacing.

    6. Add padding to the .innerCell rule for balanced white space:

      .innerCell {
   border-bottom: 10px solid #e54c3b;
   padding: 10px;
}

    7. Save the file and reload the browser. The layout now has professional spacing and visual polish.

    Avoid Cellpadding in Email

    Some email clients, particularly desktop versions of Outlook, ignore cellpadding attributes. Always use CSS padding on table cells instead for reliable spacing control.

    Making the Email Responsive

    While our email looks excellent on desktop, mobile users represent a significant portion of email opens. Let's test and optimize our design for smaller screens to ensure universal accessibility.

    1. Test the current responsive behavior by resizing your browser window. You'll notice the email doesn't adapt to smaller widths—it maintains its 640-pixel width regardless of screen size. On mobile devices, this would result in tiny, unreadable text as the entire email gets scaled down to fit the viewport.

    2. Let's implement true responsive behavior. Return to your code editor.

    3. Add a CSS class to the outer table for targeted responsive styling:

      <body>
   <table class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" width="640">

      The fixed 640-pixel width prevents responsive scaling. We need to make this container flexible while maintaining its desktop maximum width.

    4. Create a CSS rule that overrides the fixed width with a flexible alternative:

      .innerCell {
      border-bottom: 10px solid #e54c3b;
   }
   .wrapper {
      width: 100%;
   }
</style>
    5. Save the file and reload the browser. The table should stretch across the full browser width, but this creates new issues—the content loses its centered positioning and the border extends too far.
    6. Return to your code editor to refine the responsive behavior.

    7. Add constraints to maintain proper proportions and centering:

      .wrapper {
   width: 100%;
   max-width: 640px;
   display: block;
}

      NOTE: The max-width property occasionally fails on table elements in some email clients. Setting display to block resolves this compatibility issue while maintaining the responsive behavior.

    8. Save the file and reload the browser. The layout should now maintain its 640-pixel maximum width while allowing flexibility.

    9. Test responsiveness by resizing the browser window again. The layout may still resist scaling due to the fixed-width header image.

      Making the image responsive will enable the entire table structure to scale proportionally.

    10. Add responsive image properties to the existing img rule:

      img {
   display: block;
   width: 100%;
   height: auto;
}

      These CSS properties create fluid image behavior:

      • width: 100% overrides the HTML width attribute, making the image scale proportionally to its container's width.
      • height: auto maintains the image's aspect ratio during scaling and provides additional protection against display issues in desktop Outlook versions.

    11. Save the file and reload the browser.

    12. Resize the browser window to test full responsive functionality. The email should now scale smoothly from desktop width down to mobile dimensions, maintaining readability and professional appearance at all sizes.

    Responsive Transformation Process

    1

    Add Wrapper Class

    Give the outer table a class of 'wrapper' to target it specifically with CSS for responsive behavior.

    2

    Override Fixed Width

    Use CSS to set width to 100% and max-width to 640px, allowing the table to scale down while maintaining maximum size.

    3

    Make Images Flexible

    Set image width to 100% and height to auto to ensure images scale proportionally with their container.

    Writing a Media Query to Limit Scaling to Mobile Devices

    Desktop versions of Outlook present unique challenges—they don't support the max-width property, which means our 100% width setting could cause unwanted scaling beyond our intended 640-pixel desktop limit. Media queries provide an elegant solution by applying responsive styles only when specific conditions are met.

    Media queries enable conditional CSS application based on screen size, device type, or other characteristics. Since desktop Outlook doesn't support media queries, we can use them to isolate our responsive styles, preventing unintended desktop scaling while enabling mobile optimization.

    1. Return to your code editor.

    2. Select and cut the complete .wrapper rule:

      .wrapper {
   width: 100%;
   max-width: 640px;
   display: block;
}

    3. Cut the rule using Cmd–X (Mac) or CTRL–X (Windows).

    4. Replace the cut rule with a media query targeting screens up to 640 pixels wide:

      .innerCell {
      border-bottom: 10px solid #e54c3b;
      padding: 10px;
   }
   @media only screen and (max-width: 640px) {

   }
</style>

    5. Paste the .wrapper rule inside the media query:

      @media only screen and (max-width: 640px) {
   .wrapper {
      width: 100%;
      max-width: 640px;
      display: block;
   }
}

    6. Save the file and test the responsive behavior in your browser. The email should maintain its desktop appearance at large screen sizes while automatically adapting to mobile dimensions when the viewport is 640 pixels or smaller. This approach ensures optimal viewing experiences across all devices while maintaining compatibility with challenging email clients like desktop Outlook.

    Outlook Desktop Compatibility

    Desktop versions of Outlook don't support media queries, so responsive styles inside media queries are ignored. This prevents layout issues in Outlook while maintaining mobile responsiveness.

    Key Takeaways

    1HTML emails require table-based layouts for compatibility across all email clients, unlike modern web development practices
    2Use a fixed 640px width for the outer table only, with percentage-based widths for all inner elements to enable responsive behavior
    3Set images to display block to eliminate unwanted gaps caused by baseline text alignment in email clients
    4Media queries allow mobile-specific CSS while preventing compatibility issues in desktop Outlook versions that don't support them
    5Always use CSS padding instead of cellpadding attributes for reliable spacing control across different email clients
    6Images must be hosted on external servers with absolute URLs since email clients cannot access relative file paths
    7The combination of width 100%, max-width 640px, and display block on tables ensures proper responsive scaling
    8CSS inlining is typically required for final email deployment, but embedded styles are easier for development and testing phases

    RELATED ARTICLES