2-Column Layout: Media Queries

Free HTML Email Tutorial

Learn how to code a 2-column newsletter with media queries for optimal desktop and mobile viewing in this detailed HTML Email tutorial.

This exercise is excerpted from Noble Desktop’s HTML Email training materials and is compatible with updates through 2021. To continue learning HTML Email with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this HTML Email tutorial:

Coding the nested table structure, Writing styles for desktop & mobile versions, Media queries for fine-tuning mobile responsive design, Modifying media queries

Exercise Preview

2 column newsletter banner&headline

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Exercise Overview

This is the first in a series of exercises in which you’ll create a 2-column newsletter. Media queries will allow us to create a 2-column layout for desktops and a 1-column layout for most mobile clients. In this exercise, you’ll focus on the main table structure and add the banner image and the main heading.

Previewing the Finished Design

  1. To see a finished design of the email you’ll be coding in the rest of this class, go to your Desktop then navigate into Class Files > yourname-Responsive Email Class

  2. Double–click on 2-Column Email Design Mockup.pdf to open it. Unlike the email in the last exercise, this has a 2-column layout. The extra column significantly changes our workflow and expectations for outcomes across email clients.

  3. Keep the PDF design file open. We’ll refer back to it later in the exercise.

Getting Started

  1. In your code editor, open date-night-exclusive-picks.html from the 2-Column Layout folder.

    NOTE: If your code editor allows you to open an entire folder (like Visual Studio Code does), open the entire 2-Column Layout folder.

  2. First, we’ll create the outer table. Because it’s tedious to type out tables with all the attributes we need, we have prepared a code snippet. In your code editor, open table-code.html from 2-Column Layout > snippets.

  3. Copy all the code.

  4. Leave the file open. We’ll copy it again later.

  5. Switch back to date-night-exclusive-picks.html and paste the code inside the body as shown below in bold.

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

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

    NOTE: Because we want to see the table’s boundaries for testing purposes, we’ve given it a 1-pixel border. The final design does not call for borders so we will set the border to 0 when we’re finished testing the layout.

  6. As with our last email project, we need to give this outer table a fixed width. Update the width as shown in bold:

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

  7. Save the file.

Placing the Top Banner Image

Let’s place the top banner image into the table. To save you some time, we prepared a file that contains all the email content.

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

  2. We’re adding the banner, so copy only the code from line 1.

  3. Leave the file open. We will grab some of the other content later.

  4. Switch back to date-night-exclusive-picks.html and paste the code inside the table cell, as shown below in bold:

    <td align="center" width="100%">
   <a href="http://www.example.com" target="_blank"><img src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>
</td>

    NOTE: We don’t yet have a page for this image to link to, so we’ll use example.com as a placeholder. We’ve noticed that using an empty href or href="#" can cause issues in email clients such as Outlook.com.

  5. Save the file and preview date-night-exclusive-picks.html in a browser.

    The banner image is sitting nicely inside the table. We’ll get rid of the small gap between the bottom of the image and the bottom of the table a bit later.

  6. Leave the file open in the browser, so you can reload the page to see your changes.

Nesting an Inner Table for the Main Content

  1. Let’s come up with a working strategy before adding the email content. Switch to 2-Column Email Design Mockup.pdf to give it a second look.

  2. For more complex layouts we take a modular approach: a table for each distinct section of content. Discrete tables give you consistent spacing and structure across email clients, and the are more easily updated for weekly newsletters such as this.

    email mockup 2 column

    We could nest a new table under the banner image inside the current table cell, but let’s keep the banner in its own discrete table cell so we can have more control over the way the image will display across different devices. We’ll make the main table have 2 rows: a top row for the banner image and a bottom row the other content.

  3. Return to your code editor and add a new table row and cell:

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="680">
   <tr>
      <td align="center" width="100%">
         <a href="http://www.example.com" target="_blank"><img src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>
      </td>
   </tr>
   <tr>
      <td align="center" width="100%">

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

  4. Let’s nest a new table inside this new cell. Switch back to table-code.html to copy the starter table code.

  5. Close the file and switch back to date-night-exclusive-picks.html.

  6. Around line 17, paste the code, as shown below in bold.

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="680">
   <tr>
      <td align="center" width="100%">
         <a href="http://www.example.com" target="_blank"><img src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>
      </td>
   </tr>
   <tr>
      <td align="center" width="100%">
         <table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
               <td align="center" width="100%">

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

  7. Let’s add the main heading inside the empty cell of this new table. In your code editor, switch back to email-content.html.

  8. Copy only the code from line 3.

  9. Close the file. You should be back in date-night-exclusive-picks.html.

  10. Around line 20, paste the code inside the new table cell as shown in bold:

    <td align="center" width="100%">
   <h1>This Week&#8217;s Exclusive Picks</h1>
</td>

  11. Save the file and reload the browser. The image and text are displayed in 2 different tables. The border, at this point, looks doubled-up in the bottom section because of the nested tables; the outer table has a fixed width of 680 pixels and the inner table is 100% of its width.

Coding the Styles that Apply to Both Versions

It’s time to style the email. Let’s first code the styles that apply to both the desktop and mobile versions, and then add the media queries that will apply styles just to mobile versions.

  1. First, we want to get rid of the space between the bottom of the banner and the header. Return to your code editor.

  2. Under the title tag add a style tag that will hold our CSS rules:

       <title>Date Night Exclusive Picks</title>
   <style>
   </style>
