First off, I’ll just say that today list management goes hand-in-hand with sending newsletters. If you’re a busy person, you don’t need to be managing a mailing list in one place and sending newsletters from another.  I’ve spent much time recently migrating lists from email address books and contact management programs to online emailing services, so this article is written from that perspective and after much experimenting and experience with a number of the most popular email marketing services, I’ve decided to stick with MailChimp for the time being, since they currently offer the most options for the least money (not to mention great customer service).

E-news scenario

A typical fan/member mailing and list management scenario :

• visitors sign up for your mailing list directly on your website
• they are welcomed with a confirmation email (an “opt in”) and can subscribe/unsubscribe themselves at any time
• you visit the online service to send a newsletter, manage your mailing list and view the statistics on your mailings

While many sites (Bandwagon, ReverbNation, SonicBids, Marcato) offer some flavor of these functions, along with a slew of other artist services, I personally prefer a service that specializes in email marketing as the former tend to have limited, often quite generic options; I’m a fan of using the most customizable tools possible, which usually means a tool that is dedicated to a particular function. As a developer of websites my approach is all about my clients having as much ease-of-use and control as possible over their own content and the functionality of their site (most of the client sites I create are for musicians or cultural organizations). I also don’t want to spend my time supporting (sometimes) hard-to-understand tools at these various services when it is so easy for them to create their newsletter just like they create a Post or Page in WordPress.

So why can’t I just send from my own email program?

In an nutshell : because of spam. The bad guys have forced the server who hosts your email to add aggressive filters to prevent you from being overwhelmed with offers for questionable products. If you send a mailing from any email program to a large list, you risk being identified as a spammer. And if your email address reply-to contains your domain name (i.e. you@yourdomain.com), your domain could be blocked, meaning that emails from that domain would not be accepted, period! If a lot of your fans have common email domain addresses like hotmail.com, this could mean that nobody at that domain would receive your email and you’d be in the difficult position of trying to get un-blacklisted by those servers.

A mailing service essentially “authenticates” your message; proof of your identity is furnished via the message’s “header” (details about where it is coming from) as well as using other techniques like “keys” (unique identifiers that can’t easily be spoofed by a spammer). To comply with current laws, a good newsletter also contains a snail-mail address, an unsubscribe link and information about how the recipient got on the list.

If you really want to know more, you can read about CAN-SPAM email regulations here : http://business.ftc.gov/documents/bus61-can-spam-act-compliance-guide-business.

Mailing service features

Most of the popular emailing services offer :

• a limited number of free subscribers to your list (varies widely)
• choice of free or custom templates
• HTML and text-only versions of the mailing
• signup form code you can embed in your website
• analytics detailing new subscribers, unsubscribes, clicks on links in your email
• detailed list management (add, remove subscribers manually or via file import)
• ability to create custom fields and segment lists (options, “how you found us”, etc.)

Some services additionally offer :

• ability to import a newsletter from a URL (template on your website)
• rss-to-email (people sign up for your RSS feed which is delivered as email)
• social network integration (simultaneous send to Facebook, Twitter, etc.)
• identification of subscribers’ social network affiliations
• scheduled sends
• API (application programming interface), special code or “hooks” that can be used to display or interact with your account and its data

Doing it my way

My approach to e-news is to use a page in the website (for my clients, usually WordPress, but any site offering backend access to code will work). The page uses a specially designed “template” (HTML coded layout) that is optimized for display in common email programs (width, fonts, etc.). The sender adds a message and any photos to the page and then pastes the URL (web address) of that page into MailChimp, who imports (amazingly!) everything on that page and voilà, a ready-to-send-out newsletter!

One of the coolest things about doing it this way is that the custom template can also include basically anything that your WordPress site can generate, like recent posts, gigs and other site content. Sometimes we even create two different “newsletter” templates : a more complex one for monthly mailings and a smaller, simpler one for newsflashes. Just give each template a different name (Newsletter, Flash) and select the appropriate model from the Page Attributes dropdown list of custom templates. If you need to keep an archive of your newsletters (which won’t happen if you re-use the same page all the time), you’ll need to create a “newsletter” category and write a new post (instead of a Page) every time you do a mailing; then your template will be a single Post template rather than a page template (ex. single-newsletter.php).

You can make sure your newsletter uses that template by creating a custom single.php that looks something like this :

<?php
$post = $wp_query->post;
if ( in_category('newsletter') ) {
include(TEMPLATEPATH . '/single-newsletter.php');
} else {
include(TEMPLATEPATH . '/single-default.php');
}
?>

