mobile screenshot
View in your browser Type E: 07. The Mobile Issue The percentage of subscribers that open their emails on their mobile device [] continues to remain high, and HTML typography plays an important part in ensuring their mobile experience is a great experience. In this issue, I’ll look at a few techniques to help you fine-tune your HTML typography for mobile. Lay out your content within a single column grid. 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. Insert typographic margins. 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’. HTML: <td style="padding-left:20px; padding-right:20px;"> Why use padding for typographic margins and not margin for typographic margins? Within the CSS Document Object Model, padding is the property that ‘wraps’ the content, and as such is the logical property to use for inserting typographic margins. margin, on the other hand, ‘wraps’ the border, the padding and the content, and while it can be used to insert typographic margins, doing so prevents you from using the border property, should you need to. Group related content together. 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. CSS: @media screen and (max-device-width:575px), screen and (max-width:575px) { .rightColumn {padding-top:10px !important;} } 10% OFF A Type of email. Use offer code typee080217* Buy now [] *Valid until midnight GMT, 8th February 2017 Reduce the font-size of the headline and subheadings. 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. CSS: @media screen and (max-device-width:575px), screen and (max-width:575px) { h1 {font-size:50px !important;} } HTML: <h1 style="margin:0; font-weight:lighter;">Headline</h1> Enlarge the font-size of paragraphs of text. 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. CSS: @media screen and (max-device-width:575px), screen and (max-width:575px) { p {font-size:16px !important; line-height:24px !important;} } HTML: <p style="margin:0;">Paragraph of text.</p> Fix widows. 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. This will force the last two words to appear together, and so resolve the occurrence of the widow. HTML: <p style="margin:0;">Paragraph of text with a potential widow at the&nbsp;end.</p> 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 []. Align text left. 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. Fix Apple links. 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. In addition to these techniques, there are other ways in which you can enhance the subscriber’s mobile experience, by featuring web fonts [] for example, or leveraging a devices call functionality []. Ensure you keep the subscriber at the forefront of your design and development process, and test on real devices as well as on testing tools such as Litmus [] or Email on Acid [], so that your experience reflects theirs. ■ 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 [ E:]. Thank you for subscribing! Beyond the Envelope™ © Paul Airy, 2017 +44 (0) 7962 177 477 (International) 07962 177 477 (UK) @Paul_Airy Change your preferences Unsubscribe If you want to resubscribe [], you know where to reach me!

Want to see what this email looks like in 50+ email clients? Try Litmus Free

We’ve successfully exported your scoped email into builder.

We just opened a brand new tab in your browser, in there you’ll find your scoped email ready to be edited.

Take me back to scope