SlideShare a Scribd company logo
Tuesday, November 13, 12
The State of HTML
            Email Newsletters

            Email Client Obstacles
            & Restrictions

            Design for the Environment

            Code like it’s 1999




Tuesday, November 13, 12
The Email Environment




            WHAT DOES IT MEAN?!?



Tuesday, November 13, 12
The Email Environment




            Gmail



Tuesday, November 13, 12
The Email Environment




            outlook

Tuesday, November 13, 12
The Email Environment




            mmmm hotmail


Tuesday, November 13, 12
Your mission:
             Design with a goal in mind

             Be useful

             Less is more but still GET ATTENTION

             Be trustworthy: make unsubscribing easy!




Tuesday, November 13, 12
Sizing it up
            Use a fixed width of no more than 550-600px

            Average preview pane is 300-500px
            that’s generous

            Design for vertical growth




Tuesday, November 13, 12
The Preview Pain...
            It’s more like
            250 x 250px




Tuesday, November 13, 12
The Preview Pain... Challenge!
            Introduce yourself, entice further reading, offer
            a link to site/view email in browser

            Left-align your company logo.
            It gives you credibility.


            Try to get your call to action above the scroll.




Tuesday, November 13, 12
Retail Emails Do It Right




Tuesday, November 13, 12
Images not displayed?!




Tuesday, November 13, 12
Images not displayed?!




            Link to view in browser


Tuesday, November 13, 12
Images not displayed?!




             Use alt text
             Some email clients will apply CSS to alt text.


Tuesday, November 13, 12
Plain Textin’
            Include a plain text version


          Blackberry Curve     Other Blackberry   Nokia Symbian




Tuesday, November 13, 12
Images not displayed?!
             Stick with live text
             Esp. for the important stuff


             “Add me to your address book”

             Send through a reputable provider




Tuesday, November 13, 12
Code like it’s 1999

            Code for the Lowest Common Denominator

            Provide fallbacks - Be degradable

            Define EVERYTHING




Tuesday, November 13, 12
Woah There




Tuesday, November 13, 12
Think of it as a challenge




Tuesday, November 13, 12
Email Client Popularity




            credit: campaignmonitor.com/resources/will-it-work/email-clients




Tuesday, November 13, 12
Top Clients for Grooveshark




Tuesday, November 13, 12
Mobile is in the Lead




            credit: campaignmonitor.com/resources/will-it-work/email-clients




Tuesday, November 13, 12
Mobile is in the Lead




            credit: campaignmonitor.com/resources/will-it-work/email-clients




Tuesday, November 13, 12
Layout: Use Tables
            Use empty cells, nested tables
            Be a Dreamweaver


            Set width on every cell and Don’t rely on
            margin or padding.

            Avoid extra space in between <td> and
            <img> tags

            No floating!



Tuesday, November 13, 12
Reset & Define Everything
            Don’t rely on header styling
            Only inline styles on each instance of a tag


            Leave nothing to interpretation

            Set all margins and padding to zero

            The Usuals: font-size, color, text-decoration,
            font-weight, font-family



Tuesday, November 13, 12
Inline Styling Example

            Hey y’all!

            <p style=”font-weight:bold; font-size: 18px; font-color:
            #ff6600; font-family: Helvetica, Arial, Lucida Grande,
            Verdana, sans-serif; padding:0; margin:0; line-height:
            20px;”>Hey y’all!</p>




Tuesday, November 13, 12
Avoid Shorthand
            Good: color: #ff6600     Bad: color: #f60

            Good:
             font-weight: bold;
             font-size: 12px;
             font-family: georgia, times, serif;

            Bad:
             font: bold 12px georgia, times, serif;



Tuesday, November 13, 12
Images
            Avoid spacer images

            Include all dimensions and size image to
            declared size

            Avoid PNGs

            Provide fallback colors for background images




Tuesday, November 13, 12
Display Hack for Hotmail
             Windows Live Hotmail adds a few pixels of
             additional padding below images.

             Workaround: img {display: block;}




Tuesday, November 13, 12
Degradable Coding

             Provide fallback colors for background images

             Alt text or live text links for everything!

             CSS for Alt tags




Tuesday, November 13, 12
Inspirations




Tuesday, November 13, 12
Inspirations