</head>

  3. Add a rule for the img, getting rid of the gap below the banner image:

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

  4. Save the file and reload the browser. Great, the awkward space below the image is gone! Because the CSS applies to all images, we won’t encounter this problem again.

  5. Hover over the image, and you’ll see the cursor turn into a pointer cursor icon because there’s a link surrounding the image.

    Some email clients in certain browsers will put an ugly blue border on an image with a link surrounding it. Let’s make sure our clients never see this.

  6. Return to your code editor.

  7. Inside the rule for the img, add this bold code:

    img {
   display: block;
   border: 0;
}

  8. Add a rule for the h1 that alerts users to this week’s exclusive picks:

       img {
      display: block;
      border: 0;
   }
   h1 {
      color: #69655c;
      font-family: sans-serif;
      font-size: 40px;
      font-weight: bold;
      margin: 0;
   }
</style>

  9. Save the file and reload the browser. There’s no margin on the top and bottom of the header text, and it is nicely styled in gray.

    However, the text looks a little cramped with no padding. We want to add 20 pixels of padding to the contents of the header’s cell, which will contain the vast majority of the content. We could add padding to the individual cell that holds the h1 by inlining a style, but let’s give it a class so we can streamline our workflow and be able to add additional CSS to this element later.

  10. Return to your code editor and around line 33, add a class of mainContent to the table cell that contains the h1:

    <tr>
   <td class="mainContent" align="center" width="100%">
      <h1>This Week&#8217;s Exclusive Picks</h1>

  11. Under the existing CSS rules, add a new rule for .mainContent:

          margin: 0;
   }
   .mainContent {
      padding: 20px;
   }
</style>

  12. Save the file and reload the browser. There should now be a 20-pixel space around the entire header text.

    This portion of the email is more or less ready to send out to desktop users. To simulate what a mobile user would see, resize the browser window smaller.

    Sure enough, the email doesn’t shrink down to size. Just like last time, we need to make both the outermost table and image flexible.

Writing Media Queries for Mobile Devices

Media queries will allow us to target mobile devices (where a 2-column layout would not be good) to create styles that are better suited for smaller screens.

We want to write our media queries inside the style tag but after all the current styles that we have. This is a good way to divide the desktop and mobile styles.

  1. Return to date-night-exclusive-picks.html in your code editor.

  2. Around line 26, give the outer table a wrapper class:

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

  3. Add a media query under the existing rules as shown below in bold:

       .mainContent {
      padding: 20px;
   }
   @media only screen and (max-width: 680px) {

   }
</style>

    Our media query is going to make certain that the styles we write are only going to apply if the screen is 680 pixels or smaller. Remember: all the styles we write for these screens are going to go inside these curly braces.

    Let’s add a max-width and width to the .wrapper like we did in the previous project.

  4. In the media query, add a rule that makes the outermost table flexible:

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

  5. We want to make images responsive, too. Let’s target our images on a case-by-case basis by adding a class for images we want to be flexible.

    Around line 36, give the banner image a resImage class as shown below:

    <a href="http://www.example.com" target="_blank"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/header.png" width="680" alt="Date Night"></a>

  6. In the media query below the .wrapper rule, add the following bold resImage rule, making it scale proportionately and setting its width (which is relative to the the width of its container):

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

  7. Save the file and reload the browser.

  8. Resize the browser window smaller. Voilà, all the content is sizing down nicely!

    The email is flexible, but that header text will take up too much screen real estate on mobile. Let’s size it down on smaller screens.

  9. Return to your code editor.

  10. In the media query below the .resImage rule, add a style for the h1:

      .resImage {
      width: 100%;
      height: auto;
   }
   h1 {
      font-size: 24px;
   }
}

  11. Save the file and reload the browser.

  12. Resize the browser window smaller. Bam! The heading instantly shrinks to 24 pixels once the width of the browser is 680 pixels or less.

!important Rules

When we send this email, we have to inline all the non-media query styles that are mostly for the desktop. Inline CSS has high priority, making it extremely powerful and next to impossible to overrule. Right now, our media queries are not able to overrule an inline style. Let’s fix that.

  1. In order to make the media query able to overrule the inline styles on a mobile screen, around line 24 before the semi-colon, type the following bold code:

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

  2. !important is a special modifier. An !important declaration takes precedence over a normal declaration. We want to put it on every rule, so copy the !important code.

  3. Paste the !important into every rule inside the media query, as shown below in bold:

    @media only screen and (max-width: 680px) {
   .wrapper {
      max-width: 680px !important;
      width: 100% !important;
      display: block !important;
   }
   .resImage {
      width: 100% !important;
      height: auto !important;
   }
   h1 {
      font-size: 24px !important;
   }
}

  4. Save the file and reload the browser. Feel free to resize the browser window smaller. It will function the same with the exception that media queries are now powerful enough to overrule inline styles (which will be done later).

  5. Feel free to keep this page open in the browser as well as in your code editor. We’ll continue to build out the newsletter in the next exercise.

How to Learn HTML Email

Master HTML email with hands-on training. Boost your email marketing campaigns by learning how to code emails that look good on different-sized devices.

Yelp Facebook LinkedIn YouTube Twitter Instagram