Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Email Development... Yes, It's a Thing // Annet...

Avatar for Annett Annett
June 17, 2015
Technology
1
190

Email Development... Yes, It's a Thing // Annett Forcier

Not only is it a thing, it is our last hope to end the proliferation of ugly emails in our inboxes for all eternity! Developers need to reclaim email and help to push email clients to step up their game in offering good looking cross-platform experiences.

A pioneer in email development, Annett will share her wealth of knowledge and experience in pushing the inbox envelope, and what’s new and cool on the frontiers of email.
Avatar for Annett

Annett

June 17, 2015
Tweet

Other Decks in Technology

See All in Technology
What's new in OpenShift 4.19
Avatar for Red Hat Livestreaming redhatlivestreaming
1
230
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
Avatar for ymty ymty
1
400
SFTPコンテナからファイルをダウンロードする
Avatar for ディップ株式会社 dip
0
260
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
320
Amplifyとゼロからはじめた AIコーディング 成果と展望
Avatar for k.masachika mkdev10
1
240
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
Avatar for teru0x1 teru0x1
0
140
菸酒生在 LINE Taiwan 的後端雙刀流
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
140
今からでも間に合う！ 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
Avatar for Hideaki Aoyagi hideakiaoyagi
1
170
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.8k
新規プロダクト開発、AIでどう変わった？ #デザインエンジニアMeetup
Avatar for 弁護士ドットコム bengo4com
0
450
2025/6/21 日本学術会議公開シンポジウム発表資料
Avatar for Keisuke Fujii keisuke198619
1
280
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
Avatar for tomoki10 tomoki10
0
320

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
650
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
269
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k

Transcript

  1. 
 Annett Forcier Email Developer EMAIL DEVELOPMENT... 
 YES, IT'S

    A THING

  2. TABLE OF CONTENTS • Challenges • Numbers • Best Practices

    • Approaches • Resources & Tools

  3. –JASON RODRIGUEZ “Designing and developing HTML email … 
 It’s

    like getting into a time machine and stepping out into a hellish ’90s world of table-based layouts, inline styles, non-semantic markup, and client-specific hacks.”

  4. CHALLENGES • many many devices • inconsistent rendering • NO

    standards

  5. INCREASING EMAIL OPENS ON MOBILE Source: litmus.com

  6. *** BEST PRACTICES ***

  7. The email width should be between 600 and 800 pixels.

    This will make them behave better within the preview pane.

  8. Tables within tables for positioning elements.
 Source: MailChimp.com

  9. Consider emails when images are not rendered. About 40% of

    email clients have images turned off by default. This is a good place to add interesting alt tags to persuade users to enable image download Images off view Images on view

  10. Use of touch friendly coded buttons. The call to action

    will be visible when images are turned off. Images off view Images on view

  11. APPROACHES *** TO MOBILE OPTIMISATION

  12. RESPONSIVE EMAILS • media queries • a flexible grid-based layout

    • scalable or swappable image

  13. pros: branded // nice design // easy to code //

    cons: spam filtered // missing call to action // Images off view Images on view #1 ALL-IMAGE APPROACH

  14. • one single column • fixed with under 600px to

    fit small screens • font sizes don’t change, but are large enough for mobile • use of small imagery • large touch friendly buttons for call to action #2 MOBILE-FRIENDLY APPROACH CONS:
 might look out of proportion 
 poor use of canvas.

  15. • adapts to any display size 
 and orientation •

    styles can switch between viewports • secondary messages can be hidden or placed in less prominent spot #3 RESPONSIVE APPROACH CONS:
 media queries are not supported across platforms Gmail strips out the 
 <head> of the email

  16. Outlook 2013 Gmail App Android iPhone 5s iOS7 RESPONSIVE RENDERING

  17. • stacks on mobile without media queries • forcing alignment

    with align=“center” and display=“inline-block” • flexible width • images are used in correct physical size • use of conditional statements to zero gaps in tables and images in Outlook #4 FLUID HYBRID APPROACH Fluid hybrid tutorial: 
 http://bit.ly/1GvYEVC

  18. Outlook 2013 Gmail App Android iPhone 5s iOS7 FLUID HYBRID

    RENDERING

  19. • header won’t swap on apps that don’t support media

    queries • shop-able items stack nicely • emails are not pixel perfect but maintain a consistent mobile experience. FLUID HYBRID RESULTS ON MOBILE

  20. OPTIMIZING FOR IMAGE-OFF • call to actions are instantly visible

    
 > make the marketing team happy • email is smaller and loads faster 
 > considering user data plans • better ratio between copy and imagery 
 > helps keeping them out of spam folder • copy edits don’t require design work 
 > speeds up turn around • creative use of alt and title tags & background colors
 > encourages user to enable image download

  21. Let’s make email better, prettier and more fun! Thank you!

    Questions? *** EMAIL NEEDS MORE LOVE! YEAH! *** #EMAILGEEKS #FORTHELOVEOFEMAIL

  22. COOL STUFF Video in email Litmus Conference Email 2014 https://litmus.com/builder/c5a1d7a

    How it was done: https://litmus.com/blog/how-to-code-html5-video-background-in- email Animated Gif https://litmus.com/scope/myxw0qou6ily https://litmus.com/scope/706dzzyz5tve How it is done and where it works: https://litmus.com/blog/a- guide-to-animated-gifs-in-email Cinemagraph Creator: http://cinemagraphs.com/ How it’s done: http://blog.spoongraphics.co.uk/tutorials/how-to- make-a-cool-cinemagraph-image-in-photoshop Webfonts http://templates.mailchimp.com/design/typography/ Email personalization http://blog.hubspot.com/blog/tabid/6307/bid/34146/7-Excellent- Examples-of-Email-Personalization-in-Action.aspx Live Twitter Feed in Email Live Twitter feed in email, no way! https://litmus.wistia.com/medias/j47r7u3rnx Contest - Litmus Conference 2015 5 Hidden Golden Tickets hidden in the email code. 
 They have all been claimed but can you find them?
 
 https://litmus.com/scope/iikhxnxlz7wn

  23. TOOLS & RESOURCES Responsive Modules http://responsiveemailresources.com/ http://responsiveemailpatterns.com/ https://www.campaignmonitor.com/resources/ Testing Tools

    https://litmus.com/email-builder Templates & Frameworks https://github.com/g13nn/Email-Framework https://litmus.com/resources/free-responsive-email-templates http://templates.mailchimp.com/ Inline CSS http://inliner.cm/ Community https://litmus.com/community https://litmus.com/blog/category/email-design-podcast Trends http://emailclientmarketshare.com/ People I follow in Twitter @KevinMandeville @flcarneiro @RodriguezCommaJ @Mike_Ragan @chadswhite @g13nnsmith @moonstrips @stylecampaign @ActionRocket @mparkerbyrd @yarrcat