Tuesday, November 13, 12
Inspirations




Tuesday, November 13, 12
Tuesday, November 13, 12
Inspirations




Tuesday, November 13, 12
Inspirations

             When it comes to email,
             code like it's 1999.

             Design like it's 2012.
                           - Some Campaign Monitor Blogger




Tuesday, November 13, 12
Just remember this okay?
            Design:
             Keep it simple
             Take advantage of what you can do


            Code:
             Be Redundant
             Be Degradable
             Test, test, test

            Also, just break a few rules.

Tuesday, November 13, 12
Resources
            inlinestyler.torchboxapps.com/styler

            premailer.dialect.ca




Tuesday, November 13, 12
Resources
            campaignmonitor.com

            mailchimp.com

            htmlemailgallery.com, emaildesigngallery.com:
            Email design galleries, some tips

            emaildesignreview.com:
            Inspiration, Tips & Insights into the industry

            Inline Stylers:
            inlinestyler.torchboxapps.com/styler
            premailer.dialect.ca



Tuesday, November 13, 12
H ave Fun
                               ha ll th at!
                           wit

Tuesday, November 13, 12
Credits
            Email Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design-
            tip-the-250-pixel-box)

            Email Design Guidelines from Campaign Monitor (campaignmonitor.com/design-guidelines)

            Design: HTML Email: Design Techniques: Part 1 by Think Vitamin with Nick Pettit
            (membership.thinkvitamin.com/library/design/html-e-mail/design-techniques-part-1)

            Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)

            20 Email Design Best Practices and Resources for Beginners (net.tutsplus.com/tutorials/
            html-css-techniques/20-email-design-best-practices-and-resources-for-beginners)

            Make The Best First Impression: 7 Tips for the Most Effective Welcome and Confirmation
            Emails (emaildesignreview.com/email-design-best-practice/make-the-best-first-
            impression-7-tips-for-the-most-effective-welcome-and-confirmation-emails-192)

            Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-
            design-mistakes)

            Bernie Marger!



Tuesday, November 13, 12

More Related Content

Recently uploaded

Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
philipjuuu
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
kousato1
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
Xiamen Tsianfan Industrial & Trading Co.,Ltd.
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
kousato1
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
sharonblush
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
ssusere235001
 
The Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptxThe Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptx
LuiyoSeMa
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
rawankhanlove256
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
divathisis
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
92nqjwr76x
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Mostafa Abd Elrahman
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
gameransh001
 

Recently uploaded (20)

Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
 
The Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptxThe Parthenon Atenas grecia una vista al pasado.pptx
The Parthenon Atenas grecia una vista al pasado.pptx
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
 
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...Introduction to Vertical Cities  Vertical cities are high-density, mixed-use ...
Introduction to Vertical Cities Vertical cities are high-density, mixed-use ...
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
 

Featured

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 

Featured (20)

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 