In addition to these types of newsletters, MailChimp lets you import content from a custom RSS (XML) template just like the aforementioned Page or Post templates. The “feed” will automatically be sent out as email (RSS-to-email) on a scheduled basis – people receiving it won’t even know that they’re actually reading an RSS feed. This is an especially nice feature for those who post often and thus have a steady stream of content to share. One of my clients, a not-for-profit, sends their montly newsletter out this way; it is configured to grab the latest five posts from the site and send them on the first of the month. Talk about streamlined! No more cutting and pasting and duplicating existing content… It’s not too hard to create an XML template – copy the default WordPress rss.php template into your theme, mess around with it and do some tests. The only caveat is that if your content doesn’t change between tests, you can run into some confusing caching issues on MailChimp. I had to do a bit of hit-or-miss sending to perfect this, including changing publish dates in WordPress and making some tiny edits to get it all right before activating the schedule but all went smoothly after that. Stand by for a more detailed post on creating custom RSS templates and in the meantime, see XML/RSS resources below for more info on this.

Of all the services I’ve used, I love MailChimp best and their price, analytics and social network features can’t be beat. A close second is Campaign Monitor, who are actually in a way responsible for my “inventing” the MailChimp/WordPress system… because Campaign Monitor also lets you paste in a web URL (i.e. the newsletter page in WordPress) and then magically brings all the CSS inline (into the template) even if you are using an external stylesheet, which MailChimp does not currently do (although they say they are looking into it). I also use Campaign Monitor regularly for certain clients who also use more traditional email templates (that live on the Campaign Monitor site) as I like their simple, clean and easy-to-understand interface a lot.

Visit a sample newsletter here to see what it looks like on the web. You can view, copy and paste the source code if you want to try it out yourself. Note that the MailChimp “unsubscribe” and other proprietary tags aren’t filled in with the recipient’s email address, etc. until they are viewing the newsletter in their own email inbox.

Resources

• http://business.ftc.gov/documents/bus61-can-spam-act-compliance-guide-business
• http://mailchimp.com/resources/guides/spam-lawsuits/
• http://vizou.com/hotflash (Vizou sample newsletter template)
• http://crapo.qc.ca (another sample newsletter)
• http://www.wprecipes.com/creating-user-defined-rss-feeds-in-wordpress
• http://emailuniverse.com/ezine-tips/?id=788
• http://mailchimp.com
• http://campaignmonitor.com
• http://graphicmail.com
• http://verticalresponse.com
• http://mymailout.com (formerly Groupie Corral)

An abridged version of this article was  published in the 2011-12 winter edition of Local 1000 (American Federation of Musicians folk branch) newsletter “New Deal”.

I just wrapped up several projects for the Carrefour Jeunesse-Emploi d’Autray-Joliette (Québec). We started with a new WordPress website, followed by a business card and corporate folder. The site presents youth employment projects and is designed to engage visitors looking for employment, to finish their studies or seeking entrepreneurial aid.

I recently did a “facelift” to the website of spoken-word artist/musician amazing performer Evalyn Parry’s website, making this the third iteration of her site on my part! It’s wonderful to have clients who stay with you and fun to see the site evolve from the days of tables and frames to a WordPress wonder.

J’ai récemment travaillé sur la troisième itération du site de la musicianne/artiste Evalyn Parry (oui, soeur du Richard Parry d’Arcade Fire). C’est un plaisir de continuer travailler avec un client et voir leur site évolue du temps des “tableaux et frames” jusqu’à la version WordPress!

http://evalynparry.com

2011 website redesign, album cover and promo material design for trad-folk Québec group Les Poules à Colin.

Over the years I’ve installed and tried out countless CMS, CRM and similar applications, usually open source.  In the end, I’ve usually come back to WordPress  for a whole variety of reasons, the biggest being my need for multi-linguality and client ease-of-use.

I am still learning Expression Engine which I like very much but for me, the tradeoff between these two is that overall I find WordPress easier to understand both in the backend and from a theme design standpoint. While Expression Engine is more structure-focused and granular, I feel that it is not as intuitive when building a site. I also DO NOT like having to work directly in the backend for theme design as I have a great Coda- CSSEdit workflow that is not easily made compatible with Expression Engine’s  built-in process. If they could fix that, I’d be using it more often.

I’ve also been doing themes lately for online services like Shopify, which has a very impressive theming setup BUT the problem that everything is stored across worldwide servers so caching is a big problem for using my own workflow. It’s very frustrating to try to edit CSS with CSSEdit in realtime when the page is continually served up by a different server (the stylesheet overrides stop working from one minute to another).

And of course, you must know about the wonderful http://php.opensourcecms.com site where you can read about and try hundreds of apps! It’s almost like going shopping!

Top picks

