segunda-feira, 4 de agosto de 2014

Improve Your Email Workflow With Modular Design

Improve Your Email Workflow With Modular Design


  • By Brian Graves

  • August 4th, 2014

  • Design PatternsMarketingWorkflow

  • 1 Comment

Whether you’re in a Fortune 500 association or prejudiced a two-person group rising your initial web app, email is one of a many critical collection for reaching your patron base. But with a ever-growing number1 of emails to send2, stealing them all out a doorway can seem a small overwhelming. By putting in place a plain email settlement workflow, you’ll be means to frequently boat enchanting and mobile-friendly emails with ease.


Complexity Meets Adaptation


In further to a augmenting series of emails, a need for personalization and high peculiarity and a introduction of docile settlement have incited what was once a elementary routine of essay HTML and CSS in your favorite calm editor into something clearly some-more complex. A series of customizable templates3, editors4, tools5 and even bone-fide email frameworks6 have popped adult to understanding with this newfound complexity.


All of these new collection have their advantages, and many can be combined7 into a workflow that best fits we and your team. But even with a good set of new collection during your disposal, how do we structure your workflow to concede for continual iteration and discerning turnaround?


Enter Modular Design


Modular settlement is a routine of formulating a element of self-contained components that can be stacked, rearranged and used or not used, box by case. The idea is to be means to simply change or adjust sold settlement patterns though altering a element as a whole. Adopting modular settlement and reusable patterns into your email settlement workflow can improve a peculiarity and consistency of what we send, while speeding adult your daily output.


Setting adult a modular email settlement workflow involves 3 simple steps:


  1. Create a settlement system.

  2. Set adult a reusable framework.

  3. Test and iterate on what we send.

Let’s demeanour in abyss during how we can accomplish any step in a process.


1. Create A Design System


The easiest proceed to streamline iteration is to mangle down any of your common settlement use cases into a element of self-contained components, any one a LEGO block, done adult of calm and media, that we can snap together into countless configurations. Doing this will capacitate we to build a scarcely gigantic series of emails with ease.


Think of your designs as Lego blocks, done adult of calm media.8
Think of your designs as LEGO blocks, done adult of calm and media. (View vast version119)

Anticipate Use Cases


When conceptualizing your modular email system, a initial step is to expect your use cases. Ask yourself what form of emails we typically send. Are they mostly transactional? Promotional? Informational? While all emails will expected have a same simple elements, such as a header and footer, a transactional email competence need conveyance information, grouping details, remuneration details, a hit section, and product upsells or identical products.


A newsletter competence have easier needs, such as rudimentary copy, a featured story, a favourite picture and delegate stories. Defining a calm needs of a emails that we send will capacitate we to expect a common use cases that you’ll need to devise for along a way.


Design A Pattern Library


Once we establish common use cases, we can start to settlement sold components according to your needs. Whether we use Photoshop or burst right into a browser, remember to keep any member as self-contained as possible. Designing several variations of any use box competence also be helpful.


Having several options for a “featured story” component, for instance, allows for coherence and keeps things from stealing low over time. The patterns in your library will eventually spin partials within your framework, simply referred to and called on when needed.


Turn your use cases into modular patterns10
Turn your use cases into modular patterns. (View vast version119)

Keep Your Pattern Library Up To Date


As new use cases arise, use your existent patterns as necessary. However, astonishing use cases will substantially arise; one advantage of a modular element is that we need to settlement customarily a singular member to residence this situation. As we emanate and supplement patterns, make certain to keep a whole settlement element adult to date and organized. Leaving components sparse or out of sync will make a element formidable to use. The easiest proceed to keep all in sync is to spin your element into a framework.


2. Set Up A Framework


From here, incorporating your settlement patterns into an out-of-the-box templating element or horizon is possible. And if you’re not meddlesome in navigating a pell-mell universe of Outlook or Gmail, with all of their quirks, or if we need to get something out a doorway with minimal configuration, afterwards options like Zurb’s Ink3012 will do a lot of a complicated lifting for you.