HTML Email Newsletters: Design, Code & Strategy

  • 2. The State of HTML Email Newsletters Email Client Obstacles & Restrictions Design for the Environment Code like it’s 1999 Tuesday, November 13, 12
  • 3. The Email Environment WHAT DOES IT MEAN?!? Tuesday, November 13, 12
  • 4. The Email Environment Gmail Tuesday, November 13, 12
  • 5. The Email Environment outlook Tuesday, November 13, 12
  • 6. The Email Environment mmmm hotmail Tuesday, November 13, 12
  • 7. Your mission: Design with a goal in mind Be useful Less is more but still GET ATTENTION Be trustworthy: make unsubscribing easy! Tuesday, November 13, 12
  • 8. Sizing it up Use a fixed width of no more than 550-600px Average preview pane is 300-500px that’s generous Design for vertical growth Tuesday, November 13, 12
  • 9. The Preview Pain... It’s more like 250 x 250px Tuesday, November 13, 12
  • 10. The Preview Pain... Challenge! Introduce yourself, entice further reading, offer a link to site/view email in browser Left-align your company logo. It gives you credibility. Try to get your call to action above the scroll. Tuesday, November 13, 12
  • 11. Retail Emails Do It Right Tuesday, November 13, 12
  • 13. Images not displayed?! Link to view in browser Tuesday, November 13, 12
  • 14. Images not displayed?! Use alt text Some email clients will apply CSS to alt text. Tuesday, November 13, 12
  • 15. Plain Textin’ Include a plain text version Blackberry Curve Other Blackberry Nokia Symbian Tuesday, November 13, 12
  • 16. Images not displayed?! Stick with live text Esp. for the important stuff “Add me to your address book” Send through a reputable provider Tuesday, November 13, 12
  • 17. Code like it’s 1999 Code for the Lowest Common Denominator Provide fallbacks - Be degradable Define EVERYTHING Tuesday, November 13, 12
  • 19. Think of it as a challenge Tuesday, November 13, 12
  • 20. Email Client Popularity credit: campaignmonitor.com/resources/will-it-work/email-clients Tuesday, November 13, 12
  • 21. Top Clients for Grooveshark Tuesday, November 13, 12
  • 22. Mobile is in the Lead credit: campaignmonitor.com/resources/will-it-work/email-clients Tuesday, November 13, 12
  • 23. Mobile is in the Lead credit: campaignmonitor.com/resources/will-it-work/email-clients Tuesday, November 13, 12
  • 24. Layout: Use Tables Use empty cells, nested tables Be a Dreamweaver Set width on every cell and Don’t rely on margin or padding. Avoid extra space in between <td> and <img> tags No floating! Tuesday, November 13, 12
  • 25. Reset & Define Everything Don’t rely on header styling Only inline styles on each instance of a tag Leave nothing to interpretation Set all margins and padding to zero The Usuals: font-size, color, text-decoration, font-weight, font-family Tuesday, November 13, 12
  • 26. Inline Styling Example Hey y’all! <p style=”font-weight:bold; font-size: 18px; font-color: #ff6600; font-family: Helvetica, Arial, Lucida Grande, Verdana, sans-serif; padding:0; margin:0; line-height: 20px;”>Hey y’all!</p> Tuesday, November 13, 12
  • 27. Avoid Shorthand Good: color: #ff6600 Bad: color: #f60 Good: font-weight: bold; font-size: 12px; font-family: georgia, times, serif; Bad: font: bold 12px georgia, times, serif; Tuesday, November 13, 12
  • 28. Images Avoid spacer images Include all dimensions and size image to declared size Avoid PNGs Provide fallback colors for background images Tuesday, November 13, 12
  • 29. Display Hack for Hotmail Windows Live Hotmail adds a few pixels of additional padding below images. Workaround: img {display: block;} Tuesday, November 13, 12
  • 30. Degradable Coding Provide fallback colors for background images Alt text or live text links for everything! CSS for Alt tags Tuesday, November 13, 12
  • 36. Inspirations When it comes to email, code like it's 1999. Design like it's 2012. - Some Campaign Monitor Blogger Tuesday, November 13, 12
  • 37. Just remember this okay? Design: Keep it simple Take advantage of what you can do Code: Be Redundant Be Degradable Test, test, test Also, just break a few rules. Tuesday, November 13, 12
  • 38. Resources inlinestyler.torchboxapps.com/styler premailer.dialect.ca Tuesday, November 13, 12
  • 39. Resources campaignmonitor.com mailchimp.com htmlemailgallery.com, emaildesigngallery.com: Email design galleries, some tips emaildesignreview.com: Inspiration, Tips & Insights into the industry Inline Stylers: inlinestyler.torchboxapps.com/styler premailer.dialect.ca Tuesday, November 13, 12
  • 40. H ave Fun ha ll th at! wit Tuesday, November 13, 12
  • 41. Credits Email Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design- tip-the-250-pixel-box) Email Design Guidelines from Campaign Monitor (campaignmonitor.com/design-guidelines) Design: HTML Email: Design Techniques: Part 1 by Think Vitamin with Nick Pettit (membership.thinkvitamin.com/library/design/html-e-mail/design-techniques-part-1) Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails) 20 Email Design Best Practices and Resources for Beginners (net.tutsplus.com/tutorials/ html-css-techniques/20-email-design-best-practices-and-resources-for-beginners) Make The Best First Impression: 7 Tips for the Most Effective Welcome and Confirmation Emails (emaildesignreview.com/email-design-best-practice/make-the-best-first- impression-7-tips-for-the-most-effective-welcome-and-confirmation-emails-192) Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email- design-mistakes) Bernie Marger! Tuesday, November 13, 12

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n