• WordPress
  Open source, free. My favorite choice by far (and now pretty much the most popular everywhere). Easy to install and update, multi-lingual (important for me working in Québec), tons of plugins available in both languages, the client easily gets how to use it, uses the wonderful jQuery by default. Depending on client needs, can be too plugin dependent (but as I learn to code better, I reduce that dependency); sometimes targeted by hackers because it’s popular and in widespread use).
• Expression Engine
  Annual fee to keep it up-to-date and have support access (but this is NOT the reason I prefer WordPress at the moment). Based on the wonderful, free CodeIgniter PHP development framework. Super well-designed app, great admin interface, structure-focused and granular. Ideal for complexe sites, excellent security features, easy to customize for the client, a lot less finag. Not as easy to learn as WordPress . Not super-compatible with my own Coda/CSSEdit workflow.

Notable

I’m not going to go into depth on all of these but I’ve made a few notes here and there and these are the apps I felt deserved to be at least mentioned.

• ModX
  I started really getting into CMS with this app. It is a bit more like Expression Engine in the admin interface but wasn’t too difficult to use. I just fell in love with WordPress and stopped using it…
• Joomla
  Very popular, very widespread use, lots of nice features… but not the easiest setup and.
• Drupal
  Ditto. For me, both of these last two were a bit “PC versus Mac” with regard to installation and comprehension of the theming systems. Since I didn’t end up using them extensively, I don’t want to make further comments as I’m not qualified!
• Gelato
  The original system that gave birth to Tumblr. Very simple, easy to install and a neat little blog engine.
• FrogCMS
  Very nice, clean, uncomplicated system. Didn’t have a lot of add-ons at the time I tested it but might be a nice option for some folks.
• Elgg
  Calling itself a “social networking engine, it is focused on community and education. All the bells and whistles, didn’t have any problems installing or testing. Might be overkill for smaller organizations.
• Pligg
  The original system behind Digg.com. Designed around community blogging and promoting posts to the front page.
• Concrete5
  Very nice CMS that seems to be gaining in popularity, active development and add-ons.
• SilverStripe
  Another fast-evolving, well-designed CMS that seems to be taking on Expression Engine-type frameworks.
• Omeka
  A CMS for museums and collections. I didn’t have trouble setting it up but I think it might be a little confusing for the uninitiated.
• Pixie
  Simple and friendly, more suited to traditional sites than blog format.
• GetSimple
  Currently testing this and liking it! Simple (as the name indicates), no database required so a good option for those without access to that on their server.

Also worth a mention

I don’t claim to have put them through all their paces; but the ended up on my list of decent or promising options.

• EggCMS
• LilCMS
• Exponent
• E107
• Chyrp
• Plume

So many apps, so little time…

I’ve also tested wikis, media gallery apps, ecommerce apps, RSS aggregators, project management apps and mailing list managers… but I’ll save those for additional posts!

Nouveau site web pour l’organisation Lanaudière : Mémoire et Racines, avec le Festival Mémoire et Racines en vedette. Le site contient toutes les infos sur l’organisme, l’horaire du festival, biographies des performeurs, un calendrier d’événements “hors festival”, de la publicité (barre latérale), les témoignages des fans, abonnement en ligne pour un bulletin (intégration MailChimp), adhésion à l’organisation, secteur bénévoles… et beaucoup plus!

New website for Lanaudière’s well-known trad Festival Mémoire et Racines, including organizational info, festival schedule, artist bios, annual event calendar, advertising (sidebar), testimonials, online newsletter signup (MailChimp integration), organizational membership, volunteer area… and much more!

http://memoireracines.org

Click on the image to see a demo. The demo is in my own site and is a slightly adapted version (different height, content; doesn’t really go with my site!) than on the client site as their site is not yet live.

Objective

My goal was to have a “featured” area on the home page where weekly specials would be displayed in a continuous horizontal slider, each one a Post in a category titled “featured”. Only the last 3 items would be displayed.

Ingredients

These are the files you’ll need to either create or edit.

js folder (create it in your theme folder; although it could be elsewhere)
easySlider.js (download and put it in the js folder)
slider.php (create this document in your theme folder)
index.php (or whatever page you want to display the slider on)
header.php (in your theme)
style.css (in your theme)

Instructions

Before I start, I want to mention that I’m first and foremost a designer and my years of scanning things that are neatly lined up to the left prevents me from being able to efficiently read (or write) indented code. I’ve tried and tried, but it just doesn’t work for me, so my apologies to you hard-boiled coders! So, here’s what to do if you’re trying to do this kind of implementation :

1. Download the slider code from CSSGlobe at http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

2. Creat a folder called js in your client WordPress theme and copy easyslider.js into it. I took the version number off of the script title because I wanted to be able to easily update it without changing the link in the WP header to reflect the newer version.

