ºÝºÝߣ

Editor's Notes

• #2: intro¡­ EMAIL DESIGN: Not sexy or gloriousOften tedious, even frustrating But it¡¯s part of an ongoing dialogue with your customers¡­ extends the UX¡­ Often a chance to preach to the choir. Your best advocates.
• #3: Some clients I¡¯ve work withsome full sites¡­ some email¡­ some, full service digital design for years
• #10: lately, going responsive
• #13: ROADMAP??STRATEGERIES??Design/code at a high level ??Nerd out on some cool stuff
• #15: What kind of emails do YOU need? refer to list, explain types.
• #16: Indicators vary between vertical industry, time of year, etc. Best to check year over year stats, plus A/B test for better results Actual performance is based on real-world numbers. Varies with the action required, cost of product ANY SUCCESS is good because the cost is generally low. ??Sales & Inventory example: Shoulder season
• #17: Finding a designer is tough because: ? unglamorous subset of web design ? specialty skill, lots of nuance from general web design ? tedious ? can be costly (¡°fuck you price¡±)
• #18: You will need to take this seriously for it to be effective. If you¡¯re hiring a designer, make sure they understand what¡¯s at stake. You need a professional who understands the peculiar nature of email design.
• #19: This process needs a roadmap, or else it¡¯ll become that blog you haven¡¯t updated in 5 years. This is a chance to have an INTIMATE dialog with your CORE audience. ??BE CONSISTENT: users like to know when to EXPECT your regular communications Set a realistic pattern. Routine will also make UNEXPECTED emails feel more SPECIAL
• #20: Drafts almost never work perfectly the first time. Plan on testing the BEJESUS out of it. When the deadline is near, you¡¯re the mechanic. It¡¯s an iterative process where the marketer will need to get his/her hands dirty in code. Make sure you or your staff are equipped to handle the challenge.
• #21: Some of the tools of the trade.
• #22: Pretty emails are great. But understand what is expected of you to keep them pretty. It is REASONABLE for you to ask for source files as part of the deliverable. A good designer should provide source files optimized for your team¡¯s skill set. They should be organized and easy for you to use and replicate.
• #23: PUBLIC SERVICE ANNOUNCEMENT - I see this all the time Text copied from Word can contain invisible formatting that junks up the code in the WYSIWYG. Strip the formatting by pasting it into a PLAIN TEXT editor and THEN copying it again before pasting into your WYSIWYG.
• #24: The email¡¯s purpose can drastically alter the design approach. Let the content lead the design. This is why you need more than one template.
• #25: Don¡¯t be TONE-DEAF. If your message is simple, personal, intimate, or serious¡­ take it down a notch with the graphics. Especially if you¡¯ve screwed up, keep it simple and direct.
• #26: Got something to sell? Bring the noise. Make it hot. Song and dance time. Show off your moves. Use impactful creative to entice.
• #27: For daily or regular communications, dynamic information can be scraped from an HTML page. Content will reflect the content of that page when the email is SENT (not received). exception: images that are overwritten (web cams) will show the latest version.
• #28: Email is a specialty sub-set of web design. Very few designers actually practice it regularly.
• #29: ??There are a slew of email clients (outlook, gmail, etc) with varying degrees of antiquated code support. ??ESP: Mailchimp, Campaign Monitor, Exact Target, Silverpop, Blue Hornet, Constant Contact The templates should be formatted to function in your particular system. ??Make sure it¡¯s designed to suit the strengths or weaknesses of your team.
• #31: Your email should retain elements of your site¡¯s look and feel. But it¡¯s a different animal. Keep it simple. Keep it small. ??600 - 700 pixels A lot can go wrong if the layout get¡¯s too complicated.
• #32: Lots of competition. A narrow window pane due to task-based UI and palettes. dealing with Task-oriented users. Quick to delete and move on.
• #33: The Clymb has just redesigned their site and their emails. Rolling it all out at once. This modest canvas has one unlimited dimension. The Y-axis.
• #34: Modern HTML best practices were developed for quickly evolving web browsers. Email clients have not adapted their rendering abilities in the same way. We have to use older, more basic approaches we would never use for the web. Finding people who still know how to code this way can be difficult.
• #35: The anatomy of an HTML email.
• #36: This is all the code that would be needed to make this into a modern web page.
• #37: GAH! This is the code to make it an EMAIL. It¡¯s about THREE times as long. It¡¯s full of bloated, outdated code.
• #38: Responsive design has is the hot garbage. Email can be responsive. It requires special design consideration and simplified layout.
• #39: But the required hacks can severely increase rendering errors and testing time. I¡¯ve tested certain emails over 100 times.
• #40: Frameworks can offer pre-built solutions coded in a generic way. Great for practice or as a baseline to work from. Some Email Service Providers offer responsive templates which are tested and proven.
• #41: These are the 10 email clients. Outlook is on the decline each year. It won¡¯t go away. But your analytics may vary. Consider that most people have work and personal email accounts. Personal email is usually web-based. I even have a separate junk mail account.
• #42: ? How, when, where will this message be delivered? Be ready for lots of testing. Make sure your team is up for the challenge.
• #44: If you¡¯re not going to learn to code, just understand that there¡¯s a lot to it.
• #45: Emails can include images. But shouldn¡¯t rely on them to convey the message, if possible. Be sure to mix up the images and type from one campaign to another to avoid looking spammy.
• #46: The Clymb occasionally includes animation to grab attention. example of re-appropriating old technology for the modern world
• #47: CSS is used to format everything on the web. Many modern CSS properties don¡¯t work in certain email clients. For best results, use inline styling and be as explicit as possible. WEB FONTS: highly unreliable, fallback sucks
• #48: Pre-head text offers a preview of the email¡¯s contents. You can rig it to create an effective teaser and help entice the user. Feel free to HIDE it but don¡¯t FORGET IT. (comment the hell out of it)
• #49: Integrating with social media is tough. Do you even need to? Maybe. But think it through. Don¡¯t dilute the message.
• #50: Including easy opt-out links establishes trust with the user. You don¡¯t want to spam users who don¡¯t want your message. Offer multiple message types so the user can receive only the communications they like.
• #51: Not my area of expertise. There are thousands of articles about how to optimize subject lines.
• #52: For emails with MULTIPLE calls to action, consider including your site navigation.
• #53: There are lots of reasons your email can end up in the SPAM folder. ESP¡¯s have lots of tools to help.
• #54: All that pain in the ass old school code? Inliners can do reformat it for you. Downside: tough to troubleshoot unfamiliar code.
• #55: Great resources to test the rendering of your email.