Publishing A Podcast The Templates

At Complete Developer Podcast we use several HTML templates for our emails and show notes. I developed these templates so whomever is writing the show notes or emails will be able to maintain the same format.

Code for HTML Templates

The Wednesday and Friday emails have inline CSS since they are for MailChimp. The CSS for the Show Notes is shown below the HTML templates.

Wednesday Show Outline Emails

Each week we send out the outline for the upcoming episode to our subscribers. The following is the HTML template used by Complete Developer Podcast for this email.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html><shownotes>
    <div class="posts">
        <h1 style="text-align: center;display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;">Episode #: Title</h1>
        <p style="text-align: justify;line-height: normal;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;"></p>
        <p style="text-align: justify;line-height: normal;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;"></p>
    </div>
</shownotes>
<outline>
    <ol style="list-style-type: upper-roman;">
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol style="list-style-type: upper-alpha;">
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
    </ol>
</outline>

Episode Show Notes

Our process of writing show notes has evolved as we’ve grown as podcast hosts and learned to do a better job. I have to give a shout out to The Podcast Dude as many of the improvements I’ve made to our process and writing have come from his show and The Seanwes Podcast.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div  class="shownotes post">
    <blockquote></blockquote>
    <p></p>
    <p></p>
    <div class="breakdown">
        <h3>Episode Breakdown</h3>
        <ul>
            <li>
                <h4><strong></strong></h4>
                <p></p>
            </li>
            <li>
                <h4><strong></strong></h4>
                <p></p>
            </li>
            <li>
                <h4><strong></strong></h4>
                <p></p>
            </li>
            <li>
                <h4><strong></strong></h4>
                <p></p>
            </li>
            <li>
                <h4><strong></strong></h4>
                <p></p>
            </li>
        </ul>
    </div>
    <div class="iotease">
        <h3>IoTease</h3>
        <p></p>
    </div>
    <div class="tricksoftrade">
        <h3>Tricks of the Trade</h3>
        <p></p>
    </div>
    <div class="links">
        <h3>Links</h3>
        <div class="grid col-300">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div class="grid col-300">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div class="grid col-300 fit">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
    </div>
    <div class="noshow editornotes">
        <h3>Editor's Notes:</h3>
        <p></p>
    </div>
</div>

Friday Extras Email

On Fridays our subscribers receive an email with more detailed notes developed from the published show notes and a preview of any blog posts coming from the material. We also include extra links that were not used in the show but are secondary references. This is the HTML template I developed for writing these emails.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<shownotes>
    <h1 style="text-align: center;">Extras from Episode #: <br><span style="font-variant: small-caps;">[Title]</span></h1>
    <div class="posts">
        <blockquote style="text-align: justify; font-weight: 400; font-style: oblique;"></blockquote>
        <p style="text-align: justify; font-weight: 400;"></p>
        <p style="text-align: justify; font-weight: 400;"></p>
        <div class="bloglist">
            <ol style="list-style-type: upper-roman; font-weight: bold;">
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
                <li>
                    <p style="text-align: justify; font-weight: 400;"></p>
                </li>
            </ol>
        <div class="breakdown">
            <h3 style="text-align: center;">Episode Breakdown</h3>
            <h4><strong></strong></h4>
            <p style="text-align: justify; font-weight: 400;"></p>
            <h4><strong></strong></h4>
            <p style="text-align: justify; font-weight: 400;"></p>
            <h4><strong></strong>Code Cues</h4>
            <p style="text-align: justify; font-weight: 400;"></p>
            <h4><strong></strong></h4>
            <p style="text-align: justify; font-weight: 400;"></p>
        </div>
        <div class="iotease">
            <h3>IoTease: March is for Makers</h3>
            <p></p>
        </div>
        <div class="tricksoftrade">
            <h3>Tricks of the Trade</h3>
            <p style="text-align: justify; font-weight: 400;"></p>
        </div>
        </div>
    </div>
</shownotes>
<emailextras>
    <div class="links">
        <div style="text-align: center;"><span style="font-size: 20px;">Links from the Show</span></div>
        <br>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>
    <div class="extras">
        <div style="text-align: center;"><span style="font-size: 20px;">Additional Links</span></div>
        <br>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>
</emailextras>

Code for CSS

Our WordPress site has a lot of custom css. The below code is the CSS I developed specifically for show notes and blog posts on the website.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
.post-justified {
	text-align: justify;
	text-justify: auto;
}
/*Posts and Show Notes*/
shownotes p {
	text-align: justify;
	text-justify: auto;
}
.noshow {
	display: none;
}
.breakdown ol {
	list-style-type: upper-roman;
	font-weight: 600;
}
.breakdown h4 {
	font-weight: 600;
}
.breakdown p {
	font-weight: 400;
	text-indent: .7px;
}
.bloglist ul li,
.breakdown ul li,
.breakdown li,
.bloglist li {
	list-style-type: none;
	font-weight: 600;
}
.breakdown strong {
	color: #1896ea;
}
.bloglist p {
	font-weight: 400;
	font-size: 1em;
	margin: .5em 0 .5em 2em;
}
.nested-1 li {
	list-style-type: upper-alpha;
	font-weight: 400;
}
.nested-2 li {
	list-style-type: lower-alpha;
	color: #3d3d3d;
	font-weight: 400;
}
.nested-3 li {
	list-style-type: decimal;
	color: #4d4d4d;
	font-weight: 400;
}
.links {
	text-align: left;
}
.links h3 {
	text-align: center;
}
.links ul {
	padding: 0;
	text-align: left;
}
.links ul li {
	list-style-type: none;
}
.post {
	text-align: justify;
	text-justify: auto;
}
.breakdown .roman ol li,
.breakdown .roman li,
.roman ol li,
.roman li {
	list-style-type: upper-roman;
	font-weight: 600;
}
.breakdown .roman p,
.breakdown .roman ol li p,
.breakdown .roman li p,
.roman p,
.roman ol li p,
.roman li p {
	font-weight: 400;
	font-size: 1em;
}
.breakdown h3,
.iotease h3,
.tricksoftrade h3 {
    text-align: center;
}
.iotease .title,
.tricksoftrade .title {
    font-variant: small-caps;
    text-align: left;
}
.enlarge {
	font-size: 1.25em;
}
.normy {
	font-weight: 400;
}