3. Open header.php in your theme (or create a custom header if this is just for use on one page) and add the following just before wp_head (after your stylesheet and RSS links). This is really, really important to getting it working in WordPress as this code makes sure that WordPress’s jQuery is queued up for use by the javascript function we’re about to add. This way, we don’t have to add ANOTHER link to ANOTHER instance of jQuery (which you would need to link to if your site didn’t already have it activated). I also discovered that WordPress includes the latest, streamlined version of jQuery and uses what is referred to as “no-conflict” mode so that (hopefully) it won’t clash with plugins that try to use a different version. Or something like that. Google it.

<?php wp_enqueue_script("jquery"); ?>

Then comes…

<?php wp_head(); ?>

Followed by the link to the plugin. Please note that I used the full path to avoid additional queries being made by WordPress template tags, but you could do it that way (i.e blog_url and template_url). And notice that the only link is to the easySlider script; I’ve left off the link to jQuery which Alen includes in his instructions (which are not for installation on WordPress)  :

<script type="text/javascript" src="http://yourdomain.com/wp-content/themes/yourtheme/js/easySlider.js"></script>

Note that the easySlider instructions tell us to use the following code  following the link to the script :

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

But this wasn’t working for me, so I went looking for the answer. A comment from reader Otto (no link given, but THANKS, Otto!) in response to this fantastic article by Chris Coyier in the CSS-Tricks forum about properly loading jQuery suggested employing this different structure, which is what I did, and it worked like a charm! Apparently it prevents conflict with certain plugins that use the $ variable.

jQuery(document).ready(function($){
// your $ code here
});
So here's what I did  after reading that :

<script type="text/javascript">
jQuery(document).ready(function($){
$("#slider").easySlider({
continuous: true,
controlsFade: false
});
});
</script>

The easySlider plugin has a ton of options, including automatic scrolling, continuous (endless carousel), option to fade out next/previous controls when they’re not useful, numeric slide navigation and more. I opted for continuous and didn’t want the disappearing controls since I created a design that lets users click on arrows to go forward or backward (or just forward or backward, endlessly!).

4. Visually speaking, in my client’s theme the slider is positioned across the top of two righthand sidebars, so I had to mess with the original CSS to adjust to a different width as well as a li containing more than a simple image of exactly the right size! I added it to the appropriate template in their theme with this :

<?php include(TEMPLATEPATH."/slider.php");?>

5. The CSS is without a doubt the hardest part of all this. A tip I can offer is that you need to understand up front that Alen has configured the javascript to handle layout and navigation using unordered lists (ul, li) so EACH SLIDE is a single li. This is easy if your list item will always be a single image or a few lines of text. I couldn’t do it the easy way, of course; I wanted each li to be a complete post with a link to the post. I started out by trying to do this using the handy Simple Image Grabber plugin and the_excerpt and got frustrated by problems with the math that manages the “continuous” option. It didn’t like my floating two line items next to each other to fill the (actually double) space in a single “slide”. Finally, I opted for a WP query that grabbed 6 posts from the appropriate category and put the entire content, including image, into a single line item as intended. If I was any good at javascript I’d probably figure out how to change the selectors and customize the easySlider script but I’d already spent an entire day trying to get this working, so I’ll leave that ’til another day!

Here’s what the CSS looks like for the demo version here on my site (you’ll likely be messing with the #slider li width and height and the padding around the post text). The text for the buttons (which I’ve included in the demo but not in my client’s site) is in the easySlider.js itself.

#featured {
width: 450px;
height: 290px;
background: #fff url(images/featured.jpg) no-repeat -8px -12px;
border: 1px solid #ccc;
overflow: hidden;
margin-top: 10px;
}

#slider {
}

#slider img {
float: left;
margin: 0 10px 0 0;
padding: 5px;
width: 150px;
height: auto;
}

.slide-title {
color: #fff;
font-weight: bold;
line-height: 100%;
display: block;
text-align: center;
margin-bottom: 35px;
}

#slider p {
padding: 0 15px;
}

#slider ul,
#slider li {
list-style: none;
overflow: hidden;
margin: 0;
}

#slider li {
width: 440px;
height: 290px;
padding: 5px 0px;
overflow: hidden;
}

#prevBtn,
#nextBtn {
display: block;
width: 80px;
position: absolute;
top: 92px;
font-size: 0.8em;
}

#prevBtn {
left: 53px;
}

#nextBtn {
left:418px;
}

#prevBtn a,
#nextBtn a {
color: #fff;
display: block;
width: 80px;
height: 32px;
padding-top: 5px;
text-transform: uppercase;
}

Resources for this post

Download zipped text file containing above code | Download easySlider 1.7

Help and research for this project.

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles

http://css-tricks.com/forums

http://digwp.com/book/