The Pursuit of

The Perfect Workflow

​By Josh Nederveld

Who is this Josh?

Alternatively, a short introduction.

1. What's a workflow?

3. How do you improve a workflow? 

2. How do you know when a workflow needs improvement?

So what's a workflow?

A workflow is an organized way of getting things done.

It's not what you're doing, it's the way you do it.

A good workflow doesn't come from having a lot of shiny tools.

Continuous Improvement.

Continuous Improvement.

How do you know when a workflow needs improvement?

Frequency

Do I do this task often?

Effort

Can I reduce the amount of

time/energy/money

that it takes to do this task?

Severity

How big is the problem?

The Principles of an Effective Workflow

Not perfect; effective.

Planning

Don't fall for the trap of excitement.

Structure

Like the edge pieces of a puzzle.

Simplicity

Shoot for easy repeatability.

Efficiency

Do we get faster results?

Quality

Do we get a better result?

Flexibility

How easy is it to add a new step?

Documentation

A sharable workflow is a good workflow.

Some Applications

of the front-end variety.

CSS Progression

CSS to SCSS with Codekit to SCSS with Gulp

#header li {
    float: left;
    display: inline;
    text-indent: -9999px;
}
#header li a {
    display: block;
    background-image: url(images/nav.gif);
    height: 12px;
    line-height: 12px;
}
#header li a.home {
    width: 66px;
    background-position: 0px 0px;
}
#header li a.about-us {
    width: 93px;
    background-position: -66px 0px;
}
#header li a.contact {
    width: 82px;
    background-position: -159px 0px;
}
#header li a.facebook {
    width: 97px;
    background-position: -241px 0px;
}
#header li a.home:hover,#header ul.home a.home {
    background-position: 0px -12px;
}
#header li a.about-us:hover,#header ul.about-us a.about-us {
    background-position: -66px -12px;
}
#header li a.contact:hover,#header ul.contact a.contact {
    background-position: -159px -12px;
}
#header li a.facebook:hover {
    background-position: -241px -12px;
}

CSS (circa 2009)

.logo {
    position: absolute;
    top: 0;
    left: $cntrpad + 65;
    z-index: 999;
    border-radius: 5px;

    @media ($desktoplg) { 
        left: $cntrpad-desktoplg + 65; 
    }
    @media ('min-width:#{$cntrmaxwidth}') {
        left: 50%;
    }
    a {
        display: block;
        text-indent: -9999em;
        height: 50px;
        margin-top: 18px;
        background-image: url(../images/logo.png);
    }
    &, a {
        @extend %transparentselection;
    }
}

SCSS (circa 2012)

The problem with Codekit

/*——————————————————————————————————————————————————————————
/  Logo-Background -> Logo-Column
——————————————————————————————————————————————————————————*/
&-background {
    background-color: #ffffff;
    position: relative;
    z-index: 2;

    @include css_by_breakpoint((
        default: (
            padding-top: scut-em(10),
            padding-bottom: scut-em(10)
        ),
        medium: (
            margin-bottom: scut-em(-96),
            padding-top: scut-em(27),
            padding-bottom: scut-em(27)
        )
    ));
}

SCSS Today

{Insert browser-sync demo gif here.}

Do we have time
for one more?

if ( true === $response ) { goToNextSlide(); }

<table class="footer mobile-footer" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: none;
border-collapse: collapse; border-spacing: 0 !important; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
border="0" cellpadding="0" cellspacing="0" bgcolor="#215a3f" width="100%"><tr style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><td class="footer-gold-cell" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#f6a704" height="10px"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxz/98942/14143/spacer.gif" height="10" width="1"
style="-ms-interpolation-mode: bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0
!important; outline: none !important; text-decoration: none !important;"></td></tr><tr style="-ms-text-size-adjust:
100%; -webkit-text-size-adjust: 100%;"><td class="footer-green-cell footer-contact-cell" style="-ms-text-size-adjust:
100%; -webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;
mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 5px 0 5px;" bgcolor="#215a3f" align="center"><a
class="footer-logo" href="http://saintleo.edu/" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxg/98942/14129/slu_bottom2.png" style="-ms-interpolation-mode:
bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
padding-bottom: 8px; text-decoration: none !important;"></a><br style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><span class="footer-address" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; padding-right: 15px; white-space: normal;">Saint Leo University, 33701 State Road 52,
Saint Leo, FL 33574-6665</span> <span class="footer-phone" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%; padding-right: 10px;">(352) 588-8283</span> <span class="footer-tollfree" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;">(800) 334-5532</span><br style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%;"><a class="footer-pardotlink" href="%%view_online%%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;">View email in browser</a>
 |  <a class="footer-pardotlink" href="%%email_preference_center%%" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;">Update
your email preferences</a>  |  <a class="footer-pardotlink" href="%%unsubscribe%%"
style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif;
font-size: 10px; line-height: 24px;">Unsubscribe</a></td></tr><tr style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><td class="footer-green-cell footer-social-cell" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-top: 15px;" bgcolor="#215a3f"
align="center"><a href="https://www.facebook.com/mysaintleou" target="_blank" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><img src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxj/98942/14127/facebook.png"
style="-ms-interpolation-mode: bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0
!important; outline: none !important; text-decoration: none !important;"></a> <a href="https://twitter.com/mysaintleou"
target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxx/98942/14141/twitter_1.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a> <a href="https://www.instagram.com/mysaintleou" target="_blank"
style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxs/98942/14137/instagram.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a> <a href="https://www.youtube.com/channel/UCKhGARkVEEPN3Y8KlFYlTDw"
target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxq/98942/14133/youtube_1.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a></td></tr><tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%;"><td bgcolor="#215a3f" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt;
mso-table-rspace: 0pt;"> </td></tr></table></body></html>

