Type E: 09. The List Issue: Part One.

Welcome to Type E: an email newsletter devoted to typography in email.

09. The List Issue: Part One

<li>

Ordered list tag. Unordered list tag. List item tag.

Lists are used to display content that’s intended to be quickly and easily digested by the subscriber. However, in a desire to control the way they’re rendered across email and webmail clients, they’re often developed in a way that is not semantically correct.

In this issue, I’ll look at how you can develop lists in a way that is semantically correct, at the way email and webmail clients render them by default, and how you can restyle them so that they render in a way that works for your email.

Developing a semantically correct list.

To develop a semantically correct list, first wrap each of your list items within a pair of list item tags (<li>). Then wrap your list items within a pair of unordered list tags (<ul>), to create an unordered list, or a pair of ordered list tags (<ol>), to create an ordered list.

		HTML
		<ul>

		<li>List Item One</li>

		<li>List Item Two</li>

		<li>List Item Three</li>

		</ul>

An unordered list, developed in a way that is semantically correct.

List Item One
List Item Two
List Item Three

An unordered list.

List Item One
List Item Two
List Item Three

An ordered list.

The way email and webmail clients render lists by default.

Email and webmail clients apply their own styles to lists, the most common being padding:0 0 0 40px;, which they apply to <ul> and <ol> tags, rendering a left indent on a list, and margin:15px 0 15px 0;, which they apply to <ul> and <ol> tags, rendering spacing above and below a list. Gmail also applies margin:0 0 0 15px; to each <li> tag, rendering a 55px left indent. Yahoo! Mail applies margin:0; to <ul> and <ol> tags, rendering no spacing above and below a list, and also renders each list marker as a circle, rather than a disc.

Here are some more examples of the styles that email and webmail clients apply to <ol>, <ul> and <li> tags by default:

Apple Mail macOS, Apple Mail iOS
ul, ol	padding:0 0 0 40px;
ul, ol	margin:15px 0 15px 0;
li	padding:0;
li	margin:0;

Default styling applied to lists on Apple Mail macOS, Apple Mail iOS.

Gmail: Safari, Firefox, Chrome, Explorer
ul, ol	padding:0 0 0 40px;
ul, ol	margin:15px 0 15px 0;
li	padding:0;
li	margin:0 0 0 15px;

Default styling applied to lists on Gmail.

Yahoo! Mail: Safari, Firefox, Chrome, Explorer
ul, ol	padding:0 0 0 40px;
ul, ol	margin:0;
li	padding:0;
li	margin:0;

Default styling applied to lists on Yahoo! Mail.

AOL Mail: Safari, Firefox, Chrome, Explorer
ul, ol	padding:0 0 0 40px;
ul, ol	margin:15px 0 15px 0;
li	padding:0;
li	margin:0;

Default styling applied to lists on AOL Mail.

Outlook.com: Safari, Firefox, Chrome, Explorer
ul, ol	padding:0 0 0 40px;
ul, ol	margin:15px 0 15px 0;
li	padding:0;
li	margin:0;

Default styling applied to lists on Outlook.com.

Outlook 2007, 2010, 2013, 2016: Explorer
ul	padding:0;
ul	margin:0 0 0 40px;
ol	padding:0;
ol	margin:0 0 0 48px;
li	padding:0;
li	margin:0;
li (first list item)	padding:0;
li (first list item)	margin:19px 0 0 0;
li (last list item)	padding:0;
li (last list item)	margin:0 0 15px 0;

Default styling applied to lists on Outlook 2007, 2010, 2013, 2016 (Explorer).

The way email and webmail clients render lists by default may not be how you would like them displayed in your email. If not, you’ll have to restyle the styles on your <ul>, <ol> and <li> tags.

The left indent

By default, the left indent is the distance between the left edge of the <td> or <div> containing your text, and the first character of your list item – not the list marker.

Restyling the styles on your <ul>, <ol> and <li> tags.

Except when developing lists for some versions of Outlook (which I’ll come to in part two), you can define your lists left indent by applying padding-left inside your opening <ul> and <ol> tags, and the spacing above and below your list by applying margin-top and margin-bottom inside your opening <ul> and <ol> tags. The margin-top and margin-bottom you apply inside each of your opening <li> tags defines the spacing above and below each of your list items.

In this example, the <ul> is styled with padding:0 0 0 20px; and margin:0;, the first two <li> tags are styled with margin:0 0 10px 0;, and the last <li> tag is styled with margin:0;:

		CSS
		<ul style="padding:0 0 0 20px; margin:0;">

		<li style="margin:0 0 10px 0;">List Item One</li>

		<li style="margin:0 0 10px 0;">List Item Two</li>

		<li style="margin:0;">List Item Three</li>

		</ul>

Restyling the ul tag, using padding to define the lists left indent and margin to define the spacing above and below the list. Restyling the first two li tags to define the spacing below each list item, and restyling the third li tag to restyle Gmail default styling.

List Item One
List Item Two
List Item Three

The restyled list.

In this example, the <ul> is styled with padding:0 0 0 40px; and margin:0;, the first two <li> tags are styled with margin:0 0 5px 0;, and the last <li> tag is styled with margin:0;:

		CSS
		<ul style="padding:0 0 0 40px; margin:0;">

		<li style="margin:0 0 5px 0;">List Item One</li>

		<li style="margin:0 0 5px 0;">List Item Two</li>

		<li style="margin:0;">List Item Three</li>

		</ul>

List Item One
List Item Two
List Item Three

The restyled list.

As you’ve seen so far, you can develop lists in a way that is semantically correct, and so that they render in a way that works for your email. In part two, I’ll look at some more restyling techniques. ■

Type E: is an email newsletter devoted to typography in email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions. Thank you for subscribing!