Type E:

Lay out your content within a single column grid, stacking each element – the headline, subheadings, paragraphs of text, lists, buttons and images, one above the other. If you’re including a data table, ensure its content will fit comfortably within the table data cells.

Even when laid out within a single column grid, content can be very difficult to read, particularly a paragraph of text, if it’s too close to the edge of a mobile devices’ display.

Insert typographic margins, of equal widths, to the left and right-hand sides of the content, using padding, to give it space to ‘breathe’.

Group related content together, and ensure the content in each group is relationally spaced as you scroll down. Subheadings should be closer to the paragraphs of text they relate to than to the content that precedes them. Buttons should be closer to the paragraphs of text they relate to than to the content that follows them. Each group of content should be separated enough to ensure the subscriber understands where it begins and where it ends.

It’s particularly important to bear this in mind when you’re working with subheadings or paragraphs of text that were previously positioned at the top of a centre, or right-hand column on tablet or desktop. As they’re unlikely to have any paragraph spacing above them, you’ll need to insert some by applying padding to the top of the <td> or <div> they’re contained within, utilising the @media query you’ve created to trigger responsive styling.

Reduce the font-size of the headline and subheadings to a point where the single column grid can comfortably contain their longest word. If a word is wider than the single column grid, it may break the layout and the mobile experience.

Enlarge the font-size of paragraphs of text, so that they’re legible on Retina or high-definition displays, which typically reduce their visual size.

A widow is a typographic name for a word that appears on its own, on the last line of a paragraph of text. The space it creates to its right, combined with the paragraph space that follows it, can disrupt the subscribers flow, as they read down the email.

To fix a widow, join the penultimate word in the paragraph of text to the widow using a non-breaking space (&nbsp;). This will force the last two words to appear together, and so resolve the occurrence of the widow.

Where I would be wary of applying this technique, and where your typographic judgement comes into play, is when the penultimate word in the paragraph of text is a long word, and fixing the widow creates a space on the penultimate line of the paragraph of text, that’s more disruptive than the original space it created. In such instances, I would recommend that you either edit the text, or leave the widow alone.

The ‘widow fix’ works best on short words. You can identify potential widows quickly, using your browser, and on testing tools such as Litmus or Email on Acid.

Paragraphs of text are much easier to read when they’re aligned left, as the eye has a point of reference to start reading each new line. There’s a tendency to centre paragraphs of text on mobile, and while this is acceptable on the headline, subheadings and buttons, it creates difficulties elsewhere.

While I covered this in the ‘Blue Link Issue’, there’s been some changes in the styling of these links in iOS 10. Some links that used to be rendered as ‘Blue Links’ are now rendered as ‘Grey Links’, but the same technique applies in restyling and disabling them.