But if we send a decent volume of email, afterwards formulating your possess tradition horizon could lead to outrageous gains. By formulating your possess framework, we can supplement in time-saving tradition helpers, keep a markup light and easy to work with, and even offshoot directly into your email use provider. Not to discuss that we can create some-more customized layouts to element all-in-one solutions. The long-term gains in peculiarity and potency from environment adult your possess horizon can be huge.


Build on Top of a Static Website Generator


Adding facilities and collection such as Sass, YAML information and localization to your horizon could also be beneficial. The easiest proceed to do this is by integrating your horizon with a immobile website generator. The building blocks that are common to email and a web will capacitate we to repurpose roughly any website generator for your email workflow.


Middleman13 is a good choice and one that I’ve found ticks all of a critical boxes:


  • The structure of projects as layouts, partials and pages ideally fits a mental indication of modular email.

  • Sass14 is already integrated. Sass is an extraordinary further to any docile email workflow. Common workarounds such as a one for Yahoo Mail’s charge selector15 spin an afterthought by a crafty use of selector inheritance. Sass also provides absolute facilities such as variables, mixins and CSS minification to cut down on record size.

  • YAML information and front matter concede we to entirely apart calm from settlement and loop by information for easy prototyping.

  • If you’re promulgation to a vast and opposite assembly in mixed languages, afterwards localization can boldly beget that opposite set of information comparatively painlessly.

  • A innumerable of hooks capacitate us to simply emanate tradition helpers for email platform-specific needs.

  • Middleman is Ruby-based, creation it simply extensible.

Set Up A Boilerplate


Once you’ve selected a immobile website generator that meets your needs, afterwards it’s time to set adult your bottom boilerplate. A boilerplate includes such things as a reset file, a CSS or Sass structure, an discretionary tradition grid element and a bottom template.


Base Layout Template


A simple template will offer as your bottom blueprint structure and will concede tellurian elements to be common opposite all emails. Preheaders, headers and footers will customarily stay unchanging opposite emails. If this is a box with your designs, afterwards we can safely build these into your layout’s template. The safer proceed is possibly to build out and embody these elements as partials or, if these elements will expected pierce or change in sold emails, to hang a markup in redeeming statements.


Your bottom email template should embody during slightest a following:


  • DOCTYPE

    HTML5 is a friendliest for conceptualizing docile emails. Remember that certain clients will possibly frame out or change your DOCTYPE.

  • head

    A lot is critical to embody here: meta tags for correct impression encoding, pretension tags for anyone observation a standalone chronicle of your email in a browser, reset styles, embedded media query styles, any styles to be inlined and a viewport meta tab to set a viewport’s width.

  • body

    In further to a customary body tag, hang your whole email in a 100%-width list and dungeon structure, as shown below. The list with a body category will act as a body, thereby overcoming a obstacle of certain clients stealing a body tag.

  • yield

    This is from where all of your modules for sold emails will be pulled.

!DOCTYPE html
html lang="en"

head
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
 meta name="viewport" content="width=device-width"
 title%= data.page.title %/title

 %= inline_stylesheet 'template/inline' %
 %= stylesheet_link_tag 'template/mq' %
/head

body
 list class="body"
 tr
 td class="header" 
 [Header content]
 /td
 /tr
 tr
 td class="main" 
 %= produce %
 /td
 /tr
 tr
 td class="footer" 
 [Footer content]
 /td
 /tr
 /table
/body
/html

Partials Based on Modules


Keep a markup of your sold settlement patterns inside of partials, to keep a settlement element truly modular. This will concede a markup for any procedure to be self-contained. Taking a modular proceed with both your designs and your markup becomes truly powerful. Once it’s built, we should be means to move any settlement pattern around to opposite areas of a template though violation a module, a template or any other modules surrounding it. When you’re environment adult a framework, build out any procedure that you’ve designed for in this way.


Taking a use box from a final example, a modular markup for a featured story would demeanour like this:


