modern emails

Download Modern Emails

Post on 16-Jul-2015

199 views

Category:

Internet

0 download

Embed Size (px)

TRANSCRIPT

  • Modern EmailsDesign / Development / Testing

  • Mobile First!

  • STATISTIC

  • Over half of smartphone users grab their smatrphone

    immediately after waking up

  • Email is the most popular activity on smartphones among users ages 18-44.

  • 91% of customers check their email at least once

    per day.

  • According to a study by Mckinsey email is almost 40 times better at acquiring new

    customers than Facebook and Twitter!

  • DESIGN

  • Scalable graphics

  • Single column design

  • Not all mobile clients support @media queries

  • Design for the upper left mobile fold

  • Create large touch targets.

  • DEVELOPMENT

  • Frameworks

    Ink - responsive templates for email and a responsive email framework.Email Blueprint - collection of HTML email templates from MailChimpAntwort - responsive email layoutsSalted - simple responisve email templateMonstra Emails - another simple responisve email template

  • Ink Framework

    Email anywhere. On any device.

  • Getting Started with Ink

    Download Ink http://zurb.com/ink/download.php

    Read Ink Documentationhttp://zurb.com/ink/docs.php

  • Develop Emails with Ink

    Create nice template in your favorite editor.Inline styles with Ink inliner.

    Repeat.

  • Automate with Grunt JSMake email development process better and faster

  • Project structure

    Gruntfile.jspackage.jsonstatic/

    emails/less/css/img/

    views/emails/

    source/compiled/

  • Building process - Algorithm

    1. Compiling LESS into CSS2. Minify CSS3. Inline CSS4. Minify HTML

  • Grunt JS Pluginsgrunt-contrib-less - Compile LESS files to CSS.grunt-contrib-cssmin - Compress CSS files.grunt-contrib-htmlmin - Minify HTMLgrunt-email-builder - Combine Html and Css into an email

  • Testing

  • Email Client Market Share

    http://emailclientmarketshare.com/

  • Tools & Links

    PutsMailMailChimpLitmusEmail on Acid

  • Modern EmailsSergey Romanenko

    Follow me @AwilumIT