Another amazing post from Anna over at Style Campaign, this time on using typographic grids in email design. Grids are well-worn territory in the web world, but haven’t been talked about much in the context of email, so it’s great to see someone tackle the topic so thoroughly.Check it out →
Latest Writing & Things of Interest
Over the past two years or so, I’ve been getting more interested in HTML email accessibility. It’s something I regrettably dismissed at one time and have been working to remedy ever since, even writing about the topic last year over on CSS-Tricks. There’s still a ton of work to be done for HTML email accessibility, but I recently saw something that could make developing accessible emails easier.
Mozilla’s accessibility evangelist, Marco Zehe, just published a post on Firefox’s new Accessibility Inspector, which is currently available in Firefox Nightly. Although the Accessibility Inspector isn’t a replacement for more robust testing using tools like screen readers or everything but the kitchen sink, it does provide an amazing outline of your web page (or email, in this case). By inspecting an element or the whole email, you can dig into the document outline (which is what screen readers use to navigate and expose content) and reveal all of the properties associated with the different elements in your document.
Depending on your email, this can be a very revealing exercise. I strive for simplicity in my own newsletters, which allows me to ditch HTML tables and create a cleaner, more semantic document. But I realize that’s not always an option for some brands. Many are still left designing with tables, which—when not accounted for—can result in some horribly inaccessible HTML emails. Sorry, DSW, but I’m using you as an example here.
See all those tables, rows, and cells? That’s not good for anyone. The Firefox Accessibility Inspector is the best tool I’ve seen yet to quickly reveal the structure of a document in an accessibility context and could lead to some useful insights that would help make HTML email campaigns better for everyone.
Still, it’s a bit lacking (it’s early days, after all). That’s why I like combining it with two add-ons for Firefox that provide slightly more robust testing.
The first is the WAVE Accessibility Extension, which allows you to quickly test and highlight problems with your document. Clicking on the WAVE icon pops open a sidebar that runs the WAVE evaluation and gives you a summary of any errors, alerts, and features found in your document, with options to dig deeper when needed. My favorite WAVE feature, though, is the “No Styles” option, which strips CSS from your document. While missing CSS is a rare occurrence in email these days, it is useful for seeing your document structure and further highlighting your use of semantic, accessible elements. The “Contrast” checker is really useful, too, grading your color choices based on WCAG guidelines.
Looks like I have some work to do before my next send.
My other tool of choice is the Total11y: Accessibility Toolkit add-on. This one adds the Khan Academy’s amazing tota11y.js file to your page, which lets you easily inspect and check accessibility features. The killer tool here is the experimental “Screen Reader Wand”, which allows you to hover over text and see what most screen readers will read out loud to low-vision users.
It’s a much more elegant interface, but lacks the depth of the WAVE add-on. That’s why I like combining both, adding in Firefox’s new Accessibility Inspector to fully round out the environment.
Have any more tools that are vital to your HTML email accessibility testing workflow? Email me and let me know.
I’ll be conducting a fair number of presentations and workshops this year, and I’ll be in the audience for many more. And, although I’m not the world’s most seasoned or polished public speaker, I feel like I’ve learned a lot about speaking and teaching over the last few years that could help out others.
One of my favorite parts of speaking is building slide decks. Yep, I’m one of those sickos that actually enjoys spending time in Keynote, shuffling things around, styling content, editing the hell out of presentations. During all that time in Keynote (or PowerPoint, if a conference organizer is especially masochistic), I’ve learned a few principles that make for better decks and, in turn, better all around presentations. These principles have been reinforced by sitting through far too many shitty talks that didn’t take them into account.
Hopefully some of these tips will help when you’re preparing your own presentations. Disagree with any of them? Email me and let me know—I’m always looking to improve my own presenting skills.
Keep Things Simple
You should always strive for the simplest slides possible, in every aspect. Keep the content simple, keep the design simple.
Too often, speakers (me included) try to cram too much into their slides—whether it’s words, pictures, examples, hashtags, Twitter handles, logos, or branding and design elements. Don’t do that. You’re just distracting—or worse, confusing—your audience.
People rag on the default themes in Keynote, PowerPoint, or Google Slides. But I find some of them wildly useful. As a Keynote user, I nearly always start from one of two themes: the Black or White ones. They are brutally simple and make for a wonderful foundation for presentations. Still, I think they could be simpler.
One of the first things I do is go into the master slides and delete a bunch of them. By default, both themes come with 12 slide variations. Although some of these can be useful, I’ve found most of them make for distracting slides. I prefer to whittle things down to about six variations:
- Title & Subtitle, which is used for the presentation title to kick things off.
- Title Center, which can be useful for sectioning the rest of the presentation, especially in workshops.
- Title Top, for headers on content slides.
- Title & Bullets, for when I do want text on my slides.
- Quote, for quotes, duh. I love using quotes to reinforce points or add a bit of humor to a presentation.
- Blank, which probably gets the most usage, to be honest.
I do think branding and style can be important for presentations, so I will customize the look and feel of those master slides. But don’t go overboard. Usually, this means updating the typeface (I love Avenir Next), adding background colors if needed, and updating the quote variation to look a lot better.
I’ve seen a lot of conference-provided themes that are almost universally complete garbage. They try to cram too much branding—logos, hashtags, dates, graphics, etc. If you run into these, push back and say you’ll use your own. If the organizer insists, use the colors from their themes, the title slide, and just build on completely blank slides for everything else. Don’t let terrible branding get in the way of good ideas.
The theme of simplicity should always carry over into the content of the slides, too. Don’t try to fit too much text, too many images, or too many branding elements on your slides. If you find your slides feeling cramped, break up one slide into a few. You can always go through them quickly, so don’t worry too much about having a ton of slides. If they’re simple and easy to follow, then you’re good.
Focus on Hierarchy
Although “less is more” is a good mantra for creating slides, sometimes you can’t get away from including a lot of content on a slide. That’s where hierarchy comes into play.
Hierarchy is organizing things to show levels of importance, usually using color, size, or position. Think of headings and paragraphs in an article like this. I use different size headings for the title, sections, and body of the article to make it easy to scan the article and understand what it’s about. The same principle should apply to your slides.
Use text size, color, and placement intelligently to make sure your audience can easily scan and follow along. A few simple guidelines:
- The bigger something is, the more important. The eye is drawn to bigger elements on a page or screen, so if you want someone to notice it, make it bigger. This applies to slides, but not all areas of life 😉
- More contrast equals more importance. Darker text on a light background or lighter text on a dark background draws the eye. If your copy is grey and your heading is black, people will notice the heading first.
- Position matters. English-speaking people (I’m in the US) read from top-to-bottom, left-to-right. Our eyes naturally go to the top left of a screen or page, so keep titles or important stuff there. Use the other space to reinforce that information. Use mostly left-justified text, too, for the same reasons and because it will help aid dyslexic audience members.
- Placement matters, too. Every element on a slide is related to every other element on that slide. Use this to denote importance. If you leave a lot of space around an element, that can make it stand out.
Use hierarchy to lead the audience around your deck. Focus their eyes—and, therefore, their attention—using these basic principles.
The Less Text, The Better
Although it may not seem like it from the length of this article, I firmly believe that the less text there is, the better—especially in presentations. People aren’t there to read a bunch of slides, they are there to listen to you. They want to hear a story, learn some new ideas, or be motivated. Forcing them to read a ton of tiny text on your slides actively works against all of that.
If you find yourself including a ton of text in your slides ask yourself, “Is a presentation the right format for this idea?” It’s OK if the answer is no. Sometimes ideas are better conveyed through articles, books, tweets, videos, or songs.
If you still have a lot of text and want to give a presentation, edit the hell out of your slides. Cut everything that’s non-essential, and then cut some more. Replace text with images, or explain your ideas verbally. Just get away from massive amounts of text. Your audience will thank you.
Keep Things Big
One of the side effects of using a lot of text is that the text ends up being small. And, depending on the size of the venue, when text is too small, it’s unreadable. The last thing you want during a presentation is everyone ignoring what you’re saying just to squint and struggle to read your slides. Keep your text as big as possible on your slides.
The same goes for any imagery, as well. Whether it’s a picture, illustration, icon, logo, graph, video, or GIF—try to keep them as large as possible so that people can easily parse what it is. I’ve found it helpful to split images onto their own blank slides, leaving any contextual text on the slides before or after the image so that people can quickly understand that content.
Keep Contrast in Mind
You will encounter a wild variety of venues. Some good, some bad, but all different—especially in regards to what projectors and screens they use and their lighting setups. All three can have a massive impact on how your slides display.
Horrible projectors with low resolution, old, yellowing screens, or too bright of lights in the room will result in slides that are hard to see. Especially for people sitting near the back of a room. You need to make sure all of your slides have enough contrast to be understandable no matter the environment.
Contrast is the difference between the lightest and darkest elements. For our purposes, that’s generally the text or images on the slide backgrounds. You want high contrast between the two so that they don’t blur together. Part of the reason why I suggest working from a simple theme like white on black or black on white. That’s about as high-contrast as you can get, so it’s hard to go wrong.
One situation where this can be difficult is when displaying code on screen. A lot of designers and developers use a dark theme: a dark background with colored text on top. It looks great on your laptop screen, but doesn’t translate well to the projection screen. I’d recommend either:
- Using a light theme, with a light background and dark text or…
- Drastically bumping up the size of the text in a dark theme
I understand the draw of dark themes for code. They’re gorgeous. I still use them a lot. But just make sure you buoy that lack of contrast with bigger text to keep code understandable for your audience.
Use Images Wisely
Speaking of images (or animations and videos): use them wisely. It can be tempting to put a bunch of timely, topical GIFs and memes into a presentation to illicit a laugh, but that can sometimes work against you. I definitely include funny GIFs on occasion, but I try to make sure they are in service to the point I’m making.
Always use imagery to reinforce your main message, not distract from it. And try to make sure the images are universally understood. People come from a diverse set of backgrounds, and not everyone understands what you understand. Even though you love the movie What We Do in the Shadows, not everyone will fully grasp the hilarity of Rhys Darby lecturing that they’re, “Werewolves, not Swear-Wolves.”
Also, strive for timeless slides. It can be very tempting to put in some topical images, but how do you think that will hold up down the road? If you’re sharing your deck with the audience or uploading it to something like Slideshare, it can stick around a lot longer than you think. Make sure that—when revisiting your deck a month, or even years, down the road—your audience isn’t left scratching their heads.
Finally, try to be diverse and inclusive in your use of imagery. If you’re using images of people in your presentation, use images that represent a mix of genders, races, ages, and cultures. Try to keep any prejudices (intentional or not) out of your presentations—you don’t want to exclude audience members through your use of images (or text, for that matter). Representation on stage absolutely matters, so take that into account. If you’re struggling to find diverse imagery, check out some of these resources:
- Nappy.co, which has a ton of free, beautiful photos of black and brown people.
- Representation Matters, which is all about ethnic and social diversity, and photography reinforcing a healthy body image.
- Blend, which has a massive library but isn’t free.
- The Women of Color in Tech Flickr Group, which has an awesome library that’s free to use.
One of my biggest pet peeves is an inconsistent slide deck. By inconsistent, I mean one that doesn’t have consistent use of type, sizing, structure, color, and design. All of those elements can be used to reinforce your messaging and, especially in the case slide structure, aid audience comprehension.
For the most part, you want the overall structure of your slides to remain the same so that viewers can quickly understand content as you jump from slide to slide. That’s why I cut out a lot of those default slide variations—the fewer the variations, the less mental overhead for your audience. Your slides don’t have to be identical, but you should work within some constraints to simplify things for the audience.
Plus, if you keep things consistent between slides, when you do break out of that consistency, the audience will be surprised. You can use this effect to your advantage to better make points in your presentation, creating memorable moments for your most important ideas.
Ask Organizers About Technical Considerations
A quick, but important, tip. Always communicate with organizers so that you fully understand the technical requirements for your presentation. The better prepared you are, the fewer things that will go wrong (although something nearly always goes wrong).
A few things to check on:
- Slide size (Standard 4:3 vs. Wide 16:9)
- Is audio supported?
- Is video supported?
- Will animated GIFs work?
- Will you be using their machine or yours?
- If theirs, are you using non-standard fonts that need to be installed?
- Keynote, PowerPoint, Google Slides, etc.?
- Are emojis supported? (I ran into this issue just the other week)
And definitely make sure you can access your slides multiple ways: save them on your machine, back up to something like Dropbox, download them to a USB, and export them as a PDF on all of the above. Just cover your bases.
Edit, Then Edit Some More
Finally, the most important: edit the hell out of your presentation. Once you think you have your deck done, make multiple passes and cut out as much as you possibly can.
Your presentation should be about your ideas and your speaking. The deck is only there to reinforce both. Far too often, speakers use their deck as a crutch to prop up an ill-conceived talk. By editing your content, you force yourself to refine your ideas into a more cohesive, impactful talk.
Once you’ve edited things down, ask a coworker, friend, or family member to go through it. See if they can understand things or if there are any weak points. Perform in front of them and ask them not to hold back on feedback.
Then edit again.
Again, I’m nowhere near the world’s best speaker. But I’ve done this a lot and received enough feedback to know generally what works and what doesn’t. Hopefully these tips can help you out and, again, if you have any more, send them my way.
I love this. Jason Kottke (who has the best freaking blog in the world) recently started sending an email newsletter (which is also fantastic). He noticed a slew of unsubscribes with each send and looked into things a bit more, soliciting advice from his massive network of followers. He then (correctly) concludes that, while subscriber counts and newsletter performance are important, they are not the main reason for sending a newsletter.
It’s all about connection and doing the job he was meant to do: sharing interesting things and writing about people, culture, and the world.
He learned something that a lot of people (and companies) sending emails haven’t learned in decades. It’s about the value you provide for the subscribers that stick around. Anything beyond that (massive lists, buzz, revenue, etc.) is just a bonus. If you focus on the value—which Mr. Kottke is most definitely doing—and stick to it, the rest will come along in time. Just give it that time.Check it out →
Cal Newport with some more astute observations on social media in general, and Facebook in particular. I totally agree with his point that the focus on privacy and data is important, but often overlooks the blind optimism in tech that’s behind a lot of what Facebook does. It freaks me out to think that someone as powerful as MZ seems to believe that AI and even more tech—not an understanding of human nature and empathy towards others—will be the fix for everything.Check it out →
I’ve been going through a ton of speaking proposals for Litmus Live, so this post on improving your talk abstract from Aja Hammerly is very, very relevant.
Speaking proposals are just like any other marketing material: put the value on the user, not the provider. And yes, a proposal is marketin. You’re marketing your talk and ideas. When you focus on yourself or your company in your proposal, you’re doing yourself a disservice. You want to make it clear to organizers that you are solely there to help attendees learn something valuable, something that will directly improve their work and lives. That’s it. Put all the focus on that.
Fortunately, a lot of the proposals for our conference do this well. Unfortunately, there are only so many speaking slots…Check it out →
Dealing with email clients—their rendering engines conspiring to ruin your day, week, and year. New ones pop up all the time, while old ones stick around way past their welcome.
Email takes resilience.
In the face of other channels, striving to dethrone email, the still powerful queen. Ignore the pundits, who—annually—proclaim the death of email. To those who say that email is only for spam, we know that email can make a difference.
Email takes belief.
Uncaring stakeholders looking for a quick buck. They rent lists, they buy them, they blast everyone to hell. We hold their hands, educate, and show them a better way—even when we’re intimidated or shot down. We stick to it.
Email takes grit.
Underfunded, understaffed. Ignored, ridiculed, and left to languish in a lonely cubicle. The people in the weeds know what email can do. They give it their all, even when others care far too little.
Email takes heart.
Explaining to our parents that we’re not spammers. Explaining to our bosses that mistakes happen. Explaining to our developers that you can’t do it that way. Explaining to each other what worked and what didn’t.
Email takes patience.
Dealing with it all, not letting it get us down. Understanding the craft, the skill, and the art in email. Exploring what’s possible and showing others the way.
Email takes resilience.
This is the first year we’ve had a code of conduct at Litmus Live. Although I’m sad that it’s taken us so long to adopt one, I’m terribly proud of the fact that we have one this year. Over on the Litmus blog, I wrote about why we crafted the code of conduct, what’s in it, and how it’s going to help an already welcoming and inclusive community event.
I still have some concerns about the policy, but I think we did a good job. I may publish something soon about the experience of writing the code of conduct, but until then…Check it out →
A really interesting question from Ernie Smith. I’ve often wondered why there aren’t more alternatives to TinyLetter. Or why TinyLetter wasn’t any better than it has been for the past X years. I know it comes down to money (companies like MailChimp go where the money is, which is currently marketing automation), but it seems like an editorial channel as valuable as email would warrant investment in better tools.
I’d love to see someone tackle this problem. A Ghost or WordPress for email sounds thoroughly intriguing. I know there’s TinyLetter and stuff like Curated, but don’t think these take things far enough. In the case of TinyLetter, it’s just a huge pain to use from a design perspective. Curated and its ilk have better designs, but lock you into a specific format (link roundups). Just think of the possibilities if we had an email-centric tool that allowed you to easily write, manage, edit, and publish editorial content of any length, along with doing it in a well-designed template with options for customization and branding.
Something for the ideas book. Maybe I’ll build something one of these days…Check it out →
Learn HTML Email Design & Development Today
Get the 225-page book and over 6 hours of video tutorials that teach you everything you need to know about modern, responsive, and interactive HTML email design.Start Learning Now →