Designing stunning newsletters with Nicolas Ganivet - - PowerPoint PPT Presentation

designing stunning newsletters
SMART_READER_LITE
LIVE PREVIEW

Designing stunning newsletters with Nicolas Ganivet - - PowerPoint PPT Presentation

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
SLIDE 1

Designing stunning newsletters with

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

slide-2
SLIDE 2

Agenda

  • Why is it so hard?
  • What are the rules?
  • Let’s get to work
slide-3
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
SLIDE 4

Email client market share

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

slide-5
SLIDE 5

Source: http://emailclientmarketshare.com/

slide-6
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
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
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
SLIDE 9

Email design

slide-10
SLIDE 10

Email design

slide-11
SLIDE 11

Above the fold

slide-12
SLIDE 12

Below the fold

  • Anything goes …
  • But don’t use images for content!
slide-13
SLIDE 13
slide-14
SLIDE 14

Email composing

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

slide-15
SLIDE 15

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

slide-16
SLIDE 16

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

slide-17
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
SLIDE 18

Practical example

slide-19
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
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 21
slide-22
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
SLIDE 23

Hands-on: Web designer

slide-24
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
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
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
SLIDE 27

Well worth the effort!

slide-28
SLIDE 28

Thank you.

slide-29
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.