Designing stunning newsletters with Nicolas Ganivet - - PowerPoint PPT Presentation

▶

Mar 11, 2023 497 likes •806 views

Designing stunning newsletters with Nicolas Ganivet nicolas@cividesk.com http://www.cividesk.com Agenda Why is it so hard? What are the rules? Lets get to work Why is it so hard? Not everyone is using the same email client

SLIDE 1

Designing stunning newsletters with

Nicolas Ganivet nicolas@cividesk.com http://www.cividesk.com

SLIDE 2

Agenda

Why is it so hard?
What are the rules?
Let’s get to work

SLIDE 3

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

SLIDE 4

Email client market share

Source: http://www.campaignmonitor.com/resources/will-it-work/email-clients/

SLIDE 5

Source: http://emailclientmarketshare.com/

SLIDE 6

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

SLIDE 7

Some statistics

In March 2013

– The percentage of spam in email traffic averaged 70.1% – Malicious files were found in 4% of all emails

What is the economic impact?

– End-user time – YOUR time – Software (acquisition and maintenance) – IT/friends/neighbors support (remediation time)

Source: Kaspersky lab, http://www.kaspersky.com/about/news/spam

SLIDE 8

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)

SLIDE 9

Email design

SLIDE 10

Email design

SLIDE 11

Above the fold

SLIDE 12

Below the fold

Anything goes …
But don’t use images for content!

SLIDE 13

SLIDE 14

Email composing

What is the problem? Aren’t HTML and CSS web standards?

SLIDE 15

Source: http://www.fixoutlook.org/

SLIDE 16

http://www.campaignmonitor.com/css/

SLIDE 17

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

SLIDE 18

Practical example

SLIDE 19

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

SLIDE 20

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

SLIDE 21

SLIDE 22

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)

SLIDE 23

Hands-on: Web designer

SLIDE 24

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?

SLIDE 25

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

SLIDE 26

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

SLIDE 27

Well worth the effort!

SLIDE 28

Thank you.

SLIDE 29

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.