Responsive HTML Email Template Tutorial

YouTube player

In this video we’ll build a complete mobile friendly HTML Email Template with responsive HTML tables. The email template that we build in the tutorial has been tested as responsive in Gmail, the Gmail App and on the iOS Email App. The email will also show and display properly on a number of other mobile, tablet and desktop email clients.

0:00 Introduction

0:21 HTML Email Design Overview

2:55 – Tutorial Files Download Overview

3:57 – Visual Studio Code Text Editor

5:40 – index.html HTML File Info

7:28 – Centering the HTML Email Template

8:30 – Centering and Email Width CSS

13:16 – Header & Logo Table Row HTML & CSS

17:32 – Banner Image HTML

18:50 – Responsive Three Column Section HTML

22:14 – Three Column Section CSS

26:00 – Three Column HTML Continues

30:15 – Social Media Table Row HTML

33:35 – Email Footer HTML & CSS

40:05 – Adding CSS Media Queries for Responsiveness

44:00 – Testing the Completed HTML Email Template!