table class="featured-story"
 tr
 td class="col"
 img src="#" alt="" /
 /td
 td class="col"
 table
 tr
 td class="title"
 [Story Title]
 /td
 /tr
 tr
 td class="abstract"
 [Story Abstract]
 /td
 /tr
 tr
 td class="cta"
 a href="#"CTA/a
 /td
 /tr
 /table
 /td
 /tr
/table

Sass Structure


Following OOCSS16 or SMACSS17 will say a modularity of your Sass. In general, keep your styles as modular as possible, customarily like your designs and markup.


One premonition when essay CSS or Sass in an email horizon is that all media query-based styles contingency start with an charge selector (such as td[class=example]) in sequence to equivocate digest issues in Yahoo Mail18. An easy workaround is Sass’ ability to nest styles. Nesting all media queries in a singular attribute-based selector will forestall them from being practical to any sold style. Writing your Sass in this proceed will boost both readability and speed while progressing visible coherence opposite clients.


Following this method, a simple media queries for optimizing a template and calm area above for mobile would be this:


td[class=body] 
 @media customarily shade and (max-width: 600px) 
 .col 
 display: block; 
 width: 100%; 
 
 .title 
 font-size: 22px !important; 
 
 .abstract 
 font-size: 16px !important; 
 
 .cta a 
 display: block;
 width: 100%;

Put It All Together


With a bottom horizon and modular settlement patterns in place, it’s now time to snap all of a LEGO blocks together. Create a page for any email that you’re building for your framework. This page should be wrapped with your bottom template and should call any modular patterns that we need.


Thinking in a modular proceed will capacitate we to build emails like LEGO blocks.19
Thinking in a modular proceed will capacitate we to build emails like LEGO blocks. (View vast version20)
---
title: Example Email
layout: template
---

%= prejudiced "featured-story" %
%= prejudiced "responsive-image" %
%= prejudiced "social-callout" %

Automate Common Tasks


One of a biggest efficiencies we can benefit in your workflow is to automate visit tasks. This typically means inlining CSS, optimizing images, promulgation tests, and integrating templates and modules with your email use provider. Most common tasks can be simply integrated with Rake tasks, Ruby Gems and/or Grunt.


CSS Inlining


The safest routine is to inline styles whenever probable since certain email clients frame out styles from a conduct of documents. If you’re used to a common web workflow of essay styles in a apart sheet, afterwards stealing used to this will be hard. It can spin a interruption to modularity, and if you’re perplexing to use Sass to style, afterwards this apparently becomes unfit to do manually.


Luckily, we have several options to automatically inline styles during build time. If you’re regulating a Ruby-based tantalizing engine, afterwards a best choice is to embody a Premailer Gem21 in your project. Premailer automatically runs by your character piece and inlines styles while preserving any existent styles when called. This is a outrageous time-saver, and it keeps markup manageable.


Testing


There are several ways to exam how your email looks. The initial theatre in my routine is to settlement and check a digest in Chrome. Once a designs are completed, it’s time to burst into a some-more programmed apparatus to check digest opposite a board. Litmus22 is a web application, like BrowserStack23 though focused on delivering screenshots of your email opposite a far-reaching accumulation of clients.


You can send your emails to Litmus in a accumulation of ways, though if you’re regulating Grunt in a framework, afterwards a easiest proceed is by regulating Grunt-Litmus24. Grunt-Litmus automates a routine of stealing tests to your comment and lets we check digest in clients of your choice.


module.exports = 
 test: 
 src: ['email.html'],
 options: 
 clients: ['android22', 'android4'...]
 username: "username",
 password: "password",
 url: "https://yourcompany.litmus.com" 
 
 
;

Testing on genuine inclination is another common approach, generally critical with things like CSS animation and embedded video. If we have a device lab set adult with a common email address, an easy proceed to trigger an email smoothness directly from your horizon is to use a Ruby Mail Gem.


Hook Into Your Email Service Provider


