Designing stunning newsletters with Nicolas Ganivet nicolas@cividesk.com http://www.cividesk.com
Agenda • Why is it so hard? • What are the rules? • Let’s get to work
Why is it so hard? • Not everyone is using the same email client – Desktop: Outlook, Apple Mail – Webmail: Gmail, Yahoo! Mail, Hotmail – Mobile: iOS devices, Android • And of course: – Each displays your email differently – The screen size makes a difference
Email client market share Source: http://www.campaignmonitor.com/resources/will-it-work/email-clients/
Source: http://emailclientmarketshare.com/
Why is it so hard? • There are (some) bad guys on the Internet – Sending spam, or phishing emails – Installing adware, viruses and other malwares • And of course: – Your email client wants to protect you – Your organization wants to protect you – Your service provider wants to protect you – Your government wants to protect you
Some statistics • In March 2013 – The percentage of spam in email traffic averaged 70.1% – Malicious files were found in 4% of all emails Source: Kaspersky lab, http://www.kaspersky.com/about/news/spam • What is the economic impact? – End-user time – YOUR time – Software (acquisition and maintenance) – IT/friends/neighbors support (remediation time)
What are the rules? • Email design: – Design for the display area and the fold – Don’t use images for your content • Email composing: – Understand what each email client supports – Be mobile-ready with an adaptive design • Email sending: – Comply with the CAN-SPAM act – Test, and test some more (before blasting away)
Email design
Email design
Above the fold
Below the fold • Anything goes … • But don’t use images for content!
Email composing What is the problem? Aren’t HTML and CSS web standards?
Source: http://www.fixoutlook.org/
http://www.campaignmonitor.com/css/
The big No- no’s • <div> for design – Use tables for design, <div> for styling • CSS styles – repeat inline styles in all tags • Styles in the <body> tag – use a 100% width table • PNG images – use JPG / GIF • Resizing images – but still include alt/width/height attributes • Background images – use a single color • Padding attributes – use margin instead • Custom HTML bullets – use only <li> or * and - characters • Single font designation – use font stacks instead • Javascript and/or animated GIF’s – create static emails • Embedded videos – use a thumbnail that links to video
Practical example
Hands-on: Web Designers • Go to: http://cividesk.com/index.php/civicon-design • Think about how you would implement this design: – Only tables – No background images – Maximize amount of text
Hands-on: End users • Go to: http://cividesk.com/index.php/civicon-users • Copy text from the web page • Log into your CiviCRM • Create a new mailing (Mailings / New mailing) • Go through steps 1-2 with anything • Click ‘Source’, paste copied text, unclick Source
Hands-on: End users • Create your own newsletter: – Change title / text of template articles – Upload new picture (remember to resize first!) – Add a new article (right click, row operations)
Hands-on: Web designer
Hands-on debrief • What are the issues you encountered? • How does the experience compare to a marketing email service provider? • How can web designer and end-user work together to create the newsletters? • What are the benefits & trade-offs of working with CiviCRM to create/send newsletters?
Email sending • Transactional emails vs mass-mailing • CAN-SPAM act: – have accurate “From” and “To” addresses, email headers, and routing information that identifies the sender – avoid deceptive or misleading subject lines – contain an unsubscribe or opt-out mechanism, and promptly honor opt-out requests – identify itself as a commercial email and contain a valid physical address for the sender
Email testing (prior to blasting) • The DIY route: – Enroll colleagues, volunteers, family & friends – Cover at least the top 10 email clients • Use an email testing service (costs $$): • http://litmus.com • http://www.emailonacid.com • http://previewmyemail.com
Well worth the effort!
Thank you.
Rules • Purpose: a fun learning experience • Introduce yourself to your neighbors • Do not hold your questions – please interrupt • Share your experiences freely with the group • Breaks, coffee room, etc.
Recommend
More recommend
