Crafting E-ective HTML Email(2022)[Parmentier et al][] PDF
Preview Crafting E-ective HTML Email(2022)[Parmentier et al][]
Crafting E-ective HTML Email Copyright © 2022 SitePoint Pty. Ltd. Author:Rémi Parmentier Series Editor:Oliver Lindberg Product Manager:Simon Mackie Technical Editor:Mark Robbins English Editor:Ralph Mason Cover Designer:Alex Walker Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 10-12 Gwynne St, Richmond, VIC, 3121 Australia Web: www.sitepoint.com Email: [email protected] About the Author Rémi Parmentier is a French front-end developer working at his own small web development agency,Tilt Studio. He loves to learn, and enjoys even more to teach. This led him on a joyful quest to understand and demystify HTML email coding. Rémi runs workshops,gives talksand writes articles onhis blogto help others code better HTML emails. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visithttps://www.sitepoint.com/to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. Table of Contents Chapter 1: Crafting HTML Emails: Coding HTML Emails: A Modern Perspective ...........................................................viii Email Isn’t Dead...................................................................................................................ix HTML Emails Aren’t Stuck in the 1990s.....................................................................x Defining an Email Client.................................................................................................xii “Email Developer” Is a Job...........................................................................................xiii Conclusion..........................................................................................................................xvi Chapter 2: Essential Best Practices........................................17 Supporting the Outlooks...............................................................................................18 How the Outlook Rendering Engine Works..............................................18 Conditional Comments.......................................................................................19 mso- Properties........................................................................................................20 VML..............................................................................................................................21 Rendering at 120dpi..............................................................................................22 Making Your Emails Work without <style>...........................................................23 Avoiding Automatic Links.............................................................................................24 Using Real URLs................................................................................................................26 Adding an Empty <head>................................................................................................27 Keeping Email Sizes below 102KB..............................................................................28 Removing CSS Comments...........................................................................................30 Using an HTML5 Doctype.............................................................................................31 Conclusion...........................................................................................................................33 Chapter 3: Adding Interactivity to HTML Emails.......34 Hover Effects on Link Buttons....................................................................................35 Swapping Images on Hover.........................................................................................36 Toggling Content on Click............................................................................................38 A Basic Checkbox..................................................................................................39 Wrapping a Checkbox inside a Label..........................................................39 Conditional Comments for Outlook.............................................................40 Hiding the Checkbox in Other Email Clients............................................41 Using the ~ General Sibling Combinator....................................................43 Conclusion...........................................................................................................................44 Chapter 4: Accessibility in HTML Emails...........................45 Using Semantic Markup................................................................................................46 Adding role="presentation" to Tables........................................................46 Using Headings, Paragraphs, and Lists.......................................................47 Adding role="article"........................................................................................47 The alt Attribute...............................................................................................................47 Setting an Empty alt Attribute.......................................................................47 Setting Appropriate Alternative Text............................................................48 The lang Attribute.............................................................................................................49 Conclusion...........................................................................................................................49 Chapter 5: A Case Study: Redesigning SitePoint’s Weekly Newsletter .........................................................................................51 A Full-width Header........................................................................................................52 A More Semantic Article Block..................................................................................55 Responsive versus Mobile First..................................................................................57 Conclusion...........................................................................................................................59 Code Samples Code in this book is displayed using a fixed-width font, like so: <h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p> Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed: function animate() { ⋮ new_variable = "Hello"; } Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored: URL.open("https://www.sitepoint.com/responsive-web- ➥design-real-user-testing/?responsive1"); Tips, Notes, and Warnings Hey, You! Tips provide helpful little pointers. Ahem, Excuse Me ... Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always ... ... pay attention to these important points. Watch Out! Warnings highlight any gotchas that are likely to trip you up along the way. Chapter Crafting HTML 1 Emails: Coding HTML Emails: A Modern Perspective Rémi Parmentier HTML email is a part of pretty much every project, but even many of the most experienced web developers dread having to work with it. This series of tutorials will explore the ins and outs of coding modern HTML emails, showing you how to love the craft rather than fear it. Email Isn’t Dead Email was born in 1971. And it died in 2007,according to FastCompany. Or in 2009,according to The Wall Street Journal. Or maybe it was in 2011,according to Mark Zuckerberg. No one really seems to know. What we do know, however, is that email is still highly effective: “Email drives an ROI of $36 for every dollar spent”, according to email marketing platform Litmus. Four billion people use email daily, according to data platformStatista. In 2021, 41.5% of brands interrogated in theLitmus State of Email reportconsider email marketing to be critical to company success—an 8.7% increase from just three years earlier. The following diagram shows the percentage of brands for whom email marketing is critical to success, rising from 32.8% in 2018 to 41.5% in 2021.
The list of books you might like