If you’re regulating an email height that provides entrance (such as ExactTarget25 or MailChimp26), afterwards we can set adult your plan to offshoot directly into a API and pull your template along with sold modules into a element on command. Doing this allows we to build locally in a framework, gripping all modular and underneath source control, and still pull to your email use provider fast and simply as we iterate. How we offshoot into your provider will apparently change by platform, though really keep this in mind when environment adult a modular framework.


3. Iterate On Your Designs


The periodical inlet of email lends itself good to settlement iteration. If you’re promulgation emails daily or weekly, afterwards we have plenty room to A/B exam your settlement decisions. No matter what workflow options we adopt, make certain to lane critical email metrics27 and use accessible information to urge your core design, remembering that a improved knowledge is customarily some-more critical than any singular information point.


The periodical inlet of email creates for easy contrast and iteration.28
The periodical inlet of email creates for easy contrast and iteration. (View vast version29)

Don’t reinvent a circle each time we send an email; rather, make continual incremental changes as fitting by your metrics. The advantages of a modular settlement workflow should make these incremental changes sincerely painless as we barter components in and out. The critical thing is not to let your designs stagnate.


Conclusion


Incorporating a modular proceed and a tradition horizon into your email workflow can lead to increasing capability and make it easier for we to iterate on your designs. You will have to make an initial investment of time to get all adult and running, though if we send a decent volume of email and can means a initial investment, afterwards a outcome will urge your designs, a patron knowledge and your rendezvous rates, heading to happier business and increasing revenue.


Links


  • Ink3012, Zurb

    A horizon for fast growth of docile emails.

  • “A Workflow for Responsive Emails Using Ink and Grunt31,” Victor Garcia, Medium

  • Middleman Email Template32, DEG

    A Middleman plan template customized for building emails.

  • Middleman 3.0.x Project Template: HTML Email Boilerplate HAML33, Danny Prose

    A Middleman template for HTML Email Boilerplate34, converted to HAML.

(al, , il, ml)


Footnotes


  1. 1 http://www.smashingmagazine.com/2013/08/14/email-marketing-for-mobile-app-creators-2/

  2. 2 https://medium.com/the-growth-hackers-cookbook/c6303f3b6e8c

  3. 3 https://github.com/mailchimp/Email-Blueprints

  4. 4 https://www.campaignmonitor.com/blog/post/4211/introducing-canvas-a-new-way-to-build-emails

  5. 5 http://responsiveemailresources.com/

  6. 6 http://zurb.com/ink/

  7. 7 https://medium.com/@victorgarcia/a-workflow-for-responsive-emails-using-ink-and-grunt-32d607879082

  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-modular-opt.png

  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-modular-opt.png

  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-patterns-opt.png

  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/07/01-modular-opt.png

  12. 12 http://zurb.com/ink/

  13. 13 http://middlemanapp.com/

  14. 14 http://sass-lang.com/

  15. 15 http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries

  16. 16 http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss-2/

  17. 17 http://smacss.com/

  18. 18 http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries

  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-email-opt.png

  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-email-opt.png

  21. 21 https://github.com/premailer/premailer

  22. 22 http://litmus.com/

  23. 23 http://www.browserstack.com/

  24. 24 https://www.npmjs.org/package/grunt-litmus

  25. 25 http://help.exacttarget.com/en-US/technical_library/web_service_guide/getting_started_developers_and_the_exacttarget_api/

  26. 26 http://apidocs.mailchimp.com/

  27. 27 http://marketingland.com/the-email-metric-you-should-be-tracking-but-arent-8879

  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-iterate-opt.png

  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-iterate-opt.png

  30. 30 http://zurb.com/ink/

  31. 31 https://medium.com/@victorgarcia/a-workflow-for-responsive-emails-using-ink-and-grunt-32d607879082

  32. 32 https://github.com/degdigital/MiddlemanEmailTemplate

  33. 33 https://github.com/dannyprose/Middleman-HTML-Email-HAML

  34. 34 http://htmlemailboilerplate.com/

↑ Back to topShare on Twitter



Improve Your Email Workflow With Modular Design
Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)