Web Design Weekly Workflow

During the last few months I have had a few enquires about the processes I use on a weekly basis to get Web Design Weekly out the door each Friday (whilst working full-time). The workflow has evolved and will continue to. The process still needs refining so if you have any suggestions, feel free to have your say below.

In the first few weeks of curating WDW, I was surprised how much time it was actually taking. Each week I was getting quicker but it was still taking way too long repeating simple tasks. Peter Cooper from Cooper Press, who is a very successful email curator, showed off a little sneak peek of his workflow when I was pumping out the first few issues. This sparked some curiosity into how I could improve things.

Peter’s process, as far as I can tell, is highly dependent on being a Ruby guru (not that I know the finer details of how it works). I’m no Ruby guru… I have worked on a few Ruby projects and am familiar with it, but it’s not my strong point. At present, I have decided not to create a Ruby application to help with the weekly workflow. Instead, I have opted to utilise Campaign Monitor’s built-in editor.

Where do I find all the content and how?

Every day I scan social media. Mainly Twitter, Google+, Hacker News and Github. I tend to use Tweetbot on the iPhone/iPad (synced with tweet marker) and use ‘send to email’ and the ‘favourites’ function like crazy. At work, I use the Twitter website, with the tweet marker extension installed in Chrome.

Favoriting Tweets in Tweetbot

Favoriting Tweets in Tweetbot

Favourites
It’s a key part of gathering content for the weekly email. All my Twitter favourites are synced up with Pinboard. It’s a super easy way to browse loads of tweets quickly and sift out the good links to look at in more detail later.

Send to Email
I have two email addresses I send tweets to. If it’s something that is of super high interest, I will also send it to my personal email to read at the first possible chance, but 99% of the time I will send items of interest to my Flow to-do list.

I have set up a list in Flow called WDW. If I insert [WDW] at the start of the subject of the email, it gets filtered into that list. Every week I start with an empty list.

Email with Sparrow

Sending directly to the WDW Flow list

RSS is alive and kicking
Subscribing to blogs is still without a doubt one of the most valuable places to find and read awesome content. Over the years, being a front-end developer, I have accumulated over 300 feeds and those are priceless in keeping me up to date and finding good content.

Paul Irish’s front-end bundle is a must.

I user Reeder on the all devices and forward all good content to either my WDW list in Flow or save it to Pinboard.

Facebook
Nope. I use Facebook for personal use. I tend to find the sites that publish on Facebook take more of an advertising angle, which really doesn’t appeal to me.

Google+
Browsing Google+ is radtastic. Some really great content can be found and it tends to be a bit more personal and in greater detail. I also find Mr Irish is quite vocal and goes into a lot more depth and tends to share some extra juicy stuff that he doesn’t tweet about. Maybe being employed by Google has something to do with that.

If I happen to find a good piece of information whilst browsing Google+, I will just quickly use the shortcut 'command' + 'shift' + 'I' which brings up my default email client (Sparrow) and I send that absolute URL to Flow.

Other
A few other ways are close friends sending me a cool link via G-chat, people submitting links via the WDW website or directing tweets at me.

The Weekly Build

WDW uses the Campaign Monitor email platform. In the early days, I did try using Mail Chimp but being an Aussie, I wanted to support the local guys (oh and their pricing structure suited my bank account) and also utilise their email template system.

The way the template system works is bull dust cool and I would highly recommend using it if you can find an excuse.

Basically, you create a HTML template that uses the Campaign Monitor template tags, upload that file and the images associated with the template and then create a new campaign using that template.

The thing that really shines with the Campaign Monitor templates, that work really well with the WDW email, are repeaters. Repeaters are tags wrapped around a block of code that you would like to re-use when constructing your email.


 <repeater>
  <layout label="Headline">
    <h2 class="secondary">
      <strong><singleline label="Title">Headlines </singleline></strong>
    </h2>
  </layout>

  <layout label="Main link">
    <h3 class="secondary">
      <singleline label="Title"><a href="#">Title of link </a></singleline>
    </h3>
    <multiline label="Description">
      <p>A short explanation about the link  <a href="#" class="from-link">(website.com)</a></p>
    </multiline>
  </layout>

  <layout label="Small link">
    <h4>
      <multiline label="Description">
        <a href="#">Title of article/tip/resource</a> <a href="#" class="from-link">(website.com)</a>
      </multiline>
    </h4>
  </layout>
</repeater>

If you want to dive deeper into the WDW email, you can check it out on GitHub.

Repeater Screen

Editable Section

Editing the ‘Main Link’

If I find time during the week, I will try and start constructing the weekly email, but often too many other things get in the way and I am left with a late Thursday night doing the final touches.

When creating the email, I will go through all the weekly links saved in the WDW list in Flow and all my Twitter favourites from the week in Pinboard. By this time of the week, it is usually easy to know what the big stories are because they are the most raved about.

Doing the final curation takes about 2-3 hours.

Once the email is all set, I do a test send and harass my girlfriend to do a finally proof-read and link check. When I’m happy, I schedule the email to be posted early Friday morning (Australian Eastern Standard Time).

Adding it to the blog

Once the email has landed in everyones inboxes, I add the email to the WDW blog. Sometimes, I can manage to do this before heading to work.

I view the email in the browser tab, fire up the Chrome Developer Tools console tab and paste the following in.

This strips out all the HTML and CSS junk that I don’t want. I simply create a new post, paste the code in and hit publish.

Summary

Gather links from Twitter, Google+, RSS and general browsing. Save them to either Pinboard or Flow.

Use the Campaign Monitor platform to manage subscribers, use their awesome template system to construct and set automatic delivery.

Use a handy little snippet to strip out the junk from the email to enable me to create a quick newsletter post on the WDW blog.

As far as newsletter list workflow articles go, they are few and far between. If you run a newsletter and have some tips or have any advice that would be applicable, I am always trying to improve the process. So please either leave a comment or fire away at my inbox.

Oh yeah, if you are keen on keeping up with the fast-paced world of web design, you should subscribe to Web Design Weekly, all the cool kids do!

 

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

6 Comments

  1. Slightly related but grab yourself an iPad and download Flipboard you can add a google reader account. I find its a nice way to read through my RSS Blogs

  2. Nice roundup there Jake! I done a few similar things there but that’s give me lots of ideas to improve my workflow.

    Congrats on the new site redesign too (not too sure how long that’s been up), looks great! Keep up the good work and I’m looking forward to that first e-book.

    • Thanks Justin!

      Yeah the site is looking a little different. It’s only a few days old and still a few bugs to crush unfortunately…

  3. Hey Jake,

    Have you checked out ‘If This Then That’ http://ifttt.com/wtf

    Might be worth looking in to, see if there are ways to further automate the process by having your starred tweets & articles in reader automatically emailed / saved to flow / etc, rather than crafting those reminder emails yourself.

    Less time curating = more time to write awesome blog posts ;)

  4. This is a fantastic post.

    I’m thinking of starting a weekly newsletter and your detailed instructions are just what I need.

    Thanks for sharing.

    • Glad you enjoyed it David.

      Be sure to flick us a link to your newsletter if you end up starting one.

      Good luck.

This post currently has 6 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *