A bit ago, MailChimp came out with another revision to their site. Their revisions are always great and they're always taking steps forward. Past revisions offered better interfaces for creating emails; things like a fancy WYSIWYG editor, etc. Mostly pre-campaign features.
This revision seemed to focus more on the analytics end of things; the post-campaign features. They now feature a much enhanced analytics package with tons of my favorite thing; context!
Check out the screen shot above that calls out a few of the areas they present very well. Not only does MailChimp compare your current campaigns performance to your account average, it also compares it to your industry average based on other like accounts they manage. I think this is wonderful, as stand-alone numbers are fun, but without knowing how these numbers compare to some other relevant numbers, no measurement can be made, and no action can be taken. They even go as far as to put it in MailChip terms in the green box at the bottom of the screen shot.
Other features they provide which provide context are the ability to see a domain performance report compare opens by location with an interactive flash map.
Good job, MailChimp. Keep up the good work!
Labels: Analytics, Email
There is a lot of talk about creating cool funky calendar style dates for blog posts like the one one this site. Most of them are centered around WordPress, as it's built in PHP, and is easier to manipulate.
Fortunately, the original Blogger allows users to publish files in php as well as html. As such, creating the calendar date thing is pretty straight forward in Blogger, when publishing in php.
Initially, Blogger outputs the date as a string like this:
Mar 9, 2009
After a bit of planning, we decide we want the month at the top, the day in the center, then the year offset at the bottom. We should be able to do this with four divs (or any block level elements, for that matter); one container div and one for the day, month and year. The container div will house a background image and the inner divs will have margins placing the data exactly where we want them.
Going to Photoshop, we design something like this:
You can see that the divs are laid out for each of the bits of data. From this, we can measure exactly how much margin we need and where.
Now lets lay out what we want the HTML to look like:
<div class="date-block">
<div class="date-m">jan</div>
<div class="date-d">21</div>
<div class="date-y">09</div>
</div>
Next, let's create the css to style our HTML above:
.date-block {
background: transparent url('../images/calendar.gif')
no-repeat scroll top right;
display: block;
float: left;
font: normal 900 10px Verdana, Arial, Helvetica, sans-serif;
height: 59px;
margin: 25px 0 5px 0;
text-align: center;
width: 54px;
}
.date-block .date-m {
color: #FFF;
display: block;
line-height: 10px;
margin: 6px auto 2px auto;
padding: 0;
text-align: center;
text-transform: uppercase;
}
.date-block .date-d {
display: block;
font-size: 26px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 18px;
margin: 7px auto 0 auto;
padding: 0;
text-align: center;
}
.date-block .date-y {
color: #FFF;
display: block;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 9px;
margin: 4px auto 0 32px;
padding: 0;
text-align: center;
}
Lastly, we need to create a function that we can call in the Blogger template to turn the standard date into our new fancy calendar date. The function will look like the following, which you can place in an included file, or directly in the Blogger template:
function prettyDate($date) {
list($month, $day, $year) = explode(" ", $date);
$day = str_replace(",", "", $day);
$year = substr($year, 2, 4);
echo "<div class=\"date-block\">";
echo "<div class=\"date-m\">" . $month . "</div>";
echo "<div class=\"date-d\">" . $day . "</div>";
echo "<div class=\"date-y\">'" . $year . "</div>";
echo "</div>";
}
Breaking it down, we are going to split up the original date by exploding them by the space character, which will give us:
$month = "Mar";
$day = "9,";
$year = "2009";
Notice that there is still a comma after the day, so we replace ',' with nothing. Additionally, we turn the four digit year into a two digit year by grabbing the substring of the year, starting at the second digit and grabbing the following two digits, which will return '09'. At this point, we simply print out the HTML containing the variables $month, $day and $year.
Lastly, in our Blogger template, call the function and pass the original date to it:
<?php prettyDate("Mar 9, 2009"); ?>
The function will run when the page loads. This example assumes a couple of things. You have included a functions file with the above function in it. You have placed the CSS in an included CSS file, or directly in the Blogger template. You are running on a server that has PHP installed. Enjoy!
Labels: (X)HTML, PHP, Web Development
With libraries out there like
jQuery and
MooTools, the need for a front end developer to
know Javascript is lessening. jQuery's selector and simple method based context makes it easy for those who have no coding experience to jump right in and hang with those who do. There are, however, some instances, in my opinion, that knowing Javascript can be very handy.
Adobe Extendedscript Toolkit
This IDE allows an Adobe user to write all sizes of scripts to automate tasks in all of its programs. Automate image resizing and directory creation. Employ conditional logic to an action. Target multiple Adobe applications with one script. Do all of this and more with the Adobe Extendedscript Toolkit. What language are these scripts written in? You guessed it. The primary language is Javascript. Optionally, use VBScript or AppleScript. Of what value is this to a front end web developer? A user could write a script to open a site mockup, chop into slices, save them all and close the document, all in the blink of an eye.
Photoshop 7.xx users can
download the extension. (This tool comes with any CS editions)
UltraEdit
UltraEdit is my favorite text editor. It's lightweight, easy to use and very customizable. The latest version incorporates scripts that can be written and called with hotkeys, or by referencing the menu. Much like the Extendedscript Toolkit above, these scripts are written in Javascript and can make automation or repetitive tasks very simple. Need to print an HTML snippet? Use a script. Need to tag all of the files in a directory with your 'copyright comment'? Use a script. Write a script to find all special characters in some text and replace them with their respective hex codes.
These were just a few instances where I use Javascript in applications other than web development.
Labels: Javascript, Programs, Web Development
Like many other site owners out there, I've got created a
smart 404 error page that emails me when a user arrives on said page. This enables me to identify common problems that I can fix. (For example, I've moved my blog from cmoist.com/ to cmoist.com/blog/, so I still get a lot of visitors to these now defunct URLs) Anyhow, after sorting out some of the more common problems, I started seeing pages come through that looked nothing like any URL I've ever hosted. All of them looked something like "SlurpConfirm404/PhD7Cameron/melanson.htm".
After a bit of research, it appears that this is the Yahoo! slurp crawler. The purpose of this crawler is to ensure sites have a proper 404 error page in place. Yahoo creates a URL consisting of random words that it appends to the end of your domain, then crawls.
Read Yahoo!'s
explanation for what exactly the purpose of this crawler is.
Labels: SEO, Traffic, Web Development
Hey Christian! I was checking out your website. Very nice. Anyway I ran across this post. I have been debating on what to use for newsletters for my freelance and I have been messing with mail chimp. I like it a lot. I think it will be the preferred choice!
Posted by
Lindsey |
April 17, 2009 9:27 AM
Cool. I absolutely love MailChimp. It's easy to use, is well supported and very cost effective. If you have any questions, let me know.
Posted by
Christian |
April 17, 2009 9:56 AM