Optimizing the Mobile Layout | Free HTML Email Tutorial

Learn how to optimize HTML emails for mobile devices including changing font sizes across screen sizes, removing excess margins on mobile and removing table borders. This tutorial provides step-by-step instructions to help you create more visually appealing and user-friendly email content.

Key Insights

The tutorial covers how to change font sizes across different screen sizes. In the example provided, the font size for the body paragraphs stays consistent in all 3 layouts. The size changes from 12 pixels on desktop to 16 pixels on mobile phones for easier readability.
Excess margins on mobile devices can be removed to optimize screen space. By default, browsers add an 8-pixel margin to all sides of the body. This tutorial demonstrates how to code the CSS to reduce this margin.
The tutorial also covers the process of removing table borders to improve the aesthetics of emails. This involves performing a Find and Replace action in the code editor.
The tutorial includes an exercise that involves coding to improve spacing on mobile devices. This involves working with files like date-night-exclusive-picks.html.
There is an emphasis on efficient coding, using CSS rules and targeting elements effectively. For example, the tutorial demonstrates how to target paragraph elements for font size changes.
The tutorial also guides through the use of DevTools for inspecting and testing changes. This includes resizing the browser window to test changes in layouts and font sizes.

Take your HTML skills to the next level and learn how to optimize your emails for different screen sizes, remove excess margins on mobile devices, and remove table borders with our detailed 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.

Topics covered in this HTML Email tutorial:

Changing font size across screen sizes, Removing excess margins on mobile, Removing the table borders

Exercise Preview

preview optimized

Exercise Overview

Our email is just about finished, but there are a few last improvements we can make to the spacing on mobile devices.

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.

If you completed the previous exercise, date-night-exclusive-picks.html should still be open, and you can skip the following sidebar. If you closed date-night-exclusive-picks.html, re-open it now. We recommend you finish the previous exercises (1C–2B) before starting this one. If you haven’t finished them, do the following sidebar.
If You Did Not Do the Previous Exercises (1C–2B)
1. Close any files you may have open.
2. On the Desktop, go to Class Files > yourname-HTML Email Class.
3. Delete the 2-Column Layout folder if it exists.
4. Duplicate the 2-Column Layout Footer Done folder.
5. Rename the folder to 2-Column Layout.

Sizing Up Paragraph Text on Mobile

If date-night-exclusive-picks.html is still open in your browser, reload the page. Otherwise, open this file in a browser from yourname-Responsive Email Class > 2-Column Layout.
Resize the browser window to see that the font size for the body paragraphs stays consistent in all 3 layout sizes.

Our desktop layout has a small font size of 12 pixel (a bit small for out taste, but that’s what the designer/client wanted). On mobile phones we’re going to change to an easier to read 16 pixels.
Leave the window open at any size that shows the desktop layout so we can contrast the font sizes when we reload the browser later.
In your code editor, open date-night-exclusive-picks.html from the 2-Column Layout folder if it isn’t already open. (Open the entire folder if your code editor allows.)
Before coding the CSS for the exclusive picks paragraph elements, let’s find the most efficient way to target them. Scroll to the paragraph for the boxing date (around line 127), and notice it is enclosed in a table cell with a class of deviceWidth:
```
<td class="deviceWidth" align="left" width="50%" valign="top" style="padding-left: 10px;">
   <h2>OUT OF THE BOX DATES: BOXING FOR&nbsp;TWO</h2>
```
Code Omitted To Save Space
```
</td>
```
Remember that all the other exclusive picks paragraphs are also within the cells that share the same class.
In the max-width: 680px media query, below the .deviceWidth rule, add the following bold rule:
```
.deviceWidth p {
   font-size: 16px !important;
}
```
Save the file and reload the browser.
Resize the browser window to see that in the 2-column layout, paragraphs are 12 px. When the layout changes to one column, the paragraphs change to 16 px.

Removing Excess Margins on Mobile

We have too much empty space around our content on mobile devices.

If date-night-exclusive-picks.html is already open in Chrome, skip this step. Otherwise open it from yourname-Responsive Email Class > 2-Column Layout.
To open the DevTools window, Ctrl–click (Mac) or Right–click (Windows) on the page and choose Inspect. At the top right of the DevTools panel click the button and choose Dock to right as shown below:
Resize the browser window’s content area to less than 400 pixels, and you can see how we’re really cutting into usable screen space with all of the padding on both the left and right sides.

By default, browsers add an 8-pixel margin to all sides of the <body>.
Return to your code editor.
At the top of the style tag add a rule for the body, as shown below in bold:
```
<style>
   body {
      margin: 0;
   }
```
NOTE: Mobile clients will honor this rule, but most desktop email clients will ignore it because they strip out body styles. We have plenty of space on the desktop, so this is no biggie.
Save the file and reload the browser. Make sure the browser is narrow. Great, we just gained 8 pixels of space all around!

Each exclusive picks listing with an image and a paragraph (such as the date with the boxing image and text) has 20 pixels of padding on all sides. While that looks nice on the desktop, it takes up too much space on mobile, especially on the left and right of the content.
Let’s shave off a bit of vertical padding and shave off even more horizontal padding on mobile. Return to your code editor.

Scroll down to around line 127 to find the table cell that holds the first date listing table (it currently has 20px of padding). Because we currently have no way of targeting this cell, give it the class of row, as shown below in bold:

<td class="row" align="center" width="100%" style="padding: 20px;">
   <table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
      <tr>
         <td class="deviceWidth" align="left" width="50%" valign="top" style="padding-right: 10px;">
            <a href="http://www.example.com" target="_blank"><img class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/couple-boxing@2x.jpg" width="290" alt="Couple Fighting"></a>

We gave this table cell a class of row because a date listing looks like a row on the desktop, and it basically behaves like one.

Repeat this process to give the class of row to the other 2 table cells that hold the tables for each date listing. (The 2nd one is around line 144 and the 3rd one is around line 161.)
Back up in the CSS, in the max-width: 680px media query, below the .wrapper rule, add the following bold rule:
```
.row {
   padding: 15px 10px !important;
}
```
This is 15 pixels of top and bottom padding and 10 pixels of left and right padding.
Save the file and reload the browser. The browser should still be at a narrow width. As you can see by the asymmetrical amount of padding around each date listing row, we’ve cut down the padding a bit.
Resize the browser window wider until the page changes to the 2-column desktop layout. Great, it still has 20 pixels of padding all around!

Removing the Table Borders

Now that we’ve freed up some mobile screen space, let’s remove the ugly borders we’ve been using to see the tables.

Return to your code editor.
Do one of the following to do a Find and Replace (your menu options may be named differently depending on your code editor):
- In Visual Studio Code: go to Edit > Replace.
- For other text/code editors: try Cmd-F (Mac) or Ctrl-F (Windows)
Enter the following (the Find and Replace labels may be named differently in your code editor):

Find: border="1"

Replace: border="0"
Click the Replace All button. A total of 9 replacements should be made.
Save the file and reload the browser. Resize the browser window to make sure there are no more borders in any of the 3 layouts. Much nicer!
Feel free to keep this page open in the browser as well as in your code editor. We’ll finalize the newsletter in the next exercise.

Find:	border=`"`1`"`
Replace:	border=`"`0`"`

Topics covered in this HTML Email tutorial:

Exercise Preview

Exercise Overview

If You Did Not Do the Previous Exercises (1C–2B)

Sizing Up Paragraph Text on Mobile

Removing Excess Margins on Mobile

Removing the Table Borders

Dan Rodney

How to Learn HTML Email