HTML Emails

<table>
    <tr>
        <td pardot-region>
            <img class="article-image article-img-max" src="http://placehold.it/277x285"/>
        </td>
        <td pardot-region class="article-right article grapefruit">
        <table>
        <tr>
        <td class="article-text">
            <h1 class="article-text-title">Upcoming Open House Preview Day</h1>
            <p class="article-text-description">
                Tour our beautiful campus, meet faculty and staff,
                dine in our dining hall, and interact with current
                students.
            </p>
            <span class="article-text-more"><a href="#" target="_blank">Learn More</a></span>
            </td>
            </tr>
            </table>
        </td>
    </tr>
</table>

HTML Email Partials!

var gulp = require('gulp');

/* Gulp Plugins */
var fileinclude = require('gulp-file-include');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var inlineCSS = require('gulp-inline-css');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync');


gulp.task('html-includes', function () {
    var stream = gulp.src('./src/templates/newsletter/*.tmpl.html')
        .pipe(fileinclude())
        .pipe(rename({
            extname: ""
        }))
        .pipe(rename({
            extname: ".html"
        }))
        .pipe(gulp.dest(function (file) {
            return file.base + '/compiled/';
        }))
    return stream;
});

gulp.task('compile-sass', ['html-includes'], function () {
    var stream = gulp.src('./src/templates/newsletter/*.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest(function (file) {
            return file.base + '/compiled/';
        }))
    return stream;
});

/*
htmlmin comes before inlineCSS because it was stripping the semicolon on the last value of an inline CSS
tag, which caused all sorts of problems in Pardot.
*/

gulp.task('inline-css-and-minify', ['compile-sass'], function () {
    var stream = gulp.src('./src/templates/newsletter/compiled/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyCSS: false,
            keepClosingSlash: true
        }))
        .pipe(inlineCSS({
            preserveMediaQueries: true,
            applyTableAttributes: true
        }))
        .pipe(gulp.dest('./dist'));
    return stream;
});

gulp.task('build', ['html-includes', 'compile-sass', 'inline-css-and-minify'], browserSync.reload);

gulp.task('watch', function () {

    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch(["src/**/*"], ['build']);

});

Sprinkle some Gulp...

<table class="footer mobile-footer" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: none;
border-collapse: collapse; border-spacing: 0 !important; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
border="0" cellpadding="0" cellspacing="0" bgcolor="#215a3f" width="100%"><tr style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><td class="footer-gold-cell" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" bgcolor="#f6a704" height="10px"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxz/98942/14143/spacer.gif" height="10" width="1"
style="-ms-interpolation-mode: bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0
!important; outline: none !important; text-decoration: none !important;"></td></tr><tr style="-ms-text-size-adjust:
100%; -webkit-text-size-adjust: 100%;"><td class="footer-green-cell footer-contact-cell" style="-ms-text-size-adjust:
100%; -webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;
mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 5px 0 5px;" bgcolor="#215a3f" align="center"><a
class="footer-logo" href="http://saintleo.edu/" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxg/98942/14129/slu_bottom2.png" style="-ms-interpolation-mode:
bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
padding-bottom: 8px; text-decoration: none !important;"></a><br style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><span class="footer-address" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; padding-right: 15px; white-space: normal;">Saint Leo University, 33701 State Road 52,
Saint Leo, FL 33574-6665</span> <span class="footer-phone" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%; padding-right: 10px;">(352) 588-8283</span> <span class="footer-tollfree" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;">(800) 334-5532</span><br style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%;"><a class="footer-pardotlink" href="%%view_online%%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;">View email in browser</a>
 |  <a class="footer-pardotlink" href="%%email_preference_center%%" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 24px;">Update
your email preferences</a>  |  <a class="footer-pardotlink" href="%%unsubscribe%%"
style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #fff; font-family: Arial, sans-serif;
font-size: 10px; line-height: 24px;">Unsubscribe</a></td></tr><tr style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><td class="footer-green-cell footer-social-cell" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding-top: 15px;" bgcolor="#215a3f"
align="center"><a href="https://www.facebook.com/mysaintleou" target="_blank" style="-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;"><img src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxj/98942/14127/facebook.png"
style="-ms-interpolation-mode: bicubic; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0
!important; outline: none !important; text-decoration: none !important;"></a> <a href="https://twitter.com/mysaintleou"
target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxx/98942/14141/twitter_1.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a> <a href="https://www.instagram.com/mysaintleou" target="_blank"
style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxs/98942/14137/instagram.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a> <a href="https://www.youtube.com/channel/UCKhGARkVEEPN3Y8KlFYlTDw"
target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img
src="http://go.saintleo.edu/l/98942/2016-02-09/29sqxq/98942/14133/youtube_1.png" style="-ms-interpolation-mode: bicubic;
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0 !important; outline: none !important;
text-decoration: none !important;"></a></td></tr><tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust:
100%;"><td bgcolor="#215a3f" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt;
mso-table-rspace: 0pt;"> </td></tr></table></body></html>

and we get the same thing!

Fin.